/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child theme for Re Up Health
Author: Sam Amin
Template: hello-elementor
Version: 1.31.0
Text Domain: hello-elementor-child
*/

/* ---- Re Up Health design tokens (mirrors Elementor globals; source: design handoff README) ---- */
:root {
  --ru-cream: #FAF8FF;
  --ru-card-cream: #FCFBFF;
  --ru-sand: #F3F0FC;
  --ru-sand-deep: #EFEAFB;
  --ru-oat: #E9E3F8;
  --ru-stone: #DCD3F0;
  --ru-blush: #F0E9FB;
  --ru-mist: #E9E3F8;
  --ru-ink: #1F1033;
  /* One clay across the site.
     Was #4B2A7B, which measured 4.04:1 against cream text and failed
     WCAG AA. #4B2A7B measures 5.19:1 and passes, so it is now the single
     clay for buttons, progress fills and active states alike — rather than
     buttons using one shade and progress another. */
  --ru-clay: #4B2A7B;
  --ru-clay-hover: #3A1F63;
  /* Button aliases, kept so button intent stays readable at the usage site. */
  --ru-btn: var(--ru-clay);
  --ru-btn-hover: var(--ru-clay-hover);
  /* Was #BE6E45, which measured 3.02–3.81:1 as text and failed WCAG AA on
     every ground it appears on — worst on the announcement bar (#EFEAFB).
     #4B2A7B measures 4.78:1 there and 4.97–6.04:1 elsewhere.

     The hue moved as well as the lightness, deliberately. Darkening #BE6E45
     at its own hue lands on #955332, which is ΔE 4.9 from --ru-clay — near
     enough to read as a second clay. Shifting to a warmer amber-brown keeps
     ΔE 11.6 from clay, matching the 11.1 separation the two colours have
     today, so the palette gains no new collision.

     TEXT ONLY. The calculator's chart series colours are separate tokens
     (--rc-series-*, defined in the reup-calculator plugin) and stay at the
     original brighter terracotta, because they carry no text and are not
     bound by contrast minimums. Do not re-point one at the other. */
  --ru-terracotta: #4B2A7B;
  /* Decorative only — 2.36:1 on the page ground, so it must never carry
     text. Charts, dots, rules and fills only. */
  --ru-highlight: #22B8A0;
  --ru-body: #554D6B;
  /* Both of these were lighter tones — #7A7267 and #938C80 — and both failed
     WCAG AA on every ground the site actually uses. Measured against the warm
     palette: --ru-muted ran 2.38–3.15:1 and --ru-body-soft 3.39–4.48:1, so
     footer legal text, the GPhC line, captions, card body copy and shot
     briefs were all below 4.5:1. Neither is ever used on a dark ground, so
     darkening both is safe everywhere.
     They are now aliases of --ru-body, which clears 4.5:1 on cream,
     card-cream, sand, sand-deep, oat and white. Secondary text keeps its
     hierarchy through size and weight rather than through fading out. The
     three names are kept because they read differently at the usage site and
     are referenced from the Elementor kit. */
  --ru-body-soft: #554D6B;
  --ru-muted: #554D6B;
  --ru-border: #E5DEF7;
  --ru-border-strong: #CFC4EC;
  --ru-dashed: #C3B6E4;
  --ru-notice-border: #7FD8C8;
  --ru-notice-bg: #E6F7F3;
  --ru-notice-text: #10695C;
  --ru-radius-card: 22px;
  --ru-radius-inner: 16px;
  --ru-shadow-card: 0 18px 40px rgba(31, 16, 51, 0.14);
  --ru-font-head: "Schibsted Grotesk", sans-serif;
  --ru-font-body: "Hanken Grotesk", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---- Scroll-snap: desktop homepage only, disabled entirely on mobile ---- */
@media (min-width: 1025px) {
  body.home {
    scroll-snap-type: y proximity;
  }
  body.home .ru-snap-start {
    scroll-snap-align: start;
  }
}

/* ---- Header: sticky card-cream (inner pages) ---- */
.ru-header-inner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ru-card-cream);
  border-bottom: 1px solid var(--ru-border);
}
body.admin-bar .ru-header-inner { top: 32px; }

/* ---- Header: transparent over homepage hero ---- */
.ru-header-home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
}
.ru-header-home a { color: var(--ru-cream); }

/* ---- Logo lockup (live text until production SVGs are cut) ---- */
.ru-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}
.ru-lockup .ru-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 32%;
  background: var(--ru-stone);
  color: var(--ru-ink);
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.ru-lockup .ru-word {
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
}
.ru-lockup .ru-word .light { font-weight: 300; color: var(--ru-body-soft); }
.ru-lockup--oncream .ru-word,
.ru-lockup--oncream .ru-word .light { color: var(--ru-cream); }
.ru-lockup--oncream .ru-word .light { opacity: 0.85; }

/* ---- Pill nav (HFE navigation menu) ---- */
.ru-nav .hfe-nav-menu a.hfe-menu-item {
  font-family: var(--ru-font-body);
  font-size: 17px;
  color: var(--ru-ink);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.ru-nav .hfe-nav-menu a.hfe-menu-item:hover,
.ru-nav .hfe-nav-menu .current-menu-item a.hfe-menu-item {
  background: var(--ru-oat);
  color: var(--ru-ink);
}
.ru-header-home .ru-nav .hfe-nav-menu a.hfe-menu-item { color: var(--ru-cream); }
.ru-header-home .ru-nav .hfe-nav-menu a.hfe-menu-item:hover {
  background: rgba(250, 248, 255, 0.16);
  color: var(--ru-cream);
}

/* ---- Hero and category-screen scrims ---- */
.ru-scrim-hero::before,
.ru-scrim-left::before,
.ru-scrim-right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ru-scrim-hero::before {
  background: linear-gradient(180deg, rgba(31, 16, 51,0.52), rgba(31, 16, 51,0.10) 38%, rgba(31, 16, 51,0.42));
}
.ru-scrim-left::before {
  background: linear-gradient(90deg, rgba(31, 16, 51,0.55), rgba(31, 16, 51,0.08) 62%);
}
.ru-scrim-right::before {
  background: linear-gradient(270deg, rgba(31, 16, 51,0.55), rgba(31, 16, 51,0.08) 62%);
}
.ru-scrim-hero, .ru-scrim-left, .ru-scrim-right { position: relative; }
.ru-scrim-hero > *, .ru-scrim-left > *, .ru-scrim-right > * { position: relative; z-index: 1; }

/* ---- Full-viewport screens (hero + category sections, desktop) ---- */
@media (min-width: 1025px) {
  .ru-screen { min-height: 100vh; }
  .ru-hero-screen { min-height: max(100vh, 740px); }
}

/* ---- Buttons on photography ----
   Specificity + !important needed: Elementor kit CSS loads after this sheet. */
.elementor-widget-button.ru-btn-oncream .elementor-button {
  background-color: var(--ru-cream) !important;
  color: var(--ru-ink) !important;
}
.elementor-widget-button.ru-btn-oncream .elementor-button:hover {
  background-color: #ffffff !important;
  color: var(--ru-ink) !important;
}
.elementor-widget-button.ru-btn-ghost .elementor-button {
  background-color: transparent !important;
  border: 1px solid rgba(250, 248, 255, 0.7);
  color: var(--ru-cream) !important;
}
.elementor-widget-button.ru-btn-ghost .elementor-button:hover {
  background-color: rgba(250, 248, 255, 0.14) !important;
  color: var(--ru-cream) !important;
}
.elementor-widget-button.ru-btn-secondary .elementor-button {
  background-color: transparent !important;
  border: 1px solid var(--ru-border-strong);
  color: var(--ru-ink) !important;
}
.elementor-widget-button.ru-btn-secondary .elementor-button:hover {
  background-color: var(--ru-oat) !important;
  color: var(--ru-ink) !important;
}

/* ---- Cards ---- */
.ru-card {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: var(--ru-radius-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ru-card-lift { cursor: pointer; }
.ru-card-lift:hover {
  border-color: var(--ru-border-strong);
  transform: translateY(-4px);
}
.ru-card-float { box-shadow: var(--ru-shadow-card); }

/* ---- Placeholder / notice pills ---- */
.ru-notice-pill {
  display: inline-block;
  background: var(--ru-notice-bg);
  border: 1px solid var(--ru-notice-border);
  color: var(--ru-notice-text);
  border-radius: 999px;
  font-family: var(--ru-font-body);
  font-size: 12.5px;
  padding: 6px 14px;
}
.ru-dashed-pill {
  display: inline-block;
  border: 1.5px dashed var(--ru-dashed);
  color: var(--ru-muted);
  border-radius: 999px;
  font-family: var(--ru-font-body);
  font-size: 12.5px;
  padding: 6px 14px;
}

/* ---- Image placeholder slots (no licensed imagery in this phase) ---- */
/* Placeholder slots sit on the darker warm grounds — stone, blush, mist —
   where even --ru-body only reaches 4.18:1. Their text is ink instead, which
   also matters practically: these carry the shot briefs a photographer has to
   read off the page. All of this goes when the real images land. */
.ru-img-slot,
.ru-img-slot .ru-dashed-pill,
.ru-img-slot__brief,
.ru-step-bg__pill {
  color: var(--ru-ink);
}
.ru-img-slot {
  background: var(--ru-stone);
  border-radius: var(--ru-radius-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ru-font-body);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

/* ---- Announcement bar ---- */
.ru-announce {
  background: #EFEAFB;
  color: var(--ru-ink);
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 300;
}
.ru-announce a { color: var(--ru-terracotta); }
.ru-announce-text {
  margin: 0;
  font-family: var(--ru-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ru-ink);
}
/* homepage transparent header sits below the announcement bar */
body.home .ru-header-home { top: 40px; }

/* ---- Footer ---- */
.ru-footer { background: var(--ru-sand-deep); }
.ru-footer a { color: var(--ru-body); text-decoration: none; }
.ru-footer a:hover { color: var(--ru-ink); }
.ru-footer .ru-footer-eyebrow {
  font-family: var(--ru-font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ru-muted);
}
.ru-social-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ru-border-strong);
  color: var(--ru-body);
  font-size: 11px;
  font-family: var(--ru-font-body);
}

/* ---- Trust bar ---- */
.ru-trust-bar {
  background: var(--ru-card-cream);
  border-top: 1px solid var(--ru-border);
  border-bottom: 1px solid var(--ru-border);
}
.ru-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  color: var(--ru-body);
}
.ru-trust-item svg { width: 16px; height: 16px; flex: none; color: var(--ru-terracotta); }

/* ---- On-photography text helpers ---- */
.ru-support-oncream { opacity: 0.85; }
.ru-dashed-pill--photo {
  border-color: rgba(250, 248, 255, 0.5);
  color: rgba(250, 248, 255, 0.78);
}

/* ---- Header 3-column grid: left / centred / right ---- */
@media (min-width: 1025px) {
  .ru-header-3col > .e-con-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
  }
  .ru-header-3col > .e-con-inner > :nth-child(1) { justify-self: start; }
  .ru-header-3col > .e-con-inner > :nth-child(2) { justify-self: center; }
  .ru-header-3col > .e-con-inner > :nth-child(3) { justify-self: end; }
  /* inner-page header: logo left, nav centred */
  .ru-header-inner .ru-header-3col > .e-con-inner > :nth-child(2) { justify-self: center; }
}

.ru-account-link {
  font-family: var(--ru-font-body);
  font-size: 15px;
  color: var(--ru-ink);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
}
.ru-account-link:hover { background: var(--ru-oat); color: var(--ru-ink); }
.ru-account-link--cream { color: var(--ru-cream); }
.ru-account-link--cream:hover { background: rgba(250,245,238,0.16); color: var(--ru-cream); }

.ru-home-anchors { display: flex; gap: 6px; }
.ru-home-anchors a {
  font-family: var(--ru-font-body);
  font-size: 17px;
  color: var(--ru-cream);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
}
.ru-home-anchors a:hover { background: rgba(250,245,238,0.16); }

/* ---- Footer link lists ---- */
.ru-footer-links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ru-footer-links li {
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ru-body);
  margin-bottom: 9px;
}
.ru-footer-social { margin-top: 18px; display: flex; gap: 8px; }
.ru-footer-legal {
  border-top: 1px solid var(--ru-border-strong);
  padding-top: 24px;
}
.ru-footer-legal p {
  font-family: var(--ru-font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ru-muted);
  margin: 0 0 10px;
}
.ru-footer-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ru-footer-copyright { margin-top: 14px; }

/* ---- Clinician governance block (authored-by + review dates) ---- */
.ru-govblock {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}
.ru-authored {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-left: 3px solid var(--ru-clay);
  border-radius: var(--ru-radius-inner);
  padding: 20px 22px;
}
.ru-authored__label {
  display: block;
  font-family: var(--ru-font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ru-body);
  margin-bottom: 8px;
}
.ru-authored__name {
  margin: 0;
  font-family: var(--ru-font-head);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ru-ink);
}
.ru-authored__role { margin: 4px 0 0; font-size: 14.5px; color: var(--ru-body); }
.ru-authored__reg  { margin: 6px 0 0; font-size: 13.5px; color: var(--ru-body); }

.ru-revdates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ru-border);
  border: 1px solid var(--ru-border);
  border-radius: var(--ru-radius-inner);
  overflow: hidden;
}
.ru-revdates__item {
  background: var(--ru-card-cream);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ru-revdates__label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ru-body);
}
.ru-revdates__value {
  font-family: var(--ru-font-head);
  font-size: 15px;
  color: var(--ru-ink);
}
@media (max-width: 900px) {
  .ru-govblock { grid-template-columns: 1fr; }
  .ru-revdates { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Checkout coupon: a quiet "Have a coupon?" disclosure ----
   WooCommerce ships this as a full-width info banner plus a wide form, which
   on a £00 pre-launch checkout shouted louder than the payment step. Reduced
   to a single small rounded line that expands. */
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ru-body);
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-form-coupon-toggle .showcoupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ru-border-strong);
  border-radius: 999px;
  background: var(--ru-card-cream);
  font-size: 13.5px;
  color: var(--ru-ink);
  text-decoration: none;
}
.woocommerce-form-coupon-toggle .showcoupon:hover {
  background: var(--ru-oat);
  border-color: var(--ru-ink);
  color: var(--ru-ink);
}
form.checkout_coupon.woocommerce-form-coupon {
  max-width: 420px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--ru-border);
  border-radius: 14px;
  background: var(--ru-card-cream);
}
form.checkout_coupon .form-row { margin: 0 0 8px; padding: 0; }
form.checkout_coupon input[type="text"] {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14.5px;
}
form.checkout_coupon button.button {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  /* Colour and background together: the kit's button:hover sets both, so
     setting one alone leaves the other at whatever the theme chose. */
  background: var(--ru-clay);
  color: #FFFFFF;
  border: 1px solid var(--ru-clay);
}
form.checkout_coupon button.button:hover,
form.checkout_coupon button.button:focus {
  background: var(--ru-clay-hover);
  color: #FFFFFF;
  border-color: var(--ru-clay-hover);
}

/* Build credit. Deliberately inherits the legal fine-print colour and size
   rather than taking the link accent, so it reads as small print — an
   underline carries the fact that it is a link instead.
   Written as .ru-footer-legal a.ru-footer-credit (0,2,1) because the kit's
   own `.elementor-kit-11 a` rule is (0,1,1) and would otherwise win. */
.ru-footer-legal a.ru-footer-credit {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ru-footer-legal a.ru-footer-credit:hover,
.ru-footer-legal a.ru-footer-credit:focus-visible {
  color: var(--ru-ink);
}
.ru-footer-sep { margin: 0 2px; opacity: 0.6; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .elementor-button { min-height: 44px; }
  .ru-header-3col > .e-con-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* Buttons are sentence case in the design */
.elementor-button { text-transform: none; letter-spacing: normal; }

/* ---- Category page ---- */
.ru-cat-scrim { position: relative; }
.ru-cat-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(31, 16, 51,0.66) 0%, rgba(31, 16, 51,0.28) 58%, rgba(31, 16, 51,0.10) 100%);
}
.ru-cat-scrim > * { position: relative; z-index: 1; }
@media (min-width: 1025px) {
  .ru-cat-hero { min-height: 560px; }
}
.ru-cta-gradient {
  background: linear-gradient(140deg, #F0E9FB, #DCD3F0 62%, #E9E3F8);
}
.ru-trust-plain {
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--ru-font-body);
  font-size: 13.5px;
  color: var(--ru-body);
  margin: 0;
}
.ru-img-slot--flush { border-radius: 0; }
.ru-view-link {
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  color: var(--ru-terracotta);
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}
.ru-view-link:hover { color: var(--ru-clay-hover); }
.ru-hero-note {
  font-family: var(--ru-font-body);
  font-size: 14px;
  color: var(--ru-stone);
}

/* ---- Shared form inputs (design shells; plugin renders the real controls) ---- */
.ru-input,
.ru-form input[type="text"],
.ru-form input[type="password"],
.ru-form textarea {
  width: 100%;
  border: 1px solid var(--ru-border-strong);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-family: var(--ru-font-body);
  background: var(--ru-cream);
  color: var(--ru-ink);
  outline: none;
}
.ru-form textarea { resize: vertical; }
.ru-form .ru-field-label {
  display: block;
  font-family: var(--ru-font-body);
  font-size: 13px;
  color: var(--ru-body);
  margin: 0 0 8px;
}
.ru-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 767px) {
  .ru-form-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Quiz shell ---- */
.ru-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ru-font-body);
  font-size: 13px;
  color: var(--ru-body);
  margin: 0 0 12px;
}
.ru-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ru-border);
  overflow: hidden;
}
.ru-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ru-clay);
}
.ru-options { display: flex; flex-direction: column; gap: 12px; }
.ru-option {
  border: 1px solid var(--ru-border);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--ru-font-body);
  font-size: 16.5px;
  color: var(--ru-ink);
  transition: border-color 0.15s ease;
}
.ru-option:hover { border-color: var(--ru-clay); }
.ru-option .ru-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ru-border-strong);
  flex: none;
}
.ru-option--selected {
  border-color: var(--ru-clay);
  background: var(--ru-blush);
}
.ru-option--selected .ru-dot {
  border-color: var(--ru-clay);
  background: var(--ru-clay);
  box-shadow: inset 0 0 0 5px var(--ru-blush);
}
.ru-toggle-group {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: var(--ru-oat);
  border-radius: 999px;
}
.ru-toggle-pill {
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ru-font-body);
  font-size: 14px;
  color: var(--ru-body);
}
.ru-toggle-pill--active {
  background: var(--ru-ink);
  color: var(--ru-cream);
}
.ru-bmi-panel {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--ru-font-body);
}
.ru-bmi-panel .ru-bmi-num {
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--ru-clay);
}
.ru-bmi-result-num {
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--ru-clay);
}
.ru-badge {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: var(--ru-font-body);
}
.ru-badge--tick { background: var(--ru-stone); color: var(--ru-ink); }
.ru-badge--warn { background: var(--ru-blush); color: #6A4232; }
.ru-signpost {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ru-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #5A5248;
}
.ru-inset-panel {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 20px 22px;
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5248;
}
.ru-quiz-footer {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--ru-oat);
  padding-top: 24px;
}
.ru-quiz-footer .ru-conf-note {
  font-size: 13px;
  color: var(--ru-muted);
  margin-left: auto;
  font-family: var(--ru-font-body);
}

/* ---- Checkout shell ---- */
.ru-crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--ru-font-body);
  font-size: 13.5px;
  color: var(--ru-body-soft);
  margin: 0;
}
.ru-crumbs .active { color: var(--ru-clay); }
.ru-lineitem {
  display: flex;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--ru-border);
  border-radius: 18px;
  padding: 18px;
  font-family: var(--ru-font-body);
}
.ru-lineitem .ru-thumb {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  background: var(--ru-stone);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  color: var(--ru-body-soft);
  text-align: center;
  padding: 6px;
}
.ru-lineitem .ru-li-name { font-family: var(--ru-font-head); font-size: 19px; letter-spacing: -0.01em; color: var(--ru-ink); }
.ru-lineitem .ru-li-meta { font-size: 14px; color: var(--ru-body-soft); }
.ru-lineitem .ru-li-price { margin-left: auto; font-family: var(--ru-font-head); font-size: 20px; color: var(--ru-ink); }
.ru-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--ru-font-body);
  font-size: 15.5px;
  color: var(--ru-ink);
}
.ru-summary-total {
  border-top: 1px solid var(--ru-border);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ru-summary-total .num { font-family: var(--ru-font-head); font-size: 26px; color: var(--ru-ink); }

/* ---- Plan-length pills (product detail) ---- */
.ru-plan-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ru-plan-pill {
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--ru-border-strong);
  color: var(--ru-ink);
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  cursor: pointer;
}
.ru-plan-pill--active {
  background: var(--ru-ink);
  border-color: var(--ru-ink);
  color: var(--ru-cream);
}

/* ---- Order history table ---- */
.ru-table { width: 100%; }
.ru-table .ru-tr {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 0.8fr;
  align-items: center;
}
.ru-table .ru-thead {
  background: var(--ru-oat);
  font-family: var(--ru-font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ru-body);
}
.ru-table .ru-thead > div { padding: 16px 24px; }
.ru-table .ru-tr + .ru-tr { border-top: 1px solid var(--ru-oat); }
.ru-table .ru-td { padding: 20px 24px; font-family: var(--ru-font-body); font-size: 15.5px; color: #5A5248; }
.ru-table .ru-td .ref { color: var(--ru-ink); display: block; }
.ru-table .ru-td .date { font-size: 13.5px; color: var(--ru-muted); }
.ru-status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--ru-font-body);
  font-size: 13px;
  white-space: nowrap;
}
.ru-status-pill--delivered { border: 1px solid #CBD8C6; background: #EDF2E8; color: #3E5344; }
.ru-status-pill--declined { border: 1px solid var(--ru-notice-border); background: var(--ru-notice-bg); color: var(--ru-notice-text); }
@media (max-width: 767px) {
  .ru-table .ru-tr { grid-template-columns: 1fr 1fr; }
}

/* ---- Filter pills (resources) ---- */
.ru-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ru-filter-pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--ru-border-strong);
  color: var(--ru-ink);
  font-family: var(--ru-font-body);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.ru-filter-pill--active {
  background: var(--ru-ink);
  border-color: var(--ru-ink);
  color: var(--ru-cream);
}

/* ---- Article ---- */
.ru-article-body {
  font-family: var(--ru-font-body);
  font-size: 18px;
  line-height: 1.75;
  color: #4A453D;
}
.ru-article-body .lede { font-size: 21px; line-height: 1.65; color: var(--ru-ink); }
.ru-article-body h2 {
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  color: var(--ru-ink);
}
.ru-article-body p { margin: 0 0 24px; }
.ru-pullquote {
  margin: 12px 0;
  padding: 26px 30px;
  background: var(--ru-sand);
  border-radius: 18px;
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ru-ink);
}
.ru-byline { display: flex; gap: 14px; align-items: center; font-family: var(--ru-font-body); font-size: 14px; color: var(--ru-ink); }
.ru-byline .ru-avatar {
  width: 44px; height: 44px; border-radius: 999px; background: var(--ru-mist); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--ru-body-soft); text-align: center;
}
.ru-byline .sub { color: var(--ru-muted); }

/* ---- Urgent-care notice panel (contact) ---- */
.ru-urgent-panel {
  background: var(--ru-notice-bg);
  border: 1px solid var(--ru-notice-border);
  border-radius: 16px;
  padding: 20px;
  font-family: var(--ru-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ru-notice-text);
}

/* ---- Contact detail rows ---- */
.ru-detail-rows { border-top: 1px solid #E4DACB; padding-top: 22px; display: flex; flex-direction: column; gap: 16px; font-family: var(--ru-font-body); }
.ru-detail-rows .lbl { display: block; font-size: 13px; color: var(--ru-muted); }
.ru-detail-rows .val { font-size: 17px; color: var(--ru-ink); }
.ru-detail-rows .val--pending { color: var(--ru-body-soft); }

/* ---- WooCommerce checkout, styled to the shell design ---- */
.ru-wc-checkout .woocommerce { font-family: var(--ru-font-body); color: var(--ru-ink); }
.ru-wc-checkout form.checkout {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
}
.ru-wc-checkout #customer_details {
  flex: 1.3;
  min-width: 320px;
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: 22px;
  padding: 36px;
}
.ru-wc-checkout #order_review_heading,
.ru-wc-checkout #order_review {
  flex: 1;
  min-width: 280px;
}
.ru-wc-checkout #order_review {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: 22px;
  padding: 30px;
  position: sticky;
  top: 90px;
}
.ru-wc-checkout #order_review_heading {
  flex-basis: 100%;
  order: -1;
  display: none; /* the Elementor shell supplies the page heading */
}
.ru-wc-checkout .woocommerce-billing-fields h3 {
  font-family: var(--ru-font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ru-body-soft);
  font-weight: 500;
  margin: 0 0 14px;
}
.ru-wc-checkout .form-row label {
  font-size: 13px;
  color: var(--ru-body);
  margin-bottom: 6px;
}
.ru-wc-checkout .form-row .input-text,
.ru-wc-checkout .form-row select,
.ru-wc-checkout .select2-container--default .select2-selection--single {
  border: 1px solid var(--ru-border-strong) !important;
  border-radius: 14px !important;
  padding: 15px 18px;
  font-size: 16px;
  font-family: var(--ru-font-body);
  background: var(--ru-cream) !important;
  color: var(--ru-ink);
  height: auto;
  outline: none;
}
.ru-wc-checkout .select2-container--default .select2-selection--single { padding: 12px 18px; }
.ru-wc-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; color: var(--ru-ink); }
.ru-wc-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
/* native account fields stay in the form but the design's panel at the
   payment step is the one the customer sees */
.ru-wc-checkout .woocommerce-account-fields { display: none; }

.ru-wc-checkout table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  font-size: 15.5px;
}
.ru-wc-checkout table.shop_table th,
.ru-wc-checkout table.shop_table td {
  border: none;
  padding: 8px 0;
  background: transparent;
}
.ru-wc-checkout table.shop_table tfoot .order-total {
  border-top: 1px solid var(--ru-border);
}
.ru-wc-checkout table.shop_table tfoot .order-total td,
.ru-wc-checkout table.shop_table tfoot .order-total th {
  padding-top: 14px;
  font-family: var(--ru-font-head);
  font-size: 20px;
}
.ru-checkout-account-panel {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 22px;
  margin: 18px 0;
}
.ru-checkout-account-panel .ru-cap-title {
  font-family: var(--ru-font-head);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ru-ink);
  display: block;
  margin-bottom: 8px;
}
.ru-checkout-account-panel p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5248;
}
.ru-checkout-account-panel .ru-cap-check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  color: var(--ru-ink);
  cursor: pointer;
}
.ru-wc-checkout #place_order {
  width: 100%;
  background: var(--ru-btn);
  color: var(--ru-cream);
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--ru-font-body);
  font-size: 15.5px;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}
.ru-wc-checkout #place_order:hover { background: var(--ru-btn-hover); }
.ru-wc-checkout .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--ru-muted); }
.ru-wc-checkout .woocommerce-checkout-payment { background: transparent !important; }
.ru-wc-checkout .wc_payment_methods { padding: 0 !important; margin: 0 0 14px; list-style: none; }
.ru-wc-checkout .woocommerce-checkout-payment div.payment_box {
  background: var(--ru-oat) !important;
  border-radius: 14px;
  font-size: 14px;
  color: var(--ru-body);
}
.ru-wc-checkout .woocommerce-NoticeGroup,
.ru-wc-checkout .woocommerce-error {
  border-radius: 16px;
  background: var(--ru-notice-bg);
  border: 1px solid var(--ru-notice-border);
  color: var(--ru-notice-text);
  padding: 16px 20px;
  list-style: none;
}
.ru-wc-checkout .woocommerce-error li { margin: 4px 0; }

/* Thank-you / confirmation step */
.woocommerce-order {
  max-width: 760px;
  margin: 48px auto 90px;
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: 22px;
  padding: 56px;
  font-family: var(--ru-font-body);
  color: var(--ru-body);
}
.ru-thankyou-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ru-ink);
}
.woocommerce-order ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 22px 0;
  padding: 0;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 1px solid var(--ru-border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ru-muted);
  margin: 0;
  border-right-width: 1px !important;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  font-size: 15.5px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ru-ink);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .ru-wc-checkout #order_review { position: static; }
}

/* ==========================================================
   Consultation flow (kod-treatment-consultations) restyled to
   the Re Up Health design. Plugin drives the logic; this only
   maps its markup onto the design's visual states.
   ========================================================== */
.ru-consult-wrap .kod-tc-flow {
  font-family: var(--ru-font-body);
  color: var(--ru-ink);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* progress bar */
.ru-consult-wrap .kod-tc-progress { display: flex; flex-direction: column; gap: 12px; }
.ru-consult-wrap .kod-tc-progress__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ru-body);
}
.ru-consult-wrap .kod-tc-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ru-border);
  overflow: hidden;
}
.ru-consult-wrap .kod-tc-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ru-clay);
}

/* question / terms / outcome card */
.ru-consult-wrap .kod-tc-flow__form,
.ru-consult-wrap .kod-tc-consent,
.ru-consult-wrap .kod-tc-flow--blocked .kod-tc-flow__intro,
.ru-consult-wrap .kod-tc-flow--products .kod-tc-flow__form {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: 22px;
  padding: 44px;
}
@media (max-width: 767px) {
  .ru-consult-wrap .kod-tc-flow__form,
  .ru-consult-wrap .kod-tc-consent { padding: 24px; }
}
.ru-consult-wrap .kod-tc-flow__title {
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--ru-ink);
}
@media (max-width: 767px) {
  .ru-consult-wrap .kod-tc-flow__title { font-size: 28px; }
}
.ru-consult-wrap .kod-tc-question__text {
  font-family: var(--ru-font-head);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
  display: block;
  margin-bottom: 8px;
}
.ru-consult-wrap .kod-tc-question__description,
.ru-consult-wrap .kod-tc-step__description,
.ru-consult-wrap .kod-tc-step__intro {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ru-body-soft);
  max-width: 52ch;
}
.ru-consult-wrap .kod-tc-question { margin-bottom: 26px; }
.ru-consult-wrap .kod-tc-question__required { color: var(--ru-terracotta); }

/* answer options — design's stacked radio rows.
   Plugin ships a teal selected-state; these override it to clay/blush.
   Both selectors are needed: :has() for no-JS, .is-selected for the
   class consultation.js adds on click. */
.ru-consult-wrap .kod-tc-card-options { display: flex; flex-direction: column; gap: 12px; }
.ru-consult-wrap .kod-tc-card-option {
  border: 1px solid var(--ru-border);
  background-color: var(--ru-cream);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 16.5px;
  color: var(--ru-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ru-consult-wrap .kod-tc-card-option:hover {
  background-color: var(--ru-cream);
  border-color: var(--ru-clay);
}
.ru-consult-wrap .kod-tc-card-option__indicator {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ru-border-strong);
  background-color: transparent;
  flex: none;
}
.ru-consult-wrap .kod-tc-card-option--checkbox .kod-tc-card-option__indicator { border-radius: 7px; }
.ru-consult-wrap .kod-tc-card-option:has(.kod-tc-card-option__input:checked),
.ru-consult-wrap .kod-tc-card-option.is-selected {
  background-color: var(--ru-blush) !important;
  border-color: var(--ru-clay) !important;
  border-width: 1px;
  padding: 20px 22px;
}
.ru-consult-wrap .kod-tc-card-option:has(.kod-tc-card-option__input:checked) .kod-tc-card-option__indicator,
.ru-consult-wrap .kod-tc-card-option.is-selected .kod-tc-card-option__indicator {
  background-color: var(--ru-clay) !important;
  border-color: var(--ru-clay) !important;
}
.ru-consult-wrap .kod-tc-card-option:has(.kod-tc-card-option__input:focus-visible) {
  outline: 2px solid var(--ru-clay);
  outline-offset: 2px;
}
.ru-consult-wrap .kod-tc-card-option--disabled {
  background-color: var(--ru-oat) !important;
  opacity: 0.65;
}
.ru-consult-wrap .kod-tc-card-option__label { font-family: var(--ru-font-body); }

/* pass state — product choice cards */
.ru-consult-wrap .kod-tc-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 4px;
}
.ru-consult-wrap .kod-tc-product-card {
  border: 1px solid var(--ru-border);
  background-color: var(--ru-cream);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ru-consult-wrap .kod-tc-product-card:hover {
  background-color: var(--ru-cream);
  border-color: var(--ru-clay);
}
.ru-consult-wrap .kod-tc-product-card:has(.kod-tc-product-card__input:checked),
.ru-consult-wrap .kod-tc-product-card.is-selected {
  background-color: var(--ru-blush) !important;
  border-color: var(--ru-clay) !important;
  border-width: 1px;
  padding: 20px 22px;
}
.ru-consult-wrap .kod-tc-product-card__name {
  font-family: var(--ru-font-head);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ru-ink);
}
.ru-consult-wrap .kod-tc-product-card__price {
  margin-left: auto;
  font-family: var(--ru-font-head);
  font-size: 18px;
  color: var(--ru-ink);
}
.ru-consult-wrap .kod-tc-product-card--disabled { opacity: 0.6; }

/* height & weight measurement inputs */
.ru-consult-wrap .kod-tc-measurement {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
}
.ru-consult-wrap .kod-tc-measurement input[type="number"],
.ru-consult-wrap .kod-tc-flow input[type="text"],
.ru-consult-wrap .kod-tc-flow input[type="number"],
.ru-consult-wrap .kod-tc-flow input[type="date"],
.ru-consult-wrap .kod-tc-flow textarea,
.ru-consult-wrap .kod-tc-flow select {
  border: 1px solid var(--ru-border-strong);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 17px;
  font-family: var(--ru-font-body);
  background: var(--ru-cream);
  color: var(--ru-ink);
  outline: none;
  width: 100%;
}
.ru-consult-wrap .kod-tc-measurement__unit {
  font-size: 15px;
  color: var(--ru-body-soft);
  flex: none;
}

/* footer actions */
.ru-consult-wrap .kod-tc-flow__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--ru-oat);
  padding-top: 24px;
  margin-top: 8px;
}
.ru-consult-wrap .kod-tc-btn,
.ru-consult-wrap .kod-tc-btn-primary,
.ru-consult-wrap button[type="submit"] {
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--ru-font-body);
  font-size: 15px;
  font-weight: 500;
  border: none;
  background: var(--ru-btn);
  color: var(--ru-cream);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.ru-consult-wrap .kod-tc-btn:hover,
.ru-consult-wrap .kod-tc-btn-primary:hover,
.ru-consult-wrap button[type="submit"]:hover { background: var(--ru-btn-hover); }
.ru-consult-wrap .kod-tc-back-btn {
  background: transparent;
  border: 1px solid var(--ru-border-strong);
  color: var(--ru-ink);
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
.ru-consult-wrap .kod-tc-back-btn:hover { background: var(--ru-oat); color: var(--ru-ink); }

/* consent / terms screen */
.ru-consult-wrap .kod-tc-consent__title {
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
}
.ru-consult-wrap .kod-tc-consent__list {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
}
.ru-consult-wrap .kod-tc-consent__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ru-body);
}
.ru-consult-wrap .kod-tc-consent__list li::before {
  content: "·";
  position: absolute;
  left: 8px;
  color: var(--ru-terracotta);
}

/* eligibility trigger message shown inline on a step */
.ru-consult-wrap .kod-tc-question__trigger-message,
.ru-consult-wrap .kod-tc-notice--warning {
  background: var(--ru-notice-bg);
  border: 1px solid var(--ru-notice-border);
  color: var(--ru-notice-text);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 12px;
}
.ru-consult-wrap .kod-tc-notice--info {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5248;
}
.ru-consult-wrap .kod-tc-question__error {
  color: var(--ru-notice-text);
  font-size: 14px;
  margin-top: 8px;
  display: block;
}

/* refer / hard-stop state — the design's warning card */
.ru-consult-wrap .kod-tc-flow--blocked .kod-tc-flow__title::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ru-blush);
  color: #6A4232;
  font-size: 22px;
  font-family: var(--ru-font-body);
  margin-bottom: 22px;
}
.ru-consult-wrap .kod-tc-blocked__message {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ru-body);
  max-width: 58ch;
}
.ru-consult-wrap .kod-tc-blocked__note {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #5A5248;
  margin-top: 18px;
}
.ru-consult-wrap .kod-tc-blocked__reference {
  font-size: 13px;
  color: var(--ru-muted);
  margin-top: 14px;
  display: block;
}

/* pass state → product selection */
.ru-consult-wrap .kod-tc-product {
  border: 1px solid var(--ru-border);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 12px;
  background: var(--ru-cream);
}
.ru-consult-wrap .kod-tc-product__badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  background: var(--ru-oat);
  color: var(--ru-body);
}
.ru-consult-wrap .kod-tc-product__badge--outofstock {
  background: var(--ru-notice-bg);
  color: var(--ru-notice-text);
}
.ru-consult-wrap .kod-tc-preview {
  background: var(--ru-notice-bg);
  border: 1px solid var(--ru-notice-border);
  color: var(--ru-notice-text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px;
  display: inline-block;
}

/* FAQ accordion (Elementor accordion widget, .ru-faq wrapper) */
.ru-faq .elementor-accordion-item {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border) !important;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ru-faq .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid var(--ru-border) !important; }
.ru-faq .elementor-tab-title {
  padding: 22px 26px;
  font-family: var(--ru-font-head);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ru-ink);
  transition: background 0.15s ease;
}
.ru-faq .elementor-tab-title:hover { background: #F7F1E8; }
.ru-faq .elementor-tab-title a { color: var(--ru-ink); }
.ru-faq .elementor-accordion-icon {
  color: var(--ru-terracotta) !important;
  font-size: 18px;
}
.ru-faq .elementor-tab-content {
  padding: 0 26px 24px;
  font-family: var(--ru-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ru-body);
  border-top: none !important;
}

/* Metric/imperial toggle on the height & weight step (site add-on) */
.ru-consult-wrap .ru-measure-toggle { margin-bottom: 18px; }
.ru-consult-wrap .ru-toggle-pill {
  border: none;
  background: transparent;
  font-family: var(--ru-font-body);
}
.ru-consult-wrap .ru-toggle-pill--active {
  background: var(--ru-ink);
  color: var(--ru-cream);
}
.ru-consult-wrap .ru-imperial-field[hidden],
.ru-consult-wrap .kod-tc-measurement[hidden] { display: none !important; }
.ru-consult-wrap .kod-tc-bmi {
  background: var(--ru-sand);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 16px;
  font-family: var(--ru-font-body);
  font-size: 15px;
  color: #5A5248;
}

/* ---- Account area (live data) ---- */
.ru-reorder-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 32px;
}
.ru-reorder-main { display: flex; gap: 20px; align-items: center; }
.ru-reorder-thumb {
  width: 88px; height: 88px; border-radius: 16px; flex: none; font-size: 10px;
}
.ru-reorder-copy { display: flex; flex-direction: column; gap: 6px; font-family: var(--ru-font-body); }
.ru-reorder-name {
  font-family: var(--ru-font-head);
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
}
.ru-reorder-meta { font-size: 14.5px; color: var(--ru-body-soft); }
.ru-reorder-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ru-reorder-note {
  font-family: var(--ru-font-body);
  font-size: 13px;
  color: var(--ru-muted);
  max-width: 26ch;
  text-align: right;
}
/* Written as `a.ru-account-cta` with !important on colour: the Elementor kit
   emits `.elementor-kit-11 a { color: <terracotta> }`, which outranks a bare
   single class and loads after this sheet — it was painting terracotta text
   on the clay button, near-invisible. Same fix as the ru-btn-* variants. */
a.ru-account-cta,
.ru-account-cta {
  display: inline-block;
  background: var(--ru-btn);
  color: var(--ru-cream) !important;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--ru-font-body);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
a.ru-account-cta:hover,
.ru-account-cta:hover { background: var(--ru-btn-hover); color: var(--ru-cream) !important; }
.ru-status-pill--pending {
  border: 1px solid var(--ru-border-strong);
  background: var(--ru-oat);
  color: var(--ru-body);
}
.ru-account-note {
  font-family: var(--ru-font-body);
  font-size: 13px;
  color: var(--ru-body-soft);
  margin-top: 12px;
}
@media (max-width: 767px) {
  .ru-reorder-panel { flex-direction: column; align-items: flex-start; }
  .ru-reorder-action { align-items: flex-start; }
  .ru-reorder-note { text-align: left; }
}
.ru-signed-in { font-family: var(--ru-font-body); font-size: 14.5px; color: var(--ru-body); }
.ru-signed-in a { color: var(--ru-terracotta); text-decoration: none; }
.ru-status-pill--approved {
  border: 1px solid var(--ru-clay);
  background: var(--ru-blush);
  color: #7A3F22;
}

/* ---- Real photography (replaces .ru-img-slot once an image lands) ---- */
.ru-real-img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ru-radius-inner);
  background: var(--ru-stone);
  display: block;
  width: 100%;
}
.ru-real-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ru-real-img--flush { border-radius: 0; }

/* ---- Homepage treatment folds (desktop only) ----
   The three category screens pin in place and the next one scrolls up over
   them, so they stack rather than sliding past as separate screens.
   Mobile keeps ordinary stacking — no pinning, no snap. */
@media (min-width: 1025px) {
  .ru-fold {
    position: sticky;
    top: 0;
  }
  .ru-fold-1 { z-index: 1; }
  .ru-fold-2 { z-index: 2; }
  .ru-fold-3 { z-index: 3; }
  /* the wrapper bounds the sticky sequence: each fold pins within it and
     releases at its end, so nothing bleeds into the sections below */
  .ru-fold-wrap { position: relative; }
}

/* ---- Clinical governance: four trust cards + named-reviewer banner ----
   Structure per the PillSuite reference; palette is Re Up Health's own. */
.ru-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.ru-trust-card {
  background: var(--ru-card-cream);
  border: 1px solid var(--ru-border);
  border-radius: var(--ru-radius-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ru-trust-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ru-oat);
  color: var(--ru-terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ru-trust-card__icon svg { width: 21px; height: 21px; }
.ru-trust-card__title {
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
  margin: 0;
}
.ru-trust-card__body {
  font-family: var(--ru-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ru-body-soft);
  margin: 0;
}
.ru-governance {
  margin-top: 22px;
  background: var(--ru-sand);
  border: 1px solid var(--ru-border);
  border-left: 3px solid var(--ru-clay);
  border-radius: var(--ru-radius-inner);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ru-governance__label {
  font-family: var(--ru-font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ru-terracotta);
}
.ru-governance__text {
  margin: 0;
  font-family: var(--ru-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ru-ink);
}
.ru-governance__text strong { font-weight: 500; }
@media (max-width: 1024px) {
  .ru-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ru-trust-grid { grid-template-columns: 1fr; }
}

/* ---- Inner header: bring the bar back to its design height ----
   It was rendering 115px because the CTA button carried its full page
   padding (54px tall) and both the container and its inner wrapper added
   10px top and bottom on top of the header's own 10px. */
.ru-header-inner .e-con-inner { padding-top: 0; padding-bottom: 0; }
.ru-header-inner .elementor-widget-button .elementor-button {
  padding: 11px 22px;
  font-size: 15px;
}
.ru-header-inner .ru-header-3col > .e-con-inner > * { padding-top: 0; padding-bottom: 0; }
.ru-header-inner > .e-con-inner,
.ru-header-inner { padding-top: 8px; padding-bottom: 8px; }
.ru-header-inner .ru-account-link { padding-top: 8px; padding-bottom: 8px; }

/* ---- Accordions: bring the type back onto the body scale ----
   19px title read a full step above body copy. */
.ru-faq .elementor-tab-title,
.elementor-accordion .elementor-tab-title {
  font-size: 17px;
  line-height: 1.35;
  padding: 18px 24px;
}
.ru-faq .elementor-tab-content,
.elementor-accordion .elementor-tab-content {
  font-size: 15.5px;
  line-height: 1.6;
  padding: 0 24px 20px;
}
.ru-faq .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-icon { font-size: 15px; }

/* ---- Social brand icons ---- */
.ru-social-pill svg { width: 17px; height: 17px; }
.ru-social-pill:hover { border-color: var(--ru-clay); color: var(--ru-clay); }

/* CTA repeated through the category sections */
.ru-hero-note--dark { color: var(--ru-body-soft); }
.ru-trust-cta {
  font-family: var(--ru-font-body);
  font-size: 14px;
  color: var(--ru-terracotta);
  text-decoration: none;
  white-space: nowrap;
}
.ru-trust-cta:hover { color: var(--ru-clay-hover); }

/* Article-card placeholder: stone ground, dashed pill, brief beneath */
.ru-img-slot--card {
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}
.ru-img-slot--card .ru-img-slot__brief {
  font-size: 11.5px;
  line-height: 1.45;
  /* Ink, not the body tone: these slots sit on blush and mist, where even
     --ru-body only reaches 4.45:1. This rule is (0,2,0) and was overriding
     the shared .ru-img-slot__brief colour, so it has to be set here too. */
  color: var(--ru-ink);
  max-width: 30ch;
}

/* Consultation landing: our own treatment picker */
.ru-consult-picker .ru-real-img { border-radius: 0; }

/* ---- Accordion titles: style the inner element, not just the wrapper ----
   Elementor renders the question inside <a class="elementor-accordion-title">,
   which was inheriting a heading size (46px) from the kit. Setting the outer
   .elementor-tab-title alone had no visible effect. */
.ru-faq .elementor-tab-title a,
.ru-faq .elementor-accordion-title,
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-accordion-title {
  font-family: var(--ru-font-head);
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--ru-ink);
}

/* Consultation picker (PHP-rendered, stands down when ?treatment= is set) */
.ru-consult-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ru-picker-card { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.ru-picker-card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ru-picker-card__title {
  font-family: var(--ru-font-head);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ru-ink);
  margin: 0;
}
.ru-picker-card__blurb {
  font-family: var(--ru-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ru-body-soft);
  margin: 0;
}
.ru-picker-card__cta { margin-top: auto; text-align: center; }
@media (max-width: 900px) { .ru-consult-picker { grid-template-columns: 1fr; } }

/* Lifestyle benefit cards — lighter than the clinical cards, no border */
.ru-benefit-card {
  background: var(--ru-sand);
  border-radius: var(--ru-radius-card);
}
.ru-benefit-card h3 { margin: 0; }

/* Benefit cards with an image above the copy.
   overflow:hidden is what lets the flush image sit hard against the card
   edges and still be clipped by the 22px radius — without it the image
   corners square off over the rounded card. */
.ru-benefit-card--img { overflow: hidden; }
.ru-benefit-card--img > .elementor-widget-html { width: 100%; }
.ru-benefit-card__img {
  height: 200px;
  width: 100%;
}
/* The body grows so a row of cards with uneven copy still lines its
   images up along the top edge. */
.ru-benefit-card__body { flex: 1; }
@media (max-width: 767px) {
  .ru-benefit-card__img { height: 170px; }
}

/* Default-submit proxy: must stay rendered (a display:none control is a
   poor default button), but never visible or reachable by tab. */
.ru-implicit-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Plan-length tiers: the saving sits under the term, not beside it */
.ru-plan-pill em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--ru-terracotta);
  margin-top: 2px;
}
.ru-plan-pill--active em { color: var(--ru-cream); opacity: 0.9; }
.ru-plan-note {
  font-family: var(--ru-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ru-body-soft);
  margin: 12px 0 0;
}

/* ---- Trust marquee ----
   Slow and readable rather than a ticker: one pass takes 70s. The track is
   duplicated, so translating by exactly -50% loops seamlessly. */
.ru-marquee { overflow: hidden; }
.ru-marquee__viewport {
  overflow: hidden;
  position: relative;
  /* fade the ends so items enter and leave rather than being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ru-marquee__track {
  display: flex;
  width: max-content;
  animation: ru-marquee 70s linear infinite;
}
.ru-marquee__set {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  flex: none;
}
.ru-marquee__set .ru-trust-item { white-space: nowrap; }
.ru-marquee:hover .ru-marquee__track,
.ru-marquee:focus-within .ru-marquee__track { animation-play-state: paused; }
@keyframes ru-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* A permanently moving band is an accessibility problem on a health site:
   hold it still and let it wrap for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ru-marquee__track { animation: none; width: 100%; }
  .ru-marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .ru-marquee__set[aria-hidden="true"] { display: none; }
  .ru-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---- "How it works": connecting arrows + scroll reveal ----
   Understated by design: a short rise and fade as each card arrives, and a
   quiet chevron between them on desktop. Both are decoration — the cards are
   fully visible if the script never runs (see .no-js fallback below). */
.ru-steps { position: relative; }
/* Hidden only while JS is driving the reveal (see site.js adding .ru-js),
   so a script failure leaves the cards plainly visible rather than blank. */
.ru-js .ru-step-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.ru-js .ru-step-card.is-in { opacity: 1; transform: none; }

/* the chevron sits in the gap between cards, never over them */
@media (min-width: 1025px) {
  .ru-steps .ru-step-card { position: relative; }
  .ru-steps .ru-step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--ru-border-strong);
    border-right: 1.5px solid var(--ru-border-strong);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease 0.35s;
  }
  .ru-steps .ru-step-card.is-in:not(:last-child)::after {
    opacity: 1;
    animation: ru-nudge 3.4s ease-in-out infinite;
  }
}
@keyframes ru-nudge {
  0%, 100% { transform: translateY(-50%) rotate(45deg) translate3d(0, 0, 0); }
  50%      { transform: translateY(-50%) rotate(45deg) translate3d(2.5px, -2.5px, 0); }
}

/* ---- Step cards: background image revealed on hover ----
   Deliberately NOT overflow:hidden on the card itself — the chevron between
   cards is a ::after at right:-17px and clipping the card would eat it. The
   layer clips itself instead, matching the card radius. */
.ru-step-card { position: relative; }
/* :not() matters — without it this rule (0,2,0) out-specifies the layer's own
   position:absolute (0,1,0) and the background drops back into flow. */
.ru-step-card > .elementor-element:not(.ru-step-bg-layer) { position: relative; }
.ru-step-card > .ru-step-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--ru-radius-card);
  overflow: hidden;
}
.ru-step-bg {
  position: absolute;
  inset: 0;
  display: block;
  /* Set --ru-step-bg to url(...) per card once the real images land, and drop
     the --pending modifier along with the pill and brief inside it. */
  background-image: var(--ru-step-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
/* Until there is a real image, the layer shows the placeholder ground so the
   reveal is visibly working and the brief can be read in place. */
.ru-step-bg--pending { background-color: var(--ru-stone); }
/* Top-right, clear of the step number and the heading. Nothing else is drawn
   over the card — the shot briefs live in .ru-step-briefs under the row, so
   the hover never covers the copy it sits behind. */
.ru-step-bg__pill {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1.5px dashed var(--ru-dashed);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: var(--ru-font-body);
  font-size: 11px;
  color: var(--ru-muted);
  background: rgba(250, 248, 255, 0.8);
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Hover only where hover is real: on touch there is no hover state to leave,
   and a card stuck at 14% would just look like a rendering fault. */
@media (hover: hover) {
  .ru-step-card:hover .ru-step-bg { opacity: 0.14; }
  .ru-step-card:hover .ru-step-bg--pending { opacity: 0.5; }
  .ru-step-card:hover .ru-step-bg__pill { opacity: 1; }
}

/* Pending shot briefs for the hover backgrounds. Temporary — remove with the
   --pending modifier once the images are placed. */
.ru-step-briefs { width: 100%; }
.ru-step-briefs ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ru-step-briefs li {
  font-family: var(--ru-font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ru-muted);
}
.ru-step-briefs li strong { display: block; color: var(--ru-body-soft); font-weight: 500; }
@media (max-width: 1024px) {
  .ru-step-briefs ul { grid-template-columns: 1fr; gap: 12px; }
}

/* No script, or reduced motion: everything is simply present and still. */
@media (prefers-reduced-motion: reduce) {
  .ru-js .ru-step-card { opacity: 1; transform: none; transition: none; }
  .ru-steps .ru-step-card:not(:last-child)::after { animation: none; opacity: 1; }
  /* The reveal still happens, it just does not animate. */
  .ru-step-bg,
  .ru-step-bg__pill,
  .ru-step-bg__brief { transition: none; }
}

/* GP practice picker ------------------------------------------------------
 * Structure lives in the plugin's stylesheet; this is Re Up's palette over
 * it, scoped to the consultation wrapper like the rest of the flow styling.
 *
 * The two link-style controls are written as element+class so they outrank
 * the kit's `button:hover`, which sets a background and a white text colour
 * and would otherwise swallow them on hover.
 * ---------------------------------------------------------------------- */
.ru-consult-wrap .kod-tc-gp__search,
.ru-consult-wrap .kod-tc-gp__manual-input {
	border: 1px solid var(--ru-border-strong);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--ru-ink);
	font-size: 16px;
}
.ru-consult-wrap .kod-tc-gp__search:focus,
.ru-consult-wrap .kod-tc-gp__manual-input:focus {
	outline: 2px solid var(--ru-clay);
	outline-offset: 1px;
	border-color: var(--ru-clay);
}
.ru-consult-wrap .kod-tc-gp__hint,
.ru-consult-wrap .kod-tc-gp__manual-intro,
.ru-consult-wrap .kod-tc-gp__none,
.ru-consult-wrap .kod-tc-gp__selected-meta { color: var(--ru-body); }
.ru-consult-wrap .kod-tc-gp__results {
	border: 1px solid var(--ru-border-strong);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 10px 28px rgba(31, 16, 51, 0.12);
}
.ru-consult-wrap .kod-tc-gp__result { border-bottom: 1px solid var(--ru-border); }
.ru-consult-wrap .kod-tc-gp__result:hover,
.ru-consult-wrap .kod-tc-gp__result:focus { background: var(--ru-sand); }
.ru-consult-wrap .kod-tc-gp__result strong { color: var(--ru-ink); }
.ru-consult-wrap .kod-tc-gp__result span { color: var(--ru-body); }
.ru-consult-wrap .kod-tc-gp__selected {
	border: 1px solid var(--ru-notice-border);
	background: var(--ru-notice-bg);
	border-radius: 10px;
}
.ru-consult-wrap .kod-tc-gp__selected-name { color: var(--ru-ink); }
.ru-consult-wrap .kod-tc-gp__manual {
	border: 1px solid var(--ru-border);
	background: var(--ru-sand);
	border-radius: 10px;
}
.ru-consult-wrap button.kod-tc-gp__clear,
.ru-consult-wrap button.kod-tc-gp__manual-toggle {
	background: none;
	color: var(--ru-terracotta);
	text-decoration: underline;
	border: 0;
	padding: 0;
}
.ru-consult-wrap button.kod-tc-gp__clear:hover,
.ru-consult-wrap button.kod-tc-gp__manual-toggle:hover,
.ru-consult-wrap button.kod-tc-gp__clear:focus,
.ru-consult-wrap button.kod-tc-gp__manual-toggle:focus {
	background: none;
	color: var(--ru-clay-hover);
}