/* RECP root CSS v4 BETA — Calendar button on the category row.
   Pair with root JS v7 beta calendar button.
   Paste on the BETA ROOT catalog Branding screen only.
   Same rules as root CSS v3. Adds the Calendar / Listings switch next to the category buttons.
   The native Catalog toggle stays hidden. Our button links to /?view=calendar. */
:root {
  --recp-purple: #35175D;
  --recp-purple-deep: #2a1248;
  --recp-purple-soft: #f4f0f7;
  --recp-gold: #c6a15b;
  --recp-ink: #1c1424;
  --recp-muted: #5c5566;
  --recp-line: #e4dce8;
  --recp-paper: #f6f3f8;
}
/* RECP live 1.1. Description text uses the grey page. Do not put a comment before :root. */
html,
body {
  background: var(--recp-paper) !important;
  color: var(--recp-ink);
}
#content,
#home-page,
#main {
  background: transparent;
}
/* Header. Logo stays left. Title is centered in the bar. Account stays right. */
#app-header {
  background: #ffffff !important;
  border-bottom: 4px solid #35175D !important;
  box-shadow: none !important;
  position: relative;
  color: #35175D !important;
}
#app-header .header-branding,
.header-branding {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  min-width: 0;
  float: none;
  min-height: 86px;
}
.header-branding .logo-customized {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}
/* HERE: logo height. Width stays automatic so the mark is not squashed. */
.logo-customized img,
.header-branding .logo-customized img {
  height: 78px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}
.header-branding .logo-customized a,
.header-branding div a {
  height: auto;
  display: block;
  line-height: 0;
}
#recp-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  width: max-content;
  max-width: none;
}
/* HERE: title size */
.recp-banner-title {
  font-family: Lato, Tahoma, Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #35175D !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.recp-banner-tag { display: none; }
#header-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px;
  text-align: right;
  min-height: 86px;
  float: right;
  max-width: 260px !important;
}
#header-menu-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center;
  /* HERE: name column width. A longer name turns into ... instead of covering the title. */
  width: 150px !important;
  max-width: 150px !important;
  min-width: 0 !important;
  flex: 0 0 150px !important;
  gap: 6px;
  height: auto !important;
  overflow: hidden !important;
}
#header-menu-container > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  gap: 0;
}
#header-menu-container a,
#header-menu-container button,
button[data-testid="user-menu"],
.recp-account-link {
  color: var(--recp-purple) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: Lato, Tahoma, Arial, sans-serif !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  display: block !important;
  width: 150px !important;
  max-width: 150px !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: right !important;
  box-sizing: border-box !important;
  cursor: pointer;
}
button[data-testid="user-menu"] span,
button[data-testid="user-menu"] .pendo-ignore {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: right !important;
  color: var(--recp-purple) !important;
  text-decoration: none !important;
}
#cart {
  display: flex !important;
  align-items: center;
  float: none !important;
  margin: 0 !important;
}
#header-menu-container a:hover,
.recp-account-link:hover {
  color: var(--recp-purple-deep) !important;
  text-decoration: underline;
}
.recp-anchor {
  color: #ffffff;
  padding-left: 0.6em;
  font-size: 0.8em;
  font-weight: bold;
  text-decoration: none;
  margin-right: 0.4em;
}
.recp-anchor:hover { color: #ffd700; }
.recp-anchor:last-child { margin-right: 0; }
/* Category row. One line. HERE: button size */
.recp-cat-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  margin: 12px auto 14px;
  max-width: 1170px;
  padding: 0 8px;
}
.recp-category-btn {
  background: #ffffff !important;
  color: #35175D !important;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none !important;
  border: 1px solid var(--recp-line);
  box-shadow: none;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.2;
}
.recp-category-btn:hover,
.recp-category-btn:focus {
  background: var(--recp-purple);
  color: #ffffff;
  border-color: var(--recp-purple);
}
/* Calendar switch. Same pill as the category buttons. Filled when the calendar is open. */
.recp-calendar-btn {
  margin-left: 6px;
}
.recp-calendar-btn.is-on,
.recp-calendar-btn.is-on:hover,
.recp-calendar-btn.is-on:focus {
  background: var(--recp-purple) !important;
  color: #ffffff !important;
  border-color: var(--recp-purple);
}
/* Search. One centered field. The catalog icon and Refine row are what stretched this band. */
#content,
#home-page {
  background: #f0f0f0 !important;
}
#search-form,
.search-form-container,
.search-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.search-form {
  text-align: center !important;
  padding: 14px 0 2px !important;
}
.search-form__actions,
#search-refine-button--refine,
.search-refine-button {
  display: none !important;
}
#search-form .search-box-wrapper,
.search-box-wrapper {
  /* HERE: search field width */
  position: relative !important;
  display: block !important;
  width: 460px !important;
  max-width: calc(100% - 32px);
  margin: 0 auto !important;
  float: none !important;
}
#search,
.search-box-wrapper input,
#search-form input[type="search"],
#search-form input[type="text"] {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #e4dce8 !important;
  border-radius: 999px !important;
  padding: 0 18px 0 44px !important;
  background: #ffffff !important;
  color: var(--recp-ink) !important;
  box-shadow: 0 4px 14px rgba(53, 23, 93, 0.05) !important;
  box-sizing: border-box !important;
}
#search-submit,
.search-box-wrapper button.search-submit {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335175D' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  color: transparent !important;
  box-shadow: none !important;
}
#recpHelpfulTipsLink { display: none !important; }
/* Home only. The category buttons stay. Search stays on /browse pages. */
body.recp-is-home #search-form .search-box-wrapper,
body.recp-is-home form.search-box-wrapper,
body.recp-is-home .search-box-wrapper {
  display: none !important;
}
/* Promo. Same sentence, quieter card. */
.recp-promo-banner {
  max-width: 1100px;
  margin: 8px auto 22px;
  padding: 0 12px;
}
.recp-promo-inner {
  background: #ffffff;
  color: var(--recp-purple);
  border: 1px solid var(--recp-line);
  border-left: 6px solid var(--recp-purple);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(53, 23, 93, 0.06);
}
.recp-promo-top { text-align: center; }
.recp-promo-text {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--recp-purple);
}
.recp-promo-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.recp-promo-btn {
  background: var(--recp-purple);
  color: #ffffff !important;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none !important;
  border: 1px solid var(--recp-purple);
}
.recp-promo-btn:hover {
  background: #ffd700;
  color: var(--recp-purple) !important;
  border-color: #ffd700;
}
/* Home page heading between the 12-hour banner and the course cards. */
h1.recp-trending-title {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  margin: 8px auto 16px !important;
  padding: 0 16px !important;
  /* HERE: trending heading size */
  font-family: Lato, Tahoma, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--recp-purple);
}
/* Home carousel. Arrows sit outside the row so the cards stay the same width as the 4-up grid. */
.recp-trending-wrap {
  position: relative;
  padding: 0 !important;
}
.recp-trending-viewport {
  overflow: hidden !important;
  margin-left: -15px;
  margin-right: -15px;
}
.recp-trending-viewport > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: transform 0.35s ease;
}
.recp-trending-viewport > .row > .col-md-3,
.recp-trending-viewport > .row > .col-sm-6 {
  float: none !important;
  box-sizing: border-box !important;
}
.recp-trend-arrow {
  position: absolute;
  top: 78px;
  z-index: 4;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: var(--recp-purple);
  color: #ffffff;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(53, 23, 93, 0.28);
}
.recp-trend-arrow:hover { background: var(--recp-purple-deep); }
.recp-trend-prev { left: -46px; }
.recp-trend-next { right: -46px; }
/* One card only. The column and the link stay invisible so they do not stack. */
#listings,
#listings .row,
#home-page .row {
  overflow: visible !important;
}
#listings .col-md-3.col-sm-6,
#home-page .col-md-3.col-sm-6,
#listings .product-link,
#home-page .product-link,
.col-md-3.col-sm-6,
.product-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 18px;
  transform: none !important;
}
#listings .product-tile,
#home-page .product-tile,
.product-tile.course-tile {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(28, 20, 36, 0.08) !important;
  margin: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#listings .product-tile:hover,
#home-page .product-tile:hover,
.product-tile.course-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(53, 23, 93, 0.14) !important;
}
.product-tile .product-image,
.product-tile .image-container,
.product-tile .image-wrapper {
  border-radius: 0 !important;
  margin-top: 0;
}
.product-tile .product-name,
.product-link h3,
.product-link .product-name {
  color: var(--recp-ink);
  font-weight: 700;
  line-height: 1.3;
}
/* Course and checkout pages. Keep the thin header line only. No second bar. */
#product-page > #feature,
#product-page > header#feature,
#checkout > #feature,
#feature.feature-region {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#product-page > #feature::before,
#product-page > #feature::after,
#feature::before,
#feature::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: none !important;
}
/* Empty home #feature would stack a second purple bar under the header border. */
#feature:not(:has(.product-bg)),
.feature-region:not(:has(.product-bg)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  background: none !important;
  border: 0 !important;
  overflow: hidden !important;
}
.hero-head,
#product-page h2.hero-head {
  color: var(--recp-purple);
  font-family: Lato, Tahoma, Arial, sans-serif;
}
/* Descriptions. Word paste puts a white highlight on the text. Let the grey page show through. */
#description,
#description * {
  background: transparent !important;
  background-color: transparent !important;
}
.product-enroll-button a,
a.btn-info,
.btn-info {
  background: var(--recp-purple) !important;
  border-color: var(--recp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.product-enroll-button a:hover,
a.btn-info:hover {
  background: var(--recp-purple-deep) !important;
  border-color: var(--recp-purple-deep) !important;
}
/* Home story cards */
#recp-home-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  max-width: 1100px;
  margin: 28px auto 12px;
  padding: 0 12px;
  justify-content: center;
}
.recp-story-card {
  flex: 1 1 320px;
  background: #ffffff;
  border: 1px solid var(--recp-line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(53, 23, 93, 0.05);
  padding: 28px 26px;
}
.recp-story-card h2 {
  margin: 0 0 14px;
  color: var(--recp-purple);
  font-size: 28px;
  font-family: Lato, Tahoma, Arial, sans-serif;
}
.recp-story-card p,
.recp-story-card li {
  color: var(--recp-ink);
  line-height: 1.55;
  font-size: 16px;
}
.recp-story-card h5 {
  color: var(--recp-purple);
  margin: 18px 0 6px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.recp-story-card a { color: var(--recp-purple); font-weight: 700; }
.recp-story-card ul { margin-top: 16px; padding-left: 18px; }
/* Footer. Same four blocks, darker ground so it reads as a footer. */
.recp-site-footer {
  max-width: 1100px;
  margin: 28px auto 40px !important;
  padding: 26px 28px !important;
  background: var(--recp-purple-deep) !important;
  color: #ffffff !important;
  border-radius: 16px;
  box-sizing: border-box;
}
.recp-foot-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.9fr 0.7fr 1.25fr;
  gap: 20px 22px;
  align-items: start;
}
.recp-foot-grid h4 {
  color: #ffd700;
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.recp-foot-grid p,
.recp-foot-grid li,
.recp-foot-grid a {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
}
.recp-foot-grid ul {
  margin: 0;
  padding-left: 18px;
}
.recp-foot-grid a:hover { color: #ffd700; }
.recp-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.recp-social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  align-items: center;
  justify-content: center;
}
.recp-social svg { display: block; }
/* Old layout helpers still used by the footer markup */
.sf_colsIn { display: block; }
.sf_colsOut {
  display: inline-block;
  vertical-align: top;
  min-width: 24%;
}
.recp_cover {
  background: #ffffff;
  padding: 1.6em 2em;
  font-size: 1.35em;
  border-radius: 8px;
  margin-bottom: 2em;
}
.recp_center-block { margin: auto; width: 50%; text-align: left; }
.recp_step-block { display: inline-block; width: 30%; }
.recp_center-block h2 { font-weight: bold; font-size: 1.52em; text-align: center; }
.recp_center-block h6 { color: #2c5aa0; text-align: center; }
.recp_step-block h5 { color: #2c5aa0; }
.product_heading h2 { text-wrap: balance; }
#recpinsert {
  border-radius: 12px;
  border: 1px solid var(--recp-line) !important;
  box-shadow: 0 18px 50px rgba(28, 20, 36, 0.18);
}
/* Hide catalog page titles before they can paint.
   "Listings" is an h1 in #main-heading. "Browse Listings" is an h2 in #listings. */
#main-heading,
#main-heading h1,
#listings > h1,
#listings > h2,
#listings h1,
#listings h2[data-cid="Heading"],
.recp-native-heading {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
@media screen and (min-width: 769px) {
  #recppaymentwarningdiv { width: 50em; margin: auto; color: #c0392b; }
  #recppaymentwarningx700img { display: inline-block; }
  #recppaymentwarningx400img { display: none; }
}
@media screen and (max-width: 1280px) {
  .recp-banner-title { font-size: 30px; }
}
@media screen and (max-width: 768px) {
  #app-header .container,
  #app-header .row {
    display: block;
  }
  .recp-banner-title { font-size: 22px; white-space: normal; }
  h1.recp-trending-title { font-size: 26px; }
  .recp-cat-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .recp-foot-grid { grid-template-columns: 1fr 1fr; }
  #recp-home-cards { margin-left: 12px; margin-right: 12px; }
  .recp-site-footer { margin-left: 12px !important; margin-right: 12px !important; }
  #recppaymentwarningdiv { width: 100%; margin: auto; color: #c0392b; padding: 0 12px; }
  #recppaymentwarningx700img { display: none; }
  #recppaymentwarningx400img { display: inline-block; max-width: 100%; }
  .recp-promo-text { font-size: 17px; }
  .recp-promo-btn { min-width: 140px; text-align: center; }
}
/* HERE: sign-up logo. Hidden first so the RECP image cannot flash. The root script shows it again on the RECP form only. */
.registration-logo {
  display: none !important;
}

/* Full calendar. Catalog's native schedule only sees the homepage feed, so it is hidden. */
.recp-is-calendar #listings,
.recp-is-calendar [data-customizationid="calendar-widget-section"],
.recp-is-calendar [data-customizationid="calendar-section"],
.recp-is-calendar [data-calendar-widget],
.recp-is-calendar [aria-label="Filter schedule by start date"],
.recp-is-calendar [data-testid="schedule-card-price"] {
  display: none !important;
}
.recp-is-calendar [data-testid="schedule-card-price"] {
  display: none !important;
}
#recp-full-calendar {
  max-width: 1080px;
  margin: 8px auto 48px;
  padding: 0 16px;
}
.recp-cal-loading,
.recp-cal-empty {
  color: var(--recp-muted);
  font-size: 16px;
  padding: 18px 0;
}
.recp-cal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.recp-cal-kicker {
  margin: 0 0 4px;
  color: var(--recp-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#recp-full-calendar h2 {
  margin: 0;
  color: var(--recp-purple);
  font-size: 32px;
  line-height: 1.1;
}
.recp-cal-head p,
.recp-cal-anytime > p {
  margin: 6px 0 0;
  color: var(--recp-muted);
}
.recp-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recp-cal-nav strong {
  min-width: 160px;
  text-align: center;
  color: var(--recp-ink);
  font-size: 16px;
}
.recp-cal-nav button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--recp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--recp-purple);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.recp-cal-nav button:hover { background: var(--recp-purple-soft); }
.recp-cal-day { margin: 0 0 22px; }
.recp-cal-day h3,
.recp-cal-anytime h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--recp-ink);
  font-size: 18px;
}
.recp-cal-day h3 span,
.recp-cal-anytime h2 span {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--recp-purple);
  color: #fff;
  font-size: 12px;
}
.recp-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.recp-cal-day .recp-cal-card { margin-top: 10px; }
.recp-cal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--recp-line);
  border-radius: 14px;
  background: #fff;
  color: var(--recp-ink);
  text-decoration: none;
}
.recp-cal-card:hover {
  border-color: var(--recp-purple);
  box-shadow: 0 10px 24px rgba(53, 23, 93, 0.08);
}
.recp-cal-kind {
  color: var(--recp-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.recp-cal-title {
  color: var(--recp-purple);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.recp-cal-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--recp-muted);
  font-size: 13px;
}
.recp-cal-anytime {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--recp-line);
}
@media screen and (max-width: 768px) {
  #recp-full-calendar h2 { font-size: 26px; }
  .recp-cal-head { align-items: flex-start; flex-direction: column; }
  .recp-cal-grid { grid-template-columns: 1fr; }
}

.recp-cal-letter { margin: 18px 0 8px; }
.recp-cal-letter h3 {
  margin: 0 0 8px;
  color: var(--recp-purple);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.recp-cal-letter h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--recp-gold);
}

.recp-cal-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--recp-gold);
  color: #1c1424;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  vertical-align: 1px;
}
.recp-calendar-btn:hover .recp-cal-new,
.recp-calendar-btn:focus .recp-cal-new {
  background: #ffffff;
  color: var(--recp-purple);
}