/* ============================================================
   STYLE-OVERRIDES BASE — universal SBX-conflict rules.

   This file is the starting point for every new template's
   style-overrides.css. Copy it as-is into
   Generated/<slug>/css/style-overrides.css, then APPEND any
   site-specific rules below the "(B) SITE-SPECIFIC RULES"
   section.

   Every rule below has been observed to be necessary on at
   least one prior template build. The catalog grew across:
     - US Ski & Snowboard (Drupal)
     - Melanoma Research Alliance (Webflow)
     - Think Together (WordPress)

   When a new universal bug is caught in a build, add it HERE
   so the next template inherits it for free. Site-specific
   rules don't belong in this file — they go in the per-template
   section (B).
   ============================================================ */

/* ====================  (A) UNIVERSAL SBX RULES  ==================== */

/* 1. SBX bullet-PNGs on nav menus.
      soapboxTypography.min.css applies:
        ul li { padding: 0.3em 0 0.5em 30px;
                background: url(bullet-default.png) 18px 0.8em no-repeat; }
      CRITICAL: only set `background-image: none`, NOT `background: none`
      — the shorthand wipes background-color and makes button-style
      nav items (e.g. .btn-donate orange buttons) invisible. */
header ul li,
.header ul li,
.header-wrapper ul li,
.header-navigation ul li,
.navbar ul li,
.navbar-nav li,
nav ul li,
footer ul li,
.footer ul li,
.footer-wrapper ul li,
.footer-menu li {
  background-image: none !important;
  padding-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  line-height: inherit;
}

/* 2. Soapbox Secure Payment area: blend with page background. */
#donate-billing,
.section-billing,
.item-paymentsection {
  background: transparent !important;
  background-color: transparent !important;
}
.billing-list li.border-top,
.compList-payment li.border-top,
.section-billing .billing-list li,
.section-billing .compList-payment li,
.item-paymentsection li {
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}

/* 3. Soapbox reCAPTCHA wrapper: remove the 1px solid border + padding. */
#contactCaptcha-wrap,
.compCaptcha-wrap,
.contactCaptcha {
  border: 0 none !important;
  padding: 0 !important;
}

/* 4. Soapbox outline sections (tribute/dedication, etc.) — drop dotted borders. */
.item-outlinesection,
#donate-dedication,
.section-dedication {
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}

/* 4b. SBX bootstrap.min.css adds
        a:hover, a:focus { color: #005580; text-decoration: underline }
      to EVERY anchor on hover. Source themes don't expect this on nav
      links. Suppress for header/footer scopes. */
.header a:hover, .header a:focus,
.header-wrapper a:hover, .header-wrapper a:focus,
.header-navigation a:hover, .header-navigation a:focus,
.footer a:hover, .footer a:focus,
.footer-wrapper a:hover, .footer-wrapper a:focus,
header a:hover, header a:focus,
footer a:hover, footer a:focus,
nav a:hover, nav a:focus,
.navbar-nav a:hover, .navbar-nav a:focus,
.footer-link:hover, .footer-link:focus {
  text-decoration: none !important;
}

/* 5. SBX core sets @media (max-width: 767px) { body { padding: 0 20px } }
      on mobile via bootstrap-responsive.min.css. This 20px horizontal
      padding constrains the body content-box, so footers can't extend
      edge-to-edge (visible white strips on each side of full-bleed
      backgrounds), and mobile menu items get pushed in or overflow. */
@media (max-width: 767px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 6. SBX bootstrap.min.css applies `.dropdown-menu > li > a:hover,
      .dropdown-menu > li > a:focus { background-color: #0081c2;
      background-image: linear-gradient(...) }` — Bootstrap 2's classic
      blue gradient on dropdown-item highlight. On the footer those
      <a>s are just plain footer links — the blue rectangle on
      focus/hover is wrong. Suppress for footer scopes. */
.footer .dropdown-menu > li > a:hover,
.footer .dropdown-menu > li > a:focus,
.footer .dropdown-menu li a:hover,
.footer .dropdown-menu li a:focus,
.footer-wrapper .dropdown-menu > li > a:hover,
.footer-wrapper .dropdown-menu > li > a:focus,
.footer-menu .dropdown-menu > li > a:hover,
.footer-menu .dropdown-menu > li > a:focus {
  background-color: transparent !important;
  background-image: none !important;
}

/* 7. SBX bootstrap.min.css sets `.dropdown-menu > li > a { white-space:
      nowrap }` (Bootstrap 2's dropdown-item rule). On WordPress footers
      this prevents long submenu link labels from wrapping, expanding
      parent <li> to fit unwrappable content — which overflows the
      column-item and causes adjacent columns (e.g. Newsletter) to
      wrap below. Force wrap on footer dropdown links. */
.footer .footer-menu .dropdown-menu > li > a,
.footer .footer-menu .dropdown-menu li a,
.footer .footer-menu .sub-menu li a,
.footer-wrapper .dropdown-menu li a {
  white-space: normal !important;
}

/* 8. SBX bootstrap.min.css applies `.dropdown-menu { background-color:
      #fff; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;
      box-shadow: rgba(0,0,0,0.2) 0 5px 10px }` to .dropdown-menu —
      making footer submenus look like floating tooltip cards with
      shadows. Suppress for footer scopes. */
.footer .footer-menu .dropdown-menu,
.footer-menu .menu-item-has-children .dropdown-menu,
.footer-menu .menu-item-has-children > ul,
.footer-menu .menu-item-has-children .sub-menu,
.footer-wrapper .dropdown-menu {
  background-color: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* 9. Flex-min-width gotcha: WordPress footers use flex layouts where
      a column's content (e.g. long submenu link text) can have a
      min-content width greater than the column's flex-basis. The
      default `min-width: auto` prevents flex-shrink from shrinking
      the column to its flex-basis, causing siblings to overflow or
      wrap. Force min-width: 0 on common footer flex containers. */
.footer .footer-top .container-column .column-item,
.footer .footer-top .flex-footer .column-item,
.footer .footer-menu,
.footer .footer-menu ul.menu-footer {
  min-width: 0 !important;
}

/* 10. Mobile-menu item indicators (chevron-down) are often JS-injected
       at narrow viewports by WordPress theme JS (bootstrap-navwalker
       or similar). When the source HTML is captured at desktop width,
       these <button class="dropdown-btn"> elements aren't in the DOM.
       Replicate the chevron visual via CSS ::after on
       .menu-item-has-children > a at mobile widths. */
@media (max-width: 1199px) {
  .menu-item-has-children > a {
    position: relative;
  }
  .menu-item-has-children > a:not(.dropdown-item):not(.sub-menu-link)::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s;
    pointer-events: none;
    opacity: 0.6;
  }
}

/* 11. Donation page frequency toggle (One Time / Monthly).
       SBX donation forms render frequency as radio inputs inside a
       <ul class="donation-list compList">. By default they look like
       a vertical list of labeled radios. The polished SBX look — used
       on annunciationmsp.secure.nonprofitsoapbox.com/school-donate and
       most well-styled donation pages — turns them into a horizontal
       toggle with two adjacent pill buttons.

       Recipe: hide the radio input, style the label as a full-width
       button half, color it differently when its sibling radio is
       :checked.

       The selected-state color is configurable per template via the
       --donation-toggle-active-bg CSS variable below; default is a
       brand-neutral blue. Override per-template in section (B). */
:root {
  --donation-toggle-active-bg: rgb(75, 159, 208);    /* default sky-blue */
  --donation-toggle-active-color: rgb(255, 255, 255);
  --donation-toggle-inactive-bg: rgb(245, 245, 245);
  --donation-toggle-inactive-color: rgb(102, 102, 102);
}

.section-donation ul.compList li.pad-notop div.cntr {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block {
  width: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input.radio {
  display: none;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  background-color: var(--donation-toggle-inactive-bg);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
  background-repeat: repeat-x;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 3px;
  color: var(--donation-toggle-inactive-color);
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block:first-child label.choice {
  border-radius: 4px 0 0 4px;
  border-right-width: 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block:last-child label.choice {
  border-radius: 0 4px 4px 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input.radio:checked + label.choice {
  background-color: var(--donation-toggle-active-bg);
  background-image: linear-gradient(var(--donation-toggle-active-bg), var(--donation-toggle-active-bg));
  color: var(--donation-toggle-active-color);
  border-color: var(--donation-toggle-active-bg);
}

/* 12. Donation amount pills ($100, $200, etc.) — the row of clickable
       suggested-amount buttons. SBX renders these as
       <button class="btn btn-amount amts"> and base styling comes from
       soapbox-bootstrap.min.css. The polished look adds a subtle gray
       gradient and shadow + a brand-color "selected" state.

       Like the toggle above, the selected-state color is configurable
       via --donation-amount-active-bg. Defaults to brand-neutral. */
:root {
  --donation-amount-active-bg: rgb(75, 159, 208);
  --donation-amount-active-color: rgb(255, 255, 255);
  --donation-amount-inactive-bg: rgb(245, 245, 245);
  --donation-amount-inactive-color: rgb(51, 51, 51);
}

.btn.btn-amount.amts,
.amount-group .btn-amount,
.donate-amount-group-onetime .btn-amount,
.donate-amount-group-recurring .btn-amount {
  background-color: var(--donation-amount-inactive-bg);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
  background-repeat: repeat-x;
  color: var(--donation-amount-inactive-color);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 9px 14px;
  min-width: 97px;
  font-size: 16px;
  line-height: normal;
  margin-bottom: 15px;
  margin-right: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.05s;
}
.btn.btn-amount.amts:hover,
.amount-group .btn-amount:hover {
  background-image: linear-gradient(rgb(248, 248, 248), rgb(220, 220, 220));
}
.btn.btn-amount.amts:active,
.amount-group .btn-amount:active {
  transform: translateY(1px);
}
.btn.btn-amount.amts.active,
.btn.btn-amount.amts.selected,
.amount-group .btn-amount.active,
.amount-group .btn-amount.selected {
  background-color: var(--donation-amount-active-bg) !important;
  background-image: linear-gradient(var(--donation-amount-active-bg), var(--donation-amount-active-bg)) !important;
  color: var(--donation-amount-active-color) !important;
  border-color: var(--donation-amount-active-bg) !important;
}

/* 13. Designation pills should match the OTHER buttons on the page.
       SBX core renders the designation chooser as `<button class="pill">`
       and applies a 24px pill-radius + bright Bootstrap blue. That makes
       the designation row visually inconsistent with the rectangular
       amount buttons ($100/$200/$500) above it.
       Make pills match the amount-button shape: 6px radius, 48px
       height, navy-outlined inactive / navy-filled active.
       Per-template: brand-color via --donation-amount-active-bg. */
#content .designation-group .pill,
#content .pills .pill,
.designation-group .pill,
.pills .pill {
  border-radius: 6px !important;
  padding: 14px 28px !important;
  height: 48px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 80px !important;
  margin: 0 6px 8px 0 !important;
  box-sizing: border-box !important;
  background-color: rgb(255, 255, 255) !important;
  background-image: none !important;
  border: 1.5px solid rgb(200, 210, 220) !important;
}
.designation-group .pill.active,
.pills .pill.active {
  background-color: var(--donation-amount-active-bg, rgb(37, 53, 81)) !important;
  background-image: none !important;
  color: var(--donation-amount-active-color, rgb(255, 255, 255)) !important;
  border-color: var(--donation-amount-active-bg, rgb(37, 53, 81)) !important;
}

/* 14. <select> dropdowns must be the same height as text inputs.
       SBX core's bootstrap-2 styling gives selects ~26px height while
       text inputs sit at 38-48px. Visually they look stunted next to
       siblings. Force matching dimensions across all SBX form scopes.
       Also normalize the dropdown caret across browsers since
       appearance:none drops it on every UA. */
#content select,
.item-form select,
form.form-donate select,
select.field,
select.input-large,
select.input-medium,
select.select {
  height: 48px !important;
  line-height: 1.4 !important;
  padding: 12px 40px 12px 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23333' stroke-width='2' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}

/* 14b. EQUALIZE ALL FIELDS TO THE TALLEST (the select, 48px). The reverse of
       #14: many SBX themes render <select> at 48px but text inputs at 36px (some
       at 28px!) with a 0-radius + inset shadow, so a form mixes short flat inputs
       and tall rounded selects (looked broken on ofjcc, 2026-06-24). Force every
       text-like field to the SAME spec as the select: 48px, 6px radius, white,
       no inset shadow, 1px grey border.

       CRITICAL GOTCHA: several SBX inputs have NO `type` attribute (firstname,
       lastname, card_code/Security Code) — they default to text but DON'T match
       `input[type="text"]`. They DO carry `.field`/`.text` classes. You must ALSO
       target those classes (excluding checkbox/radio) and a type-less catch-all,
       or those fields stay short (28px) and misaligned. And the catch-all MUST
       exclude checkbox/radio/submit/button/image or it stretches checkboxes to
       48px and knocks them out of line (see 14b-checkbox below).
       NOTE: only verifiable on the DEPLOYED page — the preview has no form. */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="password"],
#content input[type="url"],
#content input.form-control:not([type="checkbox"]):not([type="radio"]),
#content input.field:not([type="checkbox"]):not([type="radio"]),
#content input.text:not([type="checkbox"]):not([type="radio"]),
#content .input-text,
#content textarea,
#content .item-form input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]),
#content form.form-donate input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]) {
  height: 48px !important;
  min-height: 48px !important;
  border: 1px solid rgb(205, 211, 218) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  -webkit-appearance: none;
}
#content textarea,
.item-form textarea {
  height: auto !important;
  min-height: 96px !important;
}

/* 14b-checkbox. Checkboxes/radios must NOT be inflated by 14b — give them a
       fixed small box and align with their label. (ofjcc: the .field-classed
       checkboxes got stretched to 48px and floated out of line with the label.) */
#content input[type="checkbox"],
#content input[type="radio"] {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 3px 6px 0 0 !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

/* 14c. LAZY-LOADED IMAGES (footer supporter logos, content images). Themes like
       TheGem ship images with class="lazy-loading-item lazy" at
       visibility:hidden and reveal them with lazy-load JS that does NOT run on
       SBX — so the image is in the DOM (complete:true) but invisible. Force
       visible. An <img> existing is NOT proof it renders — check the deployed
       page visually. (ofjcc footer grateful8 supporter-logos, 2026-06-24.) */
.lazy-loading-item,
img.lazy,
.gem-wrapbox-inner.lazy,
.custom-footer .lazy-loading-item,
footer .lazy-loading-item {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 15. Mobile portrait: center the donation amount UI.
       At narrow viewports, the frequency toggle and predefined amount
       buttons currently left-align and overflow. Center them and
       wrap-allow multiple lines. */
@media (max-width: 767px) {
  .donate-amount-group-onetime,
  .donate-amount-group-recurring,
  li.amount-group-notice {
    text-align: center !important;
  }
  .donate-amount-group-onetime .cntr,
  .donate-amount-group-recurring .cntr,
  li.amount-group-notice > .cntr {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .donate-amount-group-onetime .cntr > .span-block,
  .donate-amount-group-recurring .cntr > .span-block {
    flex: 0 0 auto !important;
  }
  .interval-toggle + label.choice,
  label.choice[for*="intervalUnit"] {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
  }
  .amount-group .btn-amount,
  button.btn.btn-amount.amts,
  button.btn-amount {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    margin: 4px !important;
  }
  .input-group {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 4px !important;
  }
  .designation-group .pills,
  .pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .designation-group .pill,
  .pills .pill {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .section-donation .section-header,
  .section-donation .title {
    text-align: center !important;
  }
}

/* 17. UNIFORM ACTION BUTTONS across donation / event-registration /
       form pages. SBX renders action buttons as Bootstrap-2 .btn
       variants with inconsistent default styling: .btn-primary is one
       color, secondary .btn / .btn-small (e.g. "Apply Code") render as a
       different-colored outline. Most brand sites use ONE button style
       everywhere. Re-skin them all to a single system driven by the
       --btn-* variables — set these four in your (B) section to the
       site's CTA spec (inspect a real CTA on the live site for the exact
       bg / radius / padding; many modern nonprofit sites use a fully-
       rounded pill, e.g. border-radius: 50px).

       CRITICAL: exclude .btn-amount (donation amount pills) and
       .btn-frequency — those are SELECTABLE (active/inactive) and get
       their styling from rules #11-12. Without the :not() guards this
       rule paints every amount pill solid, destroying the selected-state
       affordance. */
:root {
  --btn-bg: rgb(37, 53, 81);            /* brand CTA color — OVERRIDE in (B) */
  --btn-bg-hover: rgb(28, 40, 62);      /* darker hover — OVERRIDE in (B) */
  --btn-color: #ffffff;
  --btn-radius: 50px;                   /* pill by default; set 4px for square */
  --btn-padding: 15px 40px;
  --btn-weight: 600;
  --btn-font-size: 15px;
}
#content .btn:not(.btn-amount):not(.btn-frequency),
#content .btn-primary:not(.btn-amount),
#content .btn-large:not(.btn-amount),
#content .btn-small:not(.btn-amount),
#content button[type="submit"],
#content input[type="submit"],
#content input[type="button"]:not(.btn-amount),
#content a.btn:not(.btn-amount),
.region-content .btn:not(.btn-amount):not(.btn-frequency),
.region-content .btn-primary:not(.btn-amount),
.region-content button[type="submit"],
.region-content input[type="submit"],
.region-content a.btn:not(.btn-amount) {
  background: var(--btn-bg) !important;
  background-color: var(--btn-bg) !important;
  background-image: none !important;
  border: 0 none !important;
  color: var(--btn-color) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  font-weight: var(--btn-weight) !important;
  font-size: var(--btn-font-size) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  transition: background-color 0.2s ease !important;
}
#content .btn:not(.btn-amount):not(.btn-frequency):hover,
#content .btn-primary:not(.btn-amount):hover,
#content button[type="submit"]:hover,
#content input[type="submit"]:hover,
#content a.btn:not(.btn-amount):hover,
.region-content .btn:not(.btn-amount):not(.btn-frequency):hover,
.region-content button[type="submit"]:hover,
.region-content input[type="submit"]:hover,
.region-content a.btn:not(.btn-amount):hover {
  background: var(--btn-bg-hover) !important;
  background-color: var(--btn-bg-hover) !important;
  /* Do NOT zero the border here. This rule carries two :not() pseudo-classes,
     so it outranks almost every later per-component hover rule — `border: 0
     none` silently stripped the blue outline from Donate / Share / Donate Now
     on hover, and a later `border-color` alone could not restore a zero-width
     border. Keep the button's own 2px border and just recolour it. */
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--btn-border-hover, #2D5798) !important;
  /* --btn-color is WHITE (the filled-state text colour). On hover the fill
     goes white too, so reusing it here rendered white-on-white. The hover
     text must be the brand colour. */
  color: var(--btn-color-hover, #2D5798) !important;
  text-decoration: none !important;
}
#content .btn-small:not(.btn-amount),
.region-content .btn-small:not(.btn-amount) {
  padding: 10px 26px !important;
  font-size: 14px !important;
}

/* 18. EVENT TICKETS TABLE (.tickets-tbl / .resultsTBL). SBX core draws a
       1px grey border on every <th> plus a faint grey cell background,
       producing a boxed-grid look that clashes with clean modern
       designs. Strip the header-cell borders + cell shading; keep one
       subtle header rule and a light divider between ticket rows. */
#content table.tickets-tbl, #content table.resultsTBL,
.region-content table.tickets-tbl, .region-content table.resultsTBL {
  border: 0 none !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
#content table.tickets-tbl th, #content table.resultsTBL th,
.region-content table.tickets-tbl th, .region-content table.resultsTBL th {
  border: 0 none !important;
  border-bottom: 2px solid #e2e2e2 !important;
  background: transparent !important;
  padding: 10px 8px !important;
}
#content table.tickets-tbl td, #content table.resultsTBL td,
.region-content table.tickets-tbl td, .region-content table.resultsTBL td {
  border: 0 none !important;
  background: transparent !important;
  padding: 14px 8px !important;
  vertical-align: middle !important;
}
#content table.tickets-tbl tbody tr, #content table.resultsTBL tbody tr,
.region-content table.tickets-tbl tbody tr, .region-content table.resultsTBL tbody tr {
  border-bottom: 1px solid #eef0f2 !important;
}

/* 19. SELECT BEVEL-BORDER fix. Beyond the height/caret normalization in
       #14, SBX gives selects an uneven 3D bevel border (dark top, light
       bottom — e.g. border-top #7c7c7c, border-bottom #ddd) that reads as
       broken. Flatten to one clean 1px border + rounded corners. */
#content select, #content .field.select,
.region-content select, .region-content .field.select {
  border: 1px solid #cdd3da !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* 20. EVENT-REGISTRATION page fine-tuning (/component/events/event/rsvp/N).
       The default SBX event form has several rough edges that every
       event-enabled template hits. All reusable; brand-specific colors
       come from --btn-* (buttons) and the two --event-* vars below. */
:root {
  --event-panel-bg: #f4f7f9;          /* selected-attendee panel tint  */
  --event-panel-border: #d7dde3;      /* OVERRIDE in (B) to brand secondary */
}

/* 20a. Qty dropdown — SBX's .ticNumIn select is only ~52px wide, and the
        right-pad we add for the caret (#14/#19) clips the selected
        number so it's invisible once chosen (single AND double digit).
        Widen + reduce right-pad. Longhand padding + extra-class
        specificity so it beats the generic select rule. */
#content select.field.select.ticNumIn,
#content select.ticNumIn,
.region-content select.field.select.ticNumIn,
.region-content select.ticNumIn {
  width: auto !important;
  min-width: 72px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 12px !important;
  padding-right: 26px !important;
  text-align: left !important;
  text-indent: 0 !important;
  background-position: right 9px center !important;
}

/* 20b. Selected-attendee panel (.well.well-form) — SBX ships it pale-blue
        with a blue border. Re-skin to neutral brand tint. */
#content .well.well-form,
.region-content .well.well-form {
  background-color: var(--event-panel-bg) !important;
  background-image: none !important;
  border: 1px solid var(--event-panel-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* 20c. Compact secondary buttons — "Copy Contact Info", "Remove" (the
        .btn-mini attendee actions) and "Apply Code" (.btn-small) must be
        ~half the size of the primary CTA, not full pills. The generic
        button rule (#17) matches these as
        `#content .btn:not(.btn-amount):not(.btn-frequency)`; to win we
        must MATCH that specificity, hence the .btn + dual :not() here. */
#content .btn.btn-mini:not(.btn-amount):not(.btn-frequency),
#content .btn.copy-attendee:not(.btn-amount):not(.btn-frequency),
#content .btn.remove-attendee:not(.btn-amount):not(.btn-frequency),
#content .btn.btn-small:not(.btn-amount):not(.btn-frequency),
.region-content .btn.btn-mini:not(.btn-amount):not(.btn-frequency),
.region-content .btn.copy-attendee:not(.btn-amount):not(.btn-frequency),
.region-content .btn.remove-attendee:not(.btn-amount):not(.btn-frequency),
.region-content .btn.btn-small:not(.btn-amount):not(.btn-frequency) {
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

/* 20d. Promo-code input — SBX renders it ~736px wide. Constrain to ~20ch
        and add space beneath so Apply Code isn't crammed against it. */
#content input[name="promo_code"],
#content .form-promocode input.field.text,
.region-content input[name="promo_code"],
.region-content .form-promocode input.field.text {
  width: 20ch !important;
  max-width: 100% !important;
  display: block !important;
  margin-bottom: 14px !important;
  border: 1px solid #cdd3da !important;
  border-radius: 6px !important;
}
#content .form-promocode,
.region-content .form-promocode {
  display: block !important;
}

/* 20e. "Your Total:" box — SBX draws a 1px grey border around the total
        cell. Remove it so the total reads as clean text. */
#content table.tickets-total-tbl,
#content table.tickets-total-tbl td,
#content table.tickets-total-tbl tr,
#content .foot-total, #content .foot-total td,
.region-content table.tickets-total-tbl,
.region-content table.tickets-total-tbl td,
.region-content table.tickets-total-tbl tr,
.region-content .foot-total, .region-content .foot-total td {
  border: 0 none !important;
  background: transparent !important;
}

/* 20f. "Add a Donation" section (.foot-donation) — when an Events-app
        event enables the optional add-a-donation prompt, SBX renders a
        clearfix row with the label + description (.left:
        #form-donation-title + #form-donation-desc) floated far-left and
        the donation input (.right > #form-donation-input) floated
        far-right — leaving them visually disconnected across the row.
        Pull them together: right-align the label/description and sit it
        directly to the LEFT of the input as one unit.

        The LABEL TEXT VARIES per account ("Add a Donation", "Make a
        Gift", etc.) and the whole section may be ABSENT (no donation
        enabled, or non-Events templates) — so we target only the stable
        structural classes; the rule no-ops when the section isn't there.
        Mobile: stack the label above a full-width input instead of
        cramming them side by side. */
#content .foot-donation,
.region-content .foot-donation {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
}
#content .foot-donation > .left,
.region-content .foot-donation > .left {
  float: none !important;
  text-align: right !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}
#content .foot-donation > .right,
.region-content .foot-donation > .right {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#content .foot-donation > .clear,
.region-content .foot-donation > .clear {
  display: none !important;
}
@media (max-width: 767px) {
  #content .foot-donation,
  .region-content .foot-donation {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  #content .foot-donation > .left,
  .region-content .foot-donation > .left {
    text-align: left !important;
    flex: 1 1 100% !important;
    margin-bottom: 8px !important;
  }
  #content .foot-donation > .right,
  .region-content .foot-donation > .right {
    flex: 1 1 100% !important;
  }
  #content .foot-donation > .right #form-donation-input,
  .region-content .foot-donation > .right #form-donation-input {
    width: 100% !important;
  }
  #content .foot-donation > .right input,
  .region-content .foot-donation > .right input {
    width: 100% !important;
    max-width: 240px !important;
  }
}

/* 20g. Footer order-summary column. The event ticket footer holds three
        sibling blocks inside .resultsTBL-foot.clearfix, in source order:
          1. .foot-donation        (Add a Donation — optional)
          2. .left.foot-promocode  (Enter Promo Code + Apply Code — optional)
          3. .right.foot-total      (Your Total)
        SBX core floats .left blocks left and .right blocks right, so the
        promo code lands ORPHANED on the far left while donation/total sit
        right. Stack all three into ONE right-aligned column (donation,
        then promo, then total) so they read as a single order-summary
        panel — the modern checkout convention. All blocks are optional
        and labels vary per account, so we target ONLY structural classes;
        the rule no-ops when a block is absent. Pairs with #20f. */
#content .resultsTBL-foot.clearfix,
.region-content .resultsTBL-foot.clearfix {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;          /* right-align the column */
  gap: 20px !important;
  width: 100% !important;
}
/* Neutralize SBX's float on the promo + total wrappers (they carry the
   generic .left / .right classes that SBX floats). Scoped under
   .resultsTBL-foot so .left/.right elsewhere on the page are untouched. */
#content .resultsTBL-foot .foot-promocode,
#content .resultsTBL-foot .foot-total,
.region-content .resultsTBL-foot .foot-promocode,
.region-content .resultsTBL-foot .foot-total {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
}
#content .resultsTBL-foot .foot-promocode,
.region-content .resultsTBL-foot .foot-promocode {
  text-align: right !important;
}
@media (max-width: 767px) {
  #content .resultsTBL-foot.clearfix,
  .region-content .resultsTBL-foot.clearfix {
    align-items: stretch !important;         /* left-align, full width */
    gap: 16px !important;
  }
  #content .resultsTBL-foot .foot-promocode,
  .region-content .resultsTBL-foot .foot-promocode {
    text-align: left !important;
  }
}

/* 21. ACTIONS APP pages (advocacy / contact-your-rep, e.g.
       /component/actions/... — two screens: a Target Search address form,
       then a "Who You're Contacting / What You're Saying / Contact
       Information" letter form after submitting). The default SBX Actions
       markup has several rough edges; fix them all (verified on ICL's
       /public-lands-public-hands). All structural-class selectors — no-op
       when the page isn't an Action. TEST BOTH SCREENS: submit a real
       address (e.g. "300 Brannan St, San Francisco, California, 94107")
       to reach screen 2.

   21a. Fieldset wrapper boxes. EVERY Actions fieldset wraps its fields in
        a `.action-<name>-fs.clearfix` div with a 1px grey border box —
        .action-targetsearch-fs (Target Search), .action-letter-fs (What
        You're Saying), .action-contact-fs (Contact Information), etc.
        Remove the box on all of them. (NOTE: removing only the inner
        field borders is NOT enough — the visible border is on this
        WRAPPER, not the <input>s.) */
#content [class*="action-"][class*="-fs"],
.region-content [class*="action-"][class*="-fs"] {
  border: 0 none !important;
  padding: 0 !important;
}

/* 21b. CONSISTENT FIELD HEIGHTS. SBX Actions text inputs (.input-text /
        .input-block-level) render at a stunted ~30px because box-sizing +
        12px padding eats the height, while selects/zip sit at ~48px.
        Force ALL Actions inputs to a uniform 48px across both screens. */
#content .input-text,
#content input.input-block-level,
#content .action-targetsearch-fs input[type="text"],
#content .section-action-letter input[type="text"],
#content .section-action-contact input[type="text"],
#content .section-action-contact input[type="email"],
.region-content .input-text,
.region-content input.input-block-level {
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

/* 21c. WHO YOU'RE CONTACTING — the target cards (.action-targets > .target)
        stack one-per-row by default. Lay them out 3-per-row on desktop,
        wrapping to the next line; full-width stack on mobile. */
#content .action-targets,
.region-content .action-targets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
#content .action-targets,
.region-content .action-targets {
  align-items: flex-start !important;   /* top-align the target cards */
}
#content .action-targets > .target,
.region-content .action-targets > .target {
  flex: 0 1 calc(33.333% - 14px) !important;
  width: calc(33.333% - 14px) !important;
  box-sizing: border-box !important;
  float: none !important;
}
@media (max-width: 767px) {
  #content .action-targets > .target,
  .region-content .action-targets > .target {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* 21d. FIELD BORDERS in "What You're Saying" + "Contact Information"
        identical to the screen-1 (Target Search) fields: a clean 1px box
        + 6px radius on all four sides, white fill. (NOTE: making these
        borderless instead leaves only the seams between adjacent fields
        visible, which reads as "missing top/side borders" — give them the
        full box like screen 1 so every field is a consistent rounded
        input.) */
#content .section-action-letter input[type="text"],
#content .section-action-letter textarea,
#content .section-action-contact input[type="text"],
#content .section-action-contact input[type="email"],
#content .section-action-contact select,
.region-content .section-action-letter input[type="text"],
.region-content .section-action-letter textarea,
.region-content .section-action-contact input[type="text"],
.region-content .section-action-contact input[type="email"],
.region-content .section-action-contact select {
  border: 1px solid rgb(200, 210, 220) !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* 21f. EQUAL-HEIGHT, TOP-ALIGNED target cards. THREE distinct causes —
        all must be fixed (each was a separate debugging pass):
        (1) TOP MARGIN: SBX gives the 2nd/3rd .target a `margin-top:18px`
            (spacing for the original vertical stack). In a flex row that
            just pushes those cards DOWN ~18px, breaking top alignment.
            Zero it — the flex `gap` handles spacing now.
        (2) PHOTO HEIGHT: target photos declare height="120px" (invalid —
            px in an HTML attr is ignored), so source images render at
            their own portrait ratio and vary in height. Force a fixed
            HEIGHT with width:auto + object-fit:contain — this keeps all
            photos the same height AND UNCROPPED. (object-fit:cover would
            equalize height too, but it CROPS the portraits — chopping
            heads — so use contain, not cover.)
        (3) ADDRESS WRAP: a long building name in .target-address wraps an
            extra line; shrink .target-address/.target-phone to 13px so it
            fits. Name + title keep their size. */
#content .action-targets > .target,
.region-content .action-targets > .target {
  margin-top: 0 !important;
}
#content .target-photo,
.region-content .target-photo {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}
#content .target-address,
#content .target-phone,
.region-content .target-address,
.region-content .target-phone {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* 21e. Hide the hero/media photo on the SECOND Actions screen ONLY (the
        letter form). Screen 2 is distinguished by containing the letter
        fieldset (.action-letter-fs); screen 1 (Target Search) does not.
        Use :has() so the hero stays on screen 1 and only disappears once
        the user has submitted an address. */
.actions:has(.action-letter-fs) .section-action-media,
#content:has(.action-letter-fs) .section-action-media,
.region-content:has(.action-letter-fs) .section-action-media {
  display: none !important;
}

/* 16. Site-wide body font typically requires per-template setting (the
       brand font lives in the per-site CSS). But SBX core forces
       `body { font-family: "Helvetica Neue", Helvetica, Arial }` via
       reset.min.css; if the per-template (B) section sets the body font
       via just `body` selector with normal specificity, SBX core may
       win in the cascade. Per-template authors should use
       `body, html, #bd, #page-container { font-family: <brand>
       !important }` to ensure the override sticks. */

/* ====================  (B) SITE-SPECIFIC RULES  ==================== */
/* Add per-template rules below this line. Examples:
   - Header positioning specific to the source theme
   - Brand color overrides
   - JS-shim conditional CSS (e.g. mobile drawer positioning that
     depends on the source CMS's nav structure)
   - Webflow scroll-anim force-visible
   - WordPress Bootstrap 4 desktop nav height-auto

   To customize donation form colors per template, set the four CSS
   variables at the top of your section (B):

     :root {
       --donation-toggle-active-bg: rgb(YOUR-BRAND-COLOR);
       --donation-toggle-active-color: rgb(255, 255, 255);
       --donation-amount-active-bg: rgb(YOUR-BRAND-COLOR);
       --donation-amount-active-color: rgb(255, 255, 255);
     }

   PRIMARY-CTA HOVER (Donate Now / Go To PayPal): the uniform-button rule #17
   drives the hover from --btn-bg-hover / --btn-color. If you want a clean
   INVERT-on-hover (filled -> outline), set BOTH:
       --btn-bg-hover: rgb(255, 255, 255);     // hover bg = white
       --btn-color-hover: var(--your-brand);   // hover text = brand
   ...and don't forget the donation PILLS + frequency toggle have NO hover by
   default — add :hover rules that invert them (white/brand <-> brand/white).
   See footgun #49 (and #35 — read hover colors AFTER the 0.2s transition).
*/

/* ====================================================================
   RIVERBEND COMMONS (soapboxengagedemo) — Section B
   From-scratch demo template: every SBX surface (donations, P2P, events,
   actions, shop, classes, cart) styled in the brand system.
   Palette: indigo #2D5798 / ink #1B3A66 / purple #2D5798 / lime #9AB800 /
   sky wash #EFF7FF. Fonts: Fraunces + Figtree (set in style-client).
   ==================================================================== */

:root {
  /* base-rule variable wiring (rules #11/#12/#17) — purple primary, invert hover */
  --donation-toggle-active-bg: rgb(45, 87, 152);
  --donation-toggle-active-color: rgb(255, 255, 255);
  --donation-toggle-inactive-bg: rgb(255, 255, 255);
  --donation-toggle-inactive-color: rgb(45, 87, 152);
  --donation-amount-active-bg: rgb(45, 87, 152);
  --donation-amount-active-color: rgb(255, 255, 255);
  --donation-amount-inactive-bg: rgb(255, 255, 255);
  --donation-amount-inactive-color: rgb(45, 87, 152);
  --btn-bg: rgb(45, 87, 152);
  --btn-color: rgb(255, 255, 255);
  --btn-bg-hover: rgb(255, 255, 255);
  --btn-color-hover: rgb(45, 87, 152);
  --btn-radius: 999px;
}

/* (rc-1) FIXED-HEADER CLEARANCE — the header is position:fixed (5px ribbon +
   84px bar), so #content needs top padding or titles hide beneath it
   (youthvillages lesson; #content ONLY — never also .region-content, they nest
   and the padding doubles). */
#content { padding-top: 130px !important; padding-bottom: 24px; }
#content .region-content, .region-content { padding-top: 0 !important; }
@media (max-width: 1080px) { #content { padding-top: 114px !important; } }
#content h1, #content h2, #content h3 { scroll-margin-top: 120px; }

/* (rc-2) Body font pinned against SBX reset (base rule #16 pattern). */
body, html, #bd, #page-container {
  font-family: "Figtree", "Avenir Next", "Segoe UI", sans-serif !important;
}

/* (rc-3) Buttons: force ALL SBX action buttons into the pill system.
   Filled purple / white text; hover inverts (white / purple, keeps border). */
/* NOTE: never include `> span` here — SBX wraps submit labels in a <span>, and
   giving the span the same border/radius/background painted a SECOND pill
   inside the button (visible double ring on hover). Spans get colour only,
   below. Also exclude .btn-amount: selected pills gain .btn-primary, and this
   rule's padding made them jump size. */
#content .btn-primary:not(.btn-amount),
#content .btn-submit,
#content .payable-form-btn,
#content button[type="submit"],
#content input[type="submit"],
#content .add-to-cart,
#content button.add-to-cart {
  background: rgb(45, 87, 152) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid rgb(45, 87, 152) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  padding: 11px 28px !important;
}
#content .btn-primary:not(.btn-amount):hover, #content .btn-submit:hover,
#content .payable-form-btn:hover, #content button[type="submit"]:hover,
#content input[type="submit"]:hover, #content .add-to-cart:hover {
  background: #fff !important;
  background-image: none !important;
  color: rgb(45, 87, 152) !important;
  border-color: rgb(45, 87, 152) !important;
}

/* (rc-4) Giving pills — outline purple, selected fills, hover inverts.
   Border on the BUTTON only, never the inner span (double-box lesson). */
/* ===== old giving-pill colour block: superseded by rc-15 (single source of truth) ===== */
/* [superseded by rc-15] #content .btn-amount, #content button.btn-amount, #content .amts { */
/* [superseded by rc-15]   background-color: #fff !important; */
/* [superseded by rc-15]   background-image: none !important; */
/* [superseded by rc-15]   color: rgb(45, 87, 152) !important; */
/* [superseded by rc-15]   border: 2px solid rgb(45, 87, 152) !important; */
/* [superseded by rc-15]   border-radius: 999px !important; */
/* [superseded by rc-15]   box-shadow: none !important; */
/* [superseded by rc-15]   font-weight: 700 !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount > span, #content .amts > span { */
/* [superseded by rc-15]   background: transparent !important; border: 0 none !important; */
/* [superseded by rc-15]   color: inherit !important; font-weight: 700 !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount.btn-primary, #content .amts.btn-primary, */
/* [superseded by rc-15] #content .btn-amount.active, #content .amts.active { */
/* [superseded by rc-15]   background-color: rgb(45, 87, 152) !important; */
/* [superseded by rc-15]   color: #fff !important; border-color: rgb(45, 87, 152) !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount.btn-primary > span, #content .amts.btn-primary > span, */
/* [superseded by rc-15] #content .btn-amount.active > span, #content .amts.active > span { color: #fff !important; } */
/* [superseded by rc-15] #content .btn-amount:not(.btn-primary):not(.active):hover, */
/* [superseded by rc-15] #content .amts:not(.btn-primary):not(.active):hover { */
/* [superseded by rc-15]   background-color: rgb(45, 87, 152) !important; color: #fff !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount:not(.btn-primary):not(.active):hover > span, */
/* [superseded by rc-15] #content .amts:not(.btn-primary):not(.active):hover > span { color: #fff !important; } */
/* [superseded by rc-15] #content .btn-amount.btn-primary:hover, #content .amts.btn-primary:hover { */
/* [superseded by rc-15]   background-color: #fff !important; color: rgb(45, 87, 152) !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount.btn-primary:hover > span, */
/* [superseded by rc-15] #content .amts.btn-primary:hover > span { color: rgb(45, 87, 152) !important; } */

/* Frequency toggle: brand the halves + hover invert (extends base rule #11). */
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  background-color: #fff !important; background-image: none !important;
  border: 2px solid rgb(45, 87, 152) !important;
  color: rgb(45, 87, 152) !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:checked + label.choice {
  background-color: rgb(45, 87, 152) !important; color: #fff !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice:hover {
  background-color: rgb(45, 87, 152) !important; color: #fff !important; cursor: pointer;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:checked + label.choice:hover {
  background-color: #fff !important; color: rgb(45, 87, 152) !important;
}

/* (rc-5) SBX section cards — give each major form section the soft-card look. */
#content .section-donation, #content .section-contactinfo,
#content .section-billing, #content .section-dedication,
#content .eventRegistration,
#content .product-store-wrapper {
  background: #fff;
  border: 1px solid #DCE6F2;
  border-radius: 14px;
  padding: 26px 28px !important;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(27,58,102,0.05), 0 10px 28px rgba(27,58,102,0.06);
}

/* (rc-6) SHOP: storefront grid + product detail + cart. */
#content .item-list { display: flex; flex-wrap: wrap; gap: 22px; }
#content .item-list > * {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 16px; transition: box-shadow 0.18s ease, transform 0.18s ease;
}
#content .item-list > *:hover {
  box-shadow: 0 4px 10px rgba(27,58,102,0.10), 0 18px 44px rgba(27,58,102,0.14);
  transform: translateY(-3px);
}
#content .item-thumb-wrapper img, #content .productImageList img {
  border-radius: 10px; max-width: 100%; height: auto;
}
#content .item-name, #content .item-name a {
  font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600;
  color: #1B3A66; text-decoration: none;
}
#content .item-price { color: #5E7100; font-weight: 800; font-size: 16px; }
#content .product-quantity {
  width: 92px !important; min-width: 92px !important; max-width: 92px !important;
}

/* (rc-7) CLASSES search results + EVENTS meta rows. */
#content .elements-col-event {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 18px 20px; margin-bottom: 14px;
}
#content .element-data.class-code { color: #5E7100; font-weight: 700; }
#content .compSect-wrap {
  border: 0 !important; border-top: 1px solid #EFF7FF !important;
  padding: 18px 0 !important;
}

/* (rc-8) P2P — NEVER redefine .sbx-grid! It is SBX's own layout system
   (.sbx-col-75 = a 75% column etc.); a blanket grid-template override crushed
   the team/personal pages into a 230px column and overlapped the campaign
   team cards. Style COSMETICS only, geometry stays native. */
#content .campaign-supporters-list li {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; list-style: none;
}
#content .section-create-fundraiser-buttons .btn,
#content .section-create-fundraiser-buttons a {
  margin: 4px 6px 4px 0;
}

/* (rc-9) Ticket qty dropdown (bootstrap's bare select{width:220px} trap). */
#content select.ticNumIn, #content .ticketQty select {
  width: 88px !important; min-width: 88px !important; max-width: 88px !important;
}
/* "Your Total" value — id-level so it beats SBX's id color rule. */
#content #total_cost, #content #subtotal_cost,
#content .foot-total .amount, #content .foot-total .amount span {
  color: rgb(45, 87, 152) !important; font-weight: 800 !important;
}

/* (rc-10) Hide stray badge imagery + demo chrome cruft. */
#content img.payment-ssl, img.payment-ssl { display: none !important; }
.poweredby { display: none; }

/* ====================================================================
   (rc-11) DEPLOYED-PAGE FIX ROUND — 2026-07-30, from the live 12-page audit.
   ==================================================================== */

/* -- DONATE -- */
/* Organization (and any full-width input) must not overflow its card. */
#content input, #content select, #content textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Designation buttons: match the amount-pill outline look (covers the
   button/label/anchor variants SBX renders for designations). */
#content .section-donation .btn:not(.btn-amount):not(.btn-primary):not(.btn-submit),
#content .designation-list label,
#content .btn-designation,
#content [class*="designation"] .btn {
  background: #fff !important;
  background-image: none !important;
  color: var(--rc-purple, #2D5798) !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  padding: 9px 20px !important;
}
#content .section-donation .btn:not(.btn-amount):not(.btn-primary):not(.btn-submit):hover,
#content .btn-designation:hover,
#content [class*="designation"] .btn:hover {
  background: #2D5798 !important; color: #fff !important;
}
/* Fee + total live OUTSIDE the section cards — give them aligned breathing room. */
#content .section-fee, #content .section-fee-field, #content .section-total {
  padding: 6px 4px !important;
}
#content .section-formactions { margin-top: 18px; }

/* -- P2P CAMPAIGN -- */
/* Campaign header: soft wash band, not an empty white card. */
#content .section-campaign-header {
  background: #EFF7FF;
  border-radius: 14px;
  padding: 34px 30px !important;
  margin-bottom: 22px;
}
/* Progress meters → brand. CAREFUL: in the P2P app `.progress-bar` is the
   whole STATS CONTAINER (a 600x270 sbx-col), NOT a meter — painting it
   created a giant gradient blob. The real meters are the native
   <progress class="sbx-progress-bar"> element and the div/span pair
   .sbx-progress-bar > .sbx-progress-bar__value. Style ONLY those. */
#content progress.sbx-progress-bar,
#content div.sbx-progress-bar {
  height: 10px !important; border: 0 !important; border-radius: 999px !important;
  background: #DCE6F2 !important; overflow: hidden;
  accent-color: #2D5798;
}
#content progress.sbx-progress-bar::-webkit-progress-bar { background: #DCE6F2; border-radius: 999px; }
#content progress.sbx-progress-bar::-webkit-progress-value {
  background: #2D5798; border-radius: 999px;
}
#content progress.sbx-progress-bar::-moz-progress-bar {
  background: #2D5798; border-radius: 999px;
}
#content .sbx-progress-bar__value {
  background: #2D5798 !important;   /* solid SBX blue — no gradients (client req) */
  border-radius: 999px !important; height: 10px !important; display: block;
}
/* Teams / Fundraisers tabs → brand. */
#content .section-tab, #content .nav-tabs { border-bottom: 2px solid #DCE6F2 !important; }
#content .nav-tabs > li > a, #content .section-tab a {
  border: 0 !important; border-radius: 10px 10px 0 0 !important;
  color: #2D5798 !important; font-weight: 700 !important;
  background: transparent !important;
}
#content .nav-tabs > .active > a, #content .section-tab .active a,
#content .nav-tabs > li > a.active {
  color: #1B3A66 !important;
  box-shadow: inset 0 -3px 0 #2D5798 !important;
  background: #EFF7FF !important;
}

/* -- SHOP -- */
/* Ghost card: hide empty grid items. */
#content .item-list > *:empty { display: none !important; }
/* Add to Cart: natural width, not a 457px slab. */
#content .add-to-cart, #content button.add-to-cart {
  width: auto !important; display: inline-block !important;
  min-width: 180px; margin-top: 10px;
}
/* Price + stock: lime price, quiet stock note, spaced apart. */
#content .price .price-value { color: #5E7100; font-weight: 800; font-size: 20px; }
#content .price { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 14px; }

/* -- CLASSES APP (all views) — user OK'd !important to beat core css -- */
/* Soft-corner card table: kill the hard #2c2c2c borders + #e0e0e0 zebra. */
#content table.search-result {
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100%;
  box-shadow: 0 2px 6px rgba(27,58,102,0.05), 0 10px 28px rgba(27,58,102,0.06);
  background: #fff !important;
}
#content table.search-result td, #content table.search-result th {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #EFF7FF !important;
  padding: 16px 18px !important;   /* breathing room (was cramped) */
  vertical-align: middle !important;
}
#content table.search-result tr:last-child td { border-bottom: 0 !important; }
/* soft zebra: sky wash instead of hard grey */
#content table.search-result tr:nth-child(even) td { background: #F7FBFF !important; }
#content table.search-result tr:hover td { background: #EFF7FF !important; }
/* "Closed"/status → quiet badge */
#content .element-data.status {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: #EFF7FF; color: #2D5798; font-weight: 700; font-size: 13px;
}
/* class-code slugs: quiet lime, not shouting */
#content .element-data.class-code { color: #5E7100 !important; font-weight: 600 !important; font-size: 13.5px; }
/* Instructor cards: drop the underline on serif name links (kept highlighter) */
#content .region-content a h2, #content h2 a, #content h3 a,
#content a.instructor-name, #content .instructor a {
  text-decoration: none !important;
}
/* the two slider value labels ("9:00 AM" / "5:00 PM") run together */
#content .sliders_step1 { margin-bottom: 10px !important; }
/* the two time values are span.slider-time + span.slider-time2 inside a <p>
   directly after the track — they rendered as "9:00 AM5:00 PM". Push them to
   opposite ends so each sits under its own handle. */
#content .sliders_step1 > p {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 8px 0 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6B7A8D !important;
}
#content span.slider-time,
#content span.slider-time2 { display: inline-block !important; white-space: nowrap !important; }

/* jQuery-UI time slider → brand */
#content .ui-slider { background: #DCE6F2 !important; border: 0 !important; border-radius: 999px !important; height: 6px !important; }
#content .ui-slider .ui-slider-range { background: #2D5798 !important; }
#content .ui-slider .ui-slider-handle {
  background: #fff !important; border: 3px solid #2D5798 !important;
  border-radius: 50% !important; width: 18px !important; height: 18px !important;
  top: -7px !important; cursor: pointer;
}
/* Filter sidebar: tidy day-of-week checkboxes into two neat columns */
#content .checkbox.days, #content [class*="days-of"] { display: inline-block; }

/* -- GLOBAL PADDING POLISH (user: "not enough padding between elements") -- */
#content .section, #content .compSect-wrap { margin-bottom: 18px; }
#content .item-intro, #content .product-collection-intro,
#content .section-intro { margin: 12px 0 26px; }
#content .item-list { margin-top: 10px; }
#content table.search-result { margin: 14px 0 26px; }
#content .section-formactions, #content .add-to-cart { margin-bottom: 8px; }

/* (rc-12) DONATE designation pills — real markup is
   li.designation-group > .designation-container > .pills > span.pill
   (found via live probe; none of the usual .btn classes). Outline-pill the
   idle state, fill on hover/selected, hide the empty no-label pill. */
#content .designation-container .pill {
  display: inline-block;
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  margin: 4px 8px 4px 0 !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#content .designation-container .pill:hover {
  background: #2D5798 !important; color: #fff !important;
}
#content .designation-container .pill.active,
#content .designation-container .pill.selected,
#content .designation-container .pill[aria-selected="true"] {
  background: #2D5798 !important; color: #fff !important;
}
#content .designation-container .pill:empty { display: none !important; }

/* ====================================================================
   (rc-13) DONATE PAGE COMPONENT ROUND — 2026-07-30 client revision.
   All controls unified at 48px; SBX blue system; no gradients.
   ==================================================================== */

/* A) ONE CONTROL HEIGHT — frequency halves, giving pills, designation pills,
      the Other button, and the Other $-box all sit at 48px. */
#content .btn-amount, #content button.btn-amount, #content .amts,
#content .designation-container .pill,
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  display: flex !important;   /* frequency halves stay full-width blocks */
}

/* B) The "Other" amount box: $-prefix, input, USD-suffix join into one clean
      48px rounded control matching the pills. */
#content .amount-group-notice .add-on,
#content .amount-group-notice .input-group-addon,
#content .input-group .input-group-addon {
  box-sizing: border-box !important;
  height: 48px !important;
  display: inline-flex !important; align-items: center !important;
  background: #EFF7FF !important;
  border: 1px solid #DCE6F2 !important;
  color: #2D5798 !important; font-weight: 700 !important;
  padding: 0 14px !important;
}
#content .amount-group-notice .add-on:first-child,
#content .input-group .input-group-addon:first-child { border-radius: 12px 0 0 12px !important; border-right: 0 !important; }
#content .amount-group-notice .add-on:last-child,
#content .input-group .input-group-addon:last-child { border-radius: 0 12px 12px 0 !important; border-left: 0 !important; }
#content .input-group { display: inline-flex !important; align-items: stretch !important; vertical-align: middle; }
#content .amount-group-notice input[type="text"],
#content .amount-group-notice input {
  height: 48px !important; min-height: 48px !important;
  border-radius: 0 !important;
  border: 1px solid #DCE6F2 !important;
  margin: 0 !important;
  text-align: right;
  font-weight: 700; color: #1B3A66;
}

/* C) Designation "Search and select" — round + match the form typography
      (covers a plain select and common enhanced-picklist wrappers). */
#content .section-donation select,
#content .designation-container select,
#content .section-donation .chzn-container .chzn-single,
#content .section-donation .chosen-container .chosen-single,
#content .section-donation .select2-container .select2-selection,
#content .section-donation input[type="search"],
#content [class*="picklist"] {
  height: 48px !important; min-height: 48px !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  font-family: "Figtree", sans-serif !important;
  font-size: 15.5px !important; color: #434A54 !important;
  box-shadow: none !important;
  padding: 0 16px !important;
}

/* D) DEDICATION: the expanded panel is SBX's grey squared
      .section-content-highlight — soften into the card language, and turn the
      In honor / In memory RADIOS into pill toggles like the frequency. */
#content .section-content-highlight,
#content .section-dedication .section-content-highlight,
#content .dedication-list .section-content-highlight {
  background: #F7FBFF !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-top: 12px !important;
}
#content .section-dedication input[type="radio"].dedication-option { position: absolute; opacity: 0; pointer-events: none; }
#content .section-dedication .span-block:has(input[type="radio"].dedication-option) label.choice,
#content .section-dedication input[type="radio"].dedication-option + label.choice,
#content .dedication-list input[type="radio"] + label.choice {
  box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important;
  min-height: 44px !important; padding: 0 22px !important;
  background: #fff !important; color: #2D5798 !important;
  border: 2px solid #2D5798 !important; border-radius: 999px !important;
  font-weight: 700 !important; cursor: pointer;
  margin: 4px 8px 4px 0 !important;
  transition: background 0.15s ease, color 0.15s ease;
}
#content .section-dedication .span-block:has(input[type="radio"].dedication-option:checked) label.choice,
#content .section-dedication input[type="radio"].dedication-option:checked + label.choice,
#content .dedication-list input[type="radio"]:checked + label.choice,
#content .section-dedication input[type="radio"].dedication-option + label.choice:hover {
  background: #2D5798 !important; color: #fff !important;
}

/* E) PAYMENT METHODS — modern selectable tiles instead of bare radios.
      Markup: span.paytype-X > label.choice(img) + input.radio. Hide the radio,
      make the logo label a tile; ring the selected tile via :has(). */
#content [class*="paytype-"] { position: relative; display: inline-block; margin: 0 10px 10px 0 !important; }
#content [class*="paytype-"] input.pay-method { position: absolute; opacity: 0; pointer-events: none; }
#content [class*="paytype-"] label.choice {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
#content [class*="paytype-"] label.choice:hover {
  border-color: #2D5798 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(27,58,102,0.10);
}
#content [class*="paytype-"]:has(input.pay-method:checked) label.choice {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, 0.25);
  background: #EFF7FF !important;
}
/* fallback tick for the selected tile */
#content [class*="paytype-"]:has(input.pay-method:checked)::after {
  content: "✓";
  position: absolute; top: -7px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #2D5798; color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* F) COVER-THE-FEE: heading + one-row modern SWITCH, no dead air. */
#content .section-fee { padding: 0 4px !important; margin-bottom: 0 !important; }
#content .section-fee .section-header h3, #content .section-fee h3 { margin-bottom: 4px !important; }
#content .section-fee-field { padding: 0 4px !important; margin-top: 2px !important; }
#content .section-fee-field .cntr { display: flex; align-items: center; gap: 12px; }
#content input#transaction_fee_amount {
  appearance: none !important; -webkit-appearance: none !important;
  width: 52px !important; height: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  background: #DCE6F2 !important;
  border: 0 !important;
  position: relative; cursor: pointer;
  transition: background 0.2s ease;
  margin: 0 !important; vertical-align: middle !important;
  flex: 0 0 auto;
}
#content input#transaction_fee_amount::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(27,58,102,0.25);
  transition: transform 0.2s ease;
}
#content input#transaction_fee_amount:checked { background: #2D5798 !important; }
#content input#transaction_fee_amount:checked::after { transform: translateX(22px); }
#content .section-fee-field label.choice { font-weight: 600; color: #434A54; cursor: pointer; }

/* G) TOTAL — anchored band, not floating text. */
#content .section-total {
  background: #EFF7FF !important;
  border: 1px solid #DCE6F2;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  margin: 18px 0 !important;
  display: inline-block;
}
#content .section-total p { margin: 0 !important; font-size: 18px; color: #1B3A66; }
#content .section-total strong { font-family: "Fraunces", Georgia, serif; font-weight: 600; margin-right: 6px; }
#content .section-total .price_total { font-weight: 800; font-size: 22px; color: #2D5798; }
#content .section-total .currency-symbol, #content .section-total .currency-code { color: #2D5798; font-weight: 700; }

/* H) SUBMIT — lock ONE size in normal AND hover states (base rule #17's hover
      swapped padding/border and the button visibly jumped; it was also 70px
      tall). 52px, pill, blue, inverts color only. */
#content .btn-submit, #content .payable-form-btn,
#content button.btn-submit, #content button[type="submit"] {
  box-sizing: border-box !important;
  height: 52px !important; min-height: 52px !important;
  padding: 0 34px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important; background-image: none !important;
  color: #fff !important;
  font-size: 16px !important; font-weight: 700 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important;
}
#content .btn-submit:hover, #content .payable-form-btn:hover,
#content button.btn-submit:hover, #content button[type="submit"]:hover {
  box-sizing: border-box !important;
  height: 52px !important; min-height: 52px !important;
  padding: 0 34px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #fff !important; background-image: none !important;
  color: #2D5798 !important;
  font-size: 16px !important; font-weight: 700 !important;
  line-height: 1 !important;
}

/* (rc-13 addenda) fee-switch row: flex lives on the inner span-block (the
   .cntr wraps only one child); dedication pills never wrap their label. */
#content .section-fee-field .span-block {
  display: flex !important; align-items: center !important; gap: 14px !important;
}
#content .section-dedication input[type="radio"].dedication-option + label.choice,
#content .section-dedication .span-block:has(input.dedication-option) label.choice {
  white-space: nowrap !important;
}

/* ====================================================================
   (rc-14) FINAL POLISH — 2026-07-30 client round 3.
   ==================================================================== */

/* A) SUBMIT: the inner <span> must be a plain label — no border, no radius,
      no background, no padding. Only the BUTTON draws the pill. This kills the
      double-ring-on-hover. */
#content .btn-submit > span,
#content .payable-form-btn > span,
#content button[type="submit"] > span,
#content .btn-primary:not(.btn-amount) > span {
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  display: inline !important;
}

/* B) GIVING PILLS: identical box in EVERY state. Selected only swaps colour —
/* ===== rc-14 giving-pill box block: superseded by rc-15 (single source of truth) ===== */
/* [superseded by rc-15]       same padding, border width, font-size and weight, so nothing resizes. * / */
/* [superseded by rc-15] #content .btn-amount, #content button.btn-amount, #content .amts, */
/* [superseded by rc-15] #content .btn-amount.btn-primary, #content .amts.btn-primary, */
/* [superseded by rc-15] #content .btn-amount.active, #content .amts.active, */
/* [superseded by rc-15] #content .btn-amount:hover, #content .amts:hover { */
/* [superseded by rc-15]   box-sizing: border-box !important; */
/* [superseded by rc-15]   min-height: 48px !important; height: 48px !important; */
/* [superseded by rc-15]   padding: 0 22px !important; */
/* [superseded by rc-15]   border-width: 2px !important; */
/* [superseded by rc-15]   border-style: solid !important; */
/* [superseded by rc-15]   border-radius: 999px !important; */
/* [superseded by rc-15]   font-size: 16px !important; */
/* [superseded by rc-15]   font-weight: 700 !important; */
/* [superseded by rc-15]   line-height: 1 !important; */
/* [superseded by rc-15]   margin: 0 8px 8px 0 !important; */
/* [superseded by rc-15] } */
/* [superseded by rc-15] #content .btn-amount > span, #content .amts > span { */
/* [superseded by rc-15]   border: 0 none !important; background: transparent !important; */
/* [superseded by rc-15]   padding: 0 !important; margin: 0 !important; font: inherit !important; */
/* [superseded by rc-15] } */

/* C) OTHER-AMOUNT GROUP: [$ rounded-left] [square input] [USD rounded-right],
      all flush with no double borders. */
#content .input-group { display: inline-flex !important; align-items: stretch !important; }
#content .input-group .input-group-addon,
#content .amount-group-notice .input-group-addon {
  box-sizing: border-box !important;
  height: 48px !important;
  display: inline-flex !important; align-items: center !important;
  background: #EFF7FF !important;
  border: 2px solid #2D5798 !important;
  color: #2D5798 !important; font-weight: 700 !important;
  padding: 0 14px !important;
  border-radius: 0 !important;
}
/* $ cap: rounded LEFT, square right, flush to the input */
#content .input-group .input-group-addon:first-child {
  border-radius: 999px 0 0 999px !important;
  border-right: 0 !important;
  padding-left: 20px !important;
}
/* USD cap: square left flush to the input, rounded RIGHT */
#content .input-group .input-group-addon:last-child {
  border-radius: 0 999px 999px 0 !important;
  border-left: 0 !important;
  padding-right: 20px !important;
}
/* the text field itself: fully square, flush between the caps */
#content .input-group input,
#content .amount-group-notice input[type="text"],
#content .amount-group-notice input {
  box-sizing: border-box !important;
  height: 48px !important; min-height: 48px !important;
  border: 2px solid #2D5798 !important;
  border-left: 0 !important; border-right: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  text-align: right;
  font-weight: 700; color: #1B3A66;
  background: #fff !important;
}

/* D) TRIBUTE (In honor / In memory) pills: symmetric padding both sides. */
#content .section-dedication input[type="radio"].dedication-option + label.choice,
#content .section-dedication .span-block:has(input.dedication-option) label.choice {
  box-sizing: border-box !important;
  padding: 0 24px !important;
  min-height: 44px !important; height: 44px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* E) TOTAL: fixed footprint so the box never resizes as the amount changes.
      Tabular figures keep digit widths constant too. */
#content .section-total {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px;
  min-width: 260px !important;
  box-sizing: border-box !important;
  padding: 14px 22px !important;
}
#content .section-total p {
  margin: 0 !important;
  display: inline-flex !important; align-items: baseline; gap: 6px;
  width: 100%;
}
#content .section-total .price_total,
#content .section-total .currency-symbol,
#content .section-total .currency-code {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}
#content .section-total .price_total {
  min-width: 92px; display: inline-block; text-align: right;
}

/* (rc-14 addenda) The base field-equalization rule (#14b) re-rounds inputs to
   6px and restores 1px side borders, which broke the flush Other-amount group.
   Re-assert with higher specificity (id + class chain) so the middle field
   stays perfectly square and seamless between the two caps. */
#content .input-group input.form-control,
#content .input-group input.custom-input,
#content .input-group input[type="text"],
#content .amount-group-notice .input-group input {
  border-radius: 0 !important;
  border-top: 2px solid #2D5798 !important;
  border-bottom: 2px solid #2D5798 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  height: 48px !important; min-height: 48px !important;
  box-shadow: none !important;
}
/* Total: enough room for "$ 1,000,000.00 USD" so the band never resizes. */
#content .section-total { min-width: 300px !important; }
#content .section-total .price_total { min-width: 132px; }

/* (rc-14 final) Base rule #14b matches this input via
   `#content form.form-donate input:not(...)` — an id + class + element chain
   that outranks a plain `#content .input-group input`. Match that specificity
   (form.form-donate + .input-group + input) so the Other-amount field really
   is square and flush between its two rounded caps. */
#content form.form-donate .input-group input,
#content form.form-donate .input-group input.form-control,
#content .item-form .input-group input,
#content .item-form .input-group input.form-control {
  border-radius: 0 !important;
  border-top: 2px solid #2D5798 !important;
  border-bottom: 2px solid #2D5798 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  text-align: right;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}

/* ====================================================================
   (rc-15) SINGLE SOURCE OF TRUTH for donation controls + mobile polish.
   Earlier rounds left SIX overlapping .btn-amount blocks fighting each
   other (hence the "bonkers" hover/active states). Everything above is
   now superseded; only this section governs pills, frequency, and
   checkboxes.
   ==================================================================== */

/* ---- 1. GIVING PILLS === DESIGNATION PILLS (identical spec) ---- */
#content .btn-amount,
#content button.btn-amount,
#content .amts,
#content .designation-container .pill {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  margin: 4px 8px 4px 0 !important;
  background: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: "Figtree", "Avenir Next", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
/* inner label span inherits, never paints its own box */
#content .btn-amount > span,
#content .amts > span,
#content .designation-container .pill > span {
  background: transparent !important;
  border: 0 none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}
/* SELECTED (SBX adds .btn-primary / .active / .selected) = filled blue */
#content .btn-amount.btn-primary, #content .amts.btn-primary,
#content .btn-amount.active,     #content .amts.active,
#content .btn-amount.selected,   #content .amts.selected,
#content .designation-container .pill.active,
#content .designation-container .pill.selected {
  background: #2D5798 !important;
  color: #fff !important;
  border-color: #2D5798 !important;
}
/* HOVER — only on NOT-already-selected pills (hovering a selected pill
   does nothing, same as the designation group). */
#content .btn-amount:not(.btn-primary):not(.active):not(.selected):hover,
#content .amts:not(.btn-primary):not(.active):not(.selected):hover,
#content .designation-container .pill:not(.active):not(.selected):hover {
  background: #2D5798 !important;
  color: #fff !important;
  border-color: #2D5798 !important;
}
/* kill legacy transforms/shadows from base rule #12 */
#content .btn-amount:active, #content .amts:active { transform: none !important; }

/* ---- 2. FREQUENCY: match pill typography; no hover on the selected half ---- */
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  font-family: "Figtree", "Avenir Next", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
/* unchecked half hovers to filled; CHECKED half stays exactly as-is */
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:not(:checked) + label.choice:hover {
  background-color: #2D5798 !important;
  color: #fff !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:checked + label.choice:hover {
  background-color: #2D5798 !important;   /* identical to its resting state */
  color: #fff !important;
  cursor: default !important;
}

/* ---- 3. MODERN CHECKBOXES (Material-style: bigger, animated tick) ---- */
#content input[type="checkbox"]:not(#transaction_fee_amount) {
  appearance: none !important; -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 22px !important; height: 22px !important;
  min-width: 22px !important; min-height: 22px !important;
  margin: 0 10px 0 0 !important;
  border: 2px solid #B6C6DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  position: relative !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount):hover {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 4px rgba(45, 87, 152, 0.10) !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(45, 87, 152, 0.22) !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount):checked {
  background: #2D5798 !important;
  border-color: #2D5798 !important;
}
/* animated tick drawn with a rotated pseudo-element */
#content input[type="checkbox"]:not(#transaction_fee_amount)::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important; top: 2px !important;
  width: 5px !important; height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  border-radius: 1px !important;
  transform: rotate(45deg) scale(0) !important;
  transition: transform 0.16s cubic-bezier(.2,.8,.3,1.2) !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount):checked::after {
  transform: rotate(45deg) scale(1) !important;
}
/* vertical centring: put the box and its label on one flex row */
#content .compList li .cntr > .span-block:has(> input[type="checkbox"]),
#content .dedication-list .span-block:has(> input[type="checkbox"]),
#content .section-contactinfo .span-block:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount) + label,
#content input[type="checkbox"]:not(#transaction_fee_amount) + label.choice {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

/* ---- 4. MOBILE PORTRAIT (<=767px) ---- */
@media (max-width: 767px) {
  /* SBX centre-aligns component text on narrow screens; keep everything
     left-aligned so labels, pills and copy share one edge. */
  #content, #content .section, #content .section-content,
  #content .cntr, #content .span-block, #content .compList li,
  #content h1, #content h2, #content h3, #content .section-header {
    text-align: left !important;
  }
  /* pills: two per row, equal width, tidy gutters */
  #content .btn-amount, #content .amts,
  #content .designation-container .pill {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }
  #content .amount-group-notice .cntr,
  #content .designation-container .pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  #content .amount-group-notice .span-block { display: contents !important; }
  /* Other-amount group takes a full row of its own */
  #content .input-group {
    display: flex !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  #content .input-group input { flex: 1 1 auto !important; min-width: 0 !important; }
  /* frequency halves: no wrapped text */
  .section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
    font-size: 14px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
  /* form fields full width; name fields side by side */
  #content input[type="text"], #content input[type="email"],
  #content input[type="tel"], #content select, #content textarea {
    width: 100% !important;
  }
  /* section cards: tighter padding, full bleed feel */
  #content .section-donation, #content .section-contactinfo,
  #content .section-billing, #content .section-dedication,
  #content .product-store-wrapper {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  /* total + submit align left with everything else */
  #content .section-total { min-width: 0 !important; width: 100% !important; }
  #content .btn-submit, #content .payable-form-btn { width: 100% !important; }
  /* payment tiles wrap evenly */
  #content [class*="paytype-"] { margin: 0 8px 8px 0 !important; }
  #content [class*="paytype-"] label.choice { padding: 8px 10px !important; }
}

/* ====================================================================
   (rc-16) P2P CAMPAIGN PAGE — modern tabs, card grid, centered CTAs.
   Markup: .section-tab > .bar > a (tab strip, grey #f1f1f1),
           .sbx-grid.teams-grid > .sbx-panel (team cards),
           .section-create-fundraiser-buttons > a.btn.btn-primary.btn-submit
   ==================================================================== */

/* ---- 1+2. TAB STRIP: drop the flat grey bar for a modern underline nav ---- */
#content .section-tab > .bar {
  background: transparent !important;   /* the old grey #f1f1f1 slab is gone */
  border-bottom: 2px solid #DCE6F2 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  display: flex !important;
  gap: 6px !important;
}
#content .section-tab > .bar > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  color: #5A6B80 !important;
  font-family: "Figtree", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.16s ease, background-color 0.16s ease !important;
}
/* animated active underline */
#content .section-tab > .bar > a::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important; right: 12px !important; bottom: -2px !important;
  height: 3px !important; border-radius: 3px 3px 0 0 !important;
  background: #2D5798 !important;
  transform: scaleX(0) !important;
  transition: transform 0.2s cubic-bezier(.2,.8,.3,1) !important;
}
#content .section-tab > .bar > a:hover {
  color: #2D5798 !important;
  background: #EFF7FF !important;
}
#content .section-tab > .bar > a.active {
  color: #1B3A66 !important;
  background: transparent !important;
}
#content .section-tab > .bar > a.active::after { transform: scaleX(1) !important; }
/* the tab body: no leftover panel chrome */
#content .section-tab > .tab {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---- 3. TEAM CARDS: fill the row, modern rounded panels ---- */
#content .sbx-grid.teams-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}
#content .teams-grid > .sbx-panel,
#content .teams-grid > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(27,58,102,0.05), 0 8px 24px rgba(27,58,102,0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#content .teams-grid > .sbx-panel:hover,
#content .teams-grid > *:hover {
  transform: translateY(-3px) !important;
  border-color: #BADEFF !important;
  box-shadow: 0 6px 14px rgba(27,58,102,0.10), 0 20px 44px rgba(27,58,102,0.12) !important;
}
/* team image: rounded, consistent aspect, fills the card width */
#content .teams-grid img {
  width: 100% !important;
  height: 168px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  margin: 0 0 12px !important;
}
/* team name */
#content .teams-grid .sbx-panel__title,
#content .teams-grid a[href*="team"] {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  text-decoration: none !important;
}

/* ---- 4+5. THE THREE CTA BUTTONS: centered row, correct hover ---- */
#content .section-create-fundraiser-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 26px 0 !important;
  text-align: center !important;
}
#content .section-create-fundraiser-buttons > a,
#content .section-create-fundraiser-buttons > .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  padding: 0 30px !important;
  margin: 0 !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}
/* hover: clean invert — white fill, blue text, blue border stays */
#content .section-create-fundraiser-buttons > a:hover,
#content .section-create-fundraiser-buttons > .btn:hover,
#content .section-create-fundraiser-buttons > a:focus-visible {
  background: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border-color: #2D5798 !important;
  text-decoration: none !important;
}
/* inner spans never paint their own box */
#content .section-create-fundraiser-buttons > a > span,
#content .section-create-fundraiser-buttons > .btn > span {
  background: transparent !important; border: 0 !important;
  color: inherit !important; font: inherit !important; padding: 0 !important;
}

/* ---- 6. P2P MOBILE PORTRAIT ---- */
@media (max-width: 767px) {
  #content .sbx-grid.teams-grid {
    grid-template-columns: 1fr !important;   /* one full-width card per row */
    gap: 16px !important;
  }
  #content .teams-grid img { height: 190px !important; }
  #content .section-tab > .bar {
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #content .section-tab > .bar > a {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  /* CTAs stack full-width and stay centered */
  #content .section-create-fundraiser-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    margin: 20px 0 !important;
  }
  #content .section-create-fundraiser-buttons > a,
  #content .section-create-fundraiser-buttons > .btn {
    width: 100% !important;
    max-width: 340px !important;
  }
  /* campaign header band: tighter on small screens */
  #content .section-campaign-header {
    padding: 22px 16px !important;
    border-radius: 12px !important;
  }
}

/* (rc-16 addenda) MOBILE pill grid: flex-basis alone still let each pill grow
   to a full row (flex-grow:1 + no cap). Cap the width so they sit exactly
   two-up, and let the Other-amount group span its own full row. */
@media (max-width: 767px) {
  #content .btn-amount, #content .amts,
  #content .designation-container .pill {
    flex: 0 1 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 5px) !important;
  }
  #content .amount-group-notice .cntr,
  #content .designation-container .pills { gap: 10px !important; }
  /* the $ / USD group is not a pill — it owns a full row */
  #content .amount-group-notice .input-group {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* (rc-16 addenda 2) The amount `.cntr` inherits justify-content:center from SBX,
   which centred the two-up pills into a stacked-looking column. Force
   flex-start so pills align to the same left edge as every label. */
@media (max-width: 767px) {
  #content .amount-group-notice .cntr,
  #content .designation-container .pills,
  #content .section-donation .cntr {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
}

/* (rc-16 addenda 3) MOBILE final: SBX wraps each amount in its own <li>, so a
   true 2-up grid isn't reachable without fighting the markup. Full-width pills
   are the better phone pattern anyway (48px thumb targets, one clean column).
   Designation pills stay two-up since they share one .pills container. */
@media (max-width: 767px) {
  #content .btn-amount, #content .amts {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  #content .designation-container .pill {
    flex: 0 1 calc(50% - 5px) !important;
    width: auto !important;
    max-width: calc(50% - 5px) !important;
  }
}

/* (rc-16 addenda 4) The campaign header carries Bootstrap's `.row` negative
   side margins (-15px), which pushed it past the viewport on phones and caused
   horizontal scroll. Neutralise the negative margins inside the content slot. */
@media (max-width: 767px) {
  #content .row,
  #content .section-campaign-header.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  #content, #content .container { overflow-x: hidden !important; }
}

/* ====================================================================
   (rc-17) P2P fundraisers pane, progress bar, donate polish — client round 5.
   ==================================================================== */

/* ---- 1. FUNDRAISER TILES === TEAM TILES (same grid + card treatment).
        The fundraisers pane uses `.fundraiser-grid`, a different container
        from `.teams-grid`, so it never picked up rc-16's card styling. ---- */
#content .sbx-grid.fundraiser-grid,
#content .sbx-grid.teams-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}
#content .fundraiser-grid > .sbx-panel,
#content .fundraiser-grid > *,
#content .teams-grid > .sbx-panel,
#content .teams-grid > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(27,58,102,0.05), 0 8px 24px rgba(27,58,102,0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#content .fundraiser-grid > *:hover,
#content .teams-grid > *:hover {
  transform: translateY(-3px) !important;
  border-color: #BADEFF !important;
  box-shadow: 0 6px 14px rgba(27,58,102,0.10), 0 20px 44px rgba(27,58,102,0.12) !important;
}
#content .fundraiser-grid img,
#content .teams-grid img {
  width: 100% !important;
  height: 168px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  margin: 0 0 12px !important;
}

/* ---- 2. Breathing room under the search row in both panes ---- */
#content .section-tab .tab > form,
#content .section-tab .tab > .search,
#content .section-tab .tab input[type="text"],
#content .section-tab .tab input[type="search"] {
  margin-bottom: 0 !important;
}
#content .sbx-grid.fundraiser-grid,
#content .sbx-grid.teams-grid { margin-top: 26px !important; }

/* ---- 3. CTA buttons: beat base rule #17's `border:0 none !important` with a
        higher-specificity selector (id + 2 classes + element). ---- */
#content .section-create-fundraiser-buttons a.btn,
#content .section-create-fundraiser-buttons a.btn-primary,
#content .section-create-fundraiser-buttons a.btn.btn-primary.btn-submit {
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#content .section-create-fundraiser-buttons a.btn:hover,
#content .section-create-fundraiser-buttons a.btn-primary:hover,
#content .section-create-fundraiser-buttons a.btn.btn-primary.btn-submit:hover,
#content .section-create-fundraiser-buttons a.btn:focus-visible {
  background: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  text-decoration: none !important;
}
#content .section-create-fundraiser-buttons a.btn:hover > span,
#content .section-create-fundraiser-buttons a.btn.btn-primary.btn-submit:hover > span {
  color: #2D5798 !important;
  background: transparent !important;
}

/* ---- 4. PROGRESS BAR: taller, softer, brand-consistent with a subtle sheen
        and a rounded cap. Markup: div.sbx-progress-bar > span[style=width]. ---- */
#content .sbx-progress-bar,
#content div.sbx-progress-bar {
  height: 14px !important;
  border-radius: 999px !important;
  background: #E7EEF7 !important;
  box-shadow: inset 0 1px 2px rgba(27,58,102,0.08) !important;
  overflow: hidden !important;
  border: 0 !important;
}
#content .sbx-progress-bar__value {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: #2D5798 !important;   /* solid brand blue, no gradient */
  box-shadow: 0 1px 2px rgba(27,58,102,0.25) !important;
  transition: width 0.6s cubic-bezier(.2,.8,.3,1) !important;
  position: relative !important;
}
/* subtle top sheen for depth (still flat colour, no gradient fill) */
#content .sbx-progress-bar__value::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 55% 0 !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 999px 999px 0 0 !important;
}

/* ---- 5. DONATE: Other-amount input truly square + matching border colour ---- */
#content form.form-donate .input-group input,
#content form.form-donate .input-group input.form-control,
#content .item-form .input-group input,
#content .input-group input.form-control,
#content .input-group input {
  border-radius: 0 !important;
  border-top: 2px solid #2D5798 !important;
  border-bottom: 2px solid #2D5798 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
}
/* the two caps keep the same 2px blue border so the trio reads as one control */
#content .input-group .input-group-addon {
  border-color: #2D5798 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* ---- 6. CHECKBOX vertical centring: align to the label's first text line
        rather than the whole (possibly wrapping) block. ---- */
#content input[type="checkbox"]:not(#transaction_fee_amount) {
  align-self: center !important;
  position: relative !important;
  top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#content .compList li .cntr > .span-block:has(> input[type="checkbox"]),
#content .dedication-list .span-block:has(> input[type="checkbox"]),
#content .section-contactinfo .span-block:has(> input[type="checkbox"]),
#content .span-block:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.35 !important;
}
#content input[type="checkbox"]:not(#transaction_fee_amount) + label,
#content input[type="checkbox"]:not(#transaction_fee_amount) + label.choice {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  align-self: center !important;
}

/* ---- 7. "Fields marked with an asterisk (*) are required." — quiet helper
        note instead of an alarming red line. Muted slate, smaller, with a
        subtle top rule so it reads as fine print, not an error. ---- */
#content .required-note,
#content .form-required-note,
#content p.required,
#content .item-form > p:last-child,
#content .section-formactions + p,
#content form.form-donate > p:last-of-type {
  color: #6B7A8D !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #EFF7FF !important;
  max-width: 640px;
}
/* the red asterisk itself stays meaningful on the field labels */
/* Scope the asterisk accent to LABEL text only — SBX also puts a `required`
   CLASS on the inputs themselves, so an unscoped rule turned everything the
   user typed orange. */
#content label .required, #content label .asterisk,
#content .section-header .required { color: #C2410C !important; }
#content input.required, #content select.required, #content textarea.required {
  color: #1B3A66 !important;   /* typed values stay normal ink */
}

/* ---- 8. MOBILE: tile padding + flush-right burger ---- */
@media (max-width: 767px) {
  /* the tab panes had zero side padding, so cards touched the screen edges */
  #content .section-tab .tab,
  #content .sbx-grid.fundraiser-grid,
  #content .sbx-grid.teams-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  #content .sbx-grid.fundraiser-grid,
  #content .sbx-grid.teams-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }
  #content .fundraiser-grid img, #content .teams-grid img { height: 190px !important; }
}

/* ---- (rc-17 addenda) Mobile burger flush to the shell's right edge.
   The button carries 10px of internal right padding, so its ICON sat ~26px
   from the viewport edge while the logo sat at 16px — visibly off-centre.
   Remove the right padding and pull the button flush. ---- */
@media (max-width: 1080px) {
  #rc-burger.rc-burger {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .rc-header__cta { gap: 10px !important; margin-right: 0 !important; }
}

/* (rc-17 addenda 2) On phones `.rc-shell` is 92vw (≈359px at 390), which
   centres the header row and leaves ~16px gutters — but the burger's own box
   made its icon land ~26px from the edge, reading as off-centre against the
   logo. Give the header shell explicit equal 16px gutters on mobile so the
   logo's left edge and the burger's right edge match exactly. */
@media (max-width: 1080px) {
  .rc-header .rc-header__inner.rc-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* (rc-17 addenda 3) The burger keeps a 44px tap target (accessibility), but its
   3 bars are inset inside that box, so the ICON looked ~9px further from the
   edge than the logo. Nudge the button right by that inset so the bars align
   optically with the logo's left edge, without shrinking the touch area. */
@media (max-width: 1080px) {
  #rc-burger.rc-burger {
    margin-right: -9px !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
  }
}

/* ====================================================================
   (rc-18) P2P tile panes: inset padding so tiles don't touch the box edge.
   Both `.tab` panes (#teams / #fundraisers) and their `.sbx-grid` children
   shipped with zero padding, so the first card sat 1px from the bounding
   box border. Give the pane real breathing room on all four sides.
   ==================================================================== */
#content .section-tab > .tab {
  padding: 24px !important;
  box-sizing: border-box !important;
}
/* the grid itself stays flush inside that padded pane */
#content .section-tab > .tab > .sbx-grid,
#content .sbx-grid.teams-grid,
#content .sbx-grid.fundraiser-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* search row shares the same inset as the tiles below it */
#content .section-tab > .tab > form,
#content .section-tab > .tab > .search { margin-bottom: 0 !important; }

@media (max-width: 767px) {
  #content .section-tab > .tab { padding: 16px !important; }
  /* rc-17 had put the gutters on the grid; keep them on the pane only so the
     inset isn't applied twice on phones */
  #content .sbx-grid.teams-grid,
  #content .sbx-grid.fundraiser-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ====================================================================
   (rc-19) Other-amount input: belt-and-braces border unification.
   The middle field must carry the SAME 2px blue top/bottom border as the
   `$` and `USD` caps so the trio reads as a single control. Base rule #14b
   re-applies `border: 1px solid rgb(205,211,218)` + `border-radius: 6px`
   to every donate-form input, so we restate here with the longhand
   `border-width`/`border-color`/`border-style` triplet — longhands beat a
   later shorthand at equal specificity, which shorthand-vs-shorthand does
   not reliably do.
   ==================================================================== */
#content .input-group input,
#content .input-group input.form-control,
#content .input-group input.custom-input,
#content form.form-donate .input-group input,
#content form.form-donate .input-group input.form-control,
#content .item-form .input-group input,
#content .item-form .input-group input.form-control,
#content .amount-group-notice .input-group input {
  border-style: solid !important;
  border-top-width: 2px !important;
  border-bottom-width: 2px !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-top-color: #2D5798 !important;
  border-bottom-color: #2D5798 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #fff !important;
}
/* focus keeps the same weight so the control never shifts */
#content .input-group input:focus,
#content form.form-donate .input-group input:focus {
  border-top-color: #1B3A66 !important;
  border-bottom-color: #1B3A66 !important;
  box-shadow: none !important;
}
/* caps: identical 2px blue on their three outer edges */
#content .input-group .input-group-addon {
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #2D5798 !important;
}
#content .input-group .input-group-addon:first-child { border-right-width: 0 !important; }
#content .input-group .input-group-addon:last-child  { border-left-width: 0 !important; }

/* ====================================================================
   (rc-20) Donate form spacing — measured fixes, client round 7.
     • checkbox rows sat 0px apart vertically
     • checkbox → label gap was 20px (too wide)
     • fee title sat 13px above its description, and the description was
       33px from the toggle and 7px off its vertical centre
   ==================================================================== */

/* ---- 1. Checkbox → label: tighten from 20px to a comfortable 10px ---- */
#content input[type="checkbox"]:not(#transaction_fee_amount) {
  margin: 0 !important;          /* the row's `gap` owns the spacing now */
  flex: 0 0 auto !important;
}
#content .span-block:has(> input[type="checkbox"]),
#content .compList li .cntr > .span-block:has(> input[type="checkbox"]),
#content .dedication-list .span-block:has(> input[type="checkbox"]),
#content .section-contactinfo .span-block:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ---- 2. Vertical rhythm between consecutive checkbox rows (was 0px) ---- */
#content .compList li.pad-nobot:has(input[type="checkbox"]),
#content .compList li.pad-notop:has(input[type="checkbox"]),
#content .compList li:has(> .cntr > .span-block > input[type="checkbox"]) {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
#content .span-block:has(> input[type="checkbox"]) { min-height: 28px !important; }

/* ---- 3. COVER THE TRANSACTION FEE: title / description / toggle rhythm ---- */
/* more air under the section title (was 13px) */
#content .section-fee { padding: 0 4px !important; margin: 22px 0 0 !important; }
#content .section-fee .section-header,
#content .section-fee h1, #content .section-fee h2,
#content .section-fee h3, #content .section-fee h4 {
  margin: 0 0 20px !important;   /* clear air between title and the toggle row */
  padding: 0 !important;
  line-height: 1.25 !important;
}
/* toggle + description on one properly centred row, closer together */
#content .section-fee-field { padding: 0 4px !important; margin: 0 !important; }
#content .section-fee-field .cntr,
#content .section-fee-field .span-block {
  display: flex !important;
  align-items: center !important;   /* true vertical centring with the switch */
  gap: 12px !important;             /* was a 33px gulf */
  margin: 0 !important;
}
#content .section-fee-field label,
#content .section-fee-field label.choice {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  align-self: center !important;
  max-width: 70ch;
}
#content input#transaction_fee_amount {
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}
/* the total band then sits clear of the fee row */
#content .section-total { margin-top: 20px !important; }

/* (rc-20 addenda) The "Fields marked with an asterisk (*) are required." line
   is `li.requiredtext > span#reqLine.req`, which none of the earlier selectors
   matched — hence it stayed pure red (#f00). Quiet it to fine print. */
#content .requiredtext,
#content li.requiredtext,
#content span#reqLine,
#content span.req,
#content #reqLine.req {
  color: #6B7A8D !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  list-style: none !important;
}
#content li.requiredtext {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #EFF7FF !important;
  max-width: 640px;
}

/* ====================================================================
   (rc-21) P2P TEAM / FUNDRAISER PAGE — modern hero + stats + member grid.
   Structure found on /donate/p2p/team/9:
     .sbx-grid.sbx-gutters.team-content
        .sbx-col.sbx-col-25.team-logo   > img.img-thumbnail   (hero/logo)
        .sbx-col.sbx-col-50.progress-bar> #fundraiser-progress (stats)
        .team-buttons                   > a.btn.btn-submit    (Join Team)
     member tiles: a 10-child .sbx-grid further down
   ==================================================================== */

/* ---- 3. HERO IMAGE: drop the bootstrap thumbnail frame, soften corners ---- */
#content .team-logo img,
#content .team-logo img.img-thumbnail,
#content img.img-thumbnail {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(27,58,102,0.08), 0 12px 30px rgba(27,58,102,0.10) !important;
  background: transparent !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}
/* the wide banner above gets the same rounded, lifted treatment */
#content .team-banner img,
#content .campaign-banner img,
#content .col-campaign-image img {
  border-radius: 18px !important;
  box-shadow: 0 4px 10px rgba(27,58,102,0.10), 0 20px 44px rgba(27,58,102,0.12) !important;
  display: block !important;
  width: 100% !important;
}

/* ---- 4. THE STATS ROW: turn the loose 3-column float into ONE card that
        holds logo · progress · CTA on a single aligned baseline. ---- */
/* NOTE: do NOT set display:grid / grid-template-columns here. `.team-content`
   is an SBX layout grid whose children carry .sbx-col-25 / .sbx-col-50 widths
   (footgun #52 — never redefine .sbx-grid). Style the CARD only; let SBX own
   the column geometry. */
#content .sbx-grid.team-content {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  margin: 22px 0 30px !important;
  box-shadow: 0 1px 3px rgba(27,58,102,0.05), 0 10px 28px rgba(27,58,102,0.06) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#content .sbx-grid.team-content > .sbx-col,
#content .sbx-grid.team-content > .team-logo,
#content .sbx-grid.team-content > .progress-bar,
#content .sbx-grid.team-content > .team-buttons {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
#content .team-logo { text-align: center !important; }
/* the caption under the logo */
#content .team-logo .caption,
#content .team-logo figcaption,
#content .team-logo > div:last-child {
  margin-top: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #5A6B80 !important;
}

/* ---- 2. PROGRESS: match the campaign page — taller track, rounded, blue ---- */
#content .fundraiser-progress { margin: 0 0 14px !important; }
#content progress#fundraiser-progress-bar,
#content progress.sbx-progress-bar {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #E7EEF7 !important;
  box-shadow: inset 0 1px 2px rgba(27,58,102,0.08) !important;
  overflow: hidden !important;
  display: block !important;
}
#content progress.sbx-progress-bar::-webkit-progress-bar {
  background: #E7EEF7 !important; border-radius: 999px !important;
}
#content progress.sbx-progress-bar::-webkit-progress-value {
  background: #2D5798 !important; border-radius: 999px !important;
}
#content progress.sbx-progress-bar::-moz-progress-bar {
  background: #2D5798 !important; border-radius: 999px !important;
}
/* stats typography: raised amount in BRAND BLUE (was off-brand green) */
#content .info-block .header.raised,
#content .progress-bar .raised,
#content .header.raised {
  color: #2D5798 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  display: block !important;
}
#content .info-block .desc,
#content .progress-bar .desc,
#content .info-block .goal {
  color: #5A6B80 !important;
  font-size: 15px !important;
  margin-top: 2px !important;
}
/* donor count column reads as a stat, not a stray number */
#content .info-block.sbx-grid {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
}
#content .info-block .sbx-col:last-child { text-align: right !important; }
#content .info-block .sbx-col:last-child .header {
  color: #1B3A66 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 30px !important;
}

/* Join Team CTA: pill, brand blue, invert on hover, no size jump */
#content .team-buttons { display: flex !important; gap: 10px !important; }
#content .team-buttons a.btn,
#content .team-buttons a.btn-primary,
#content .team-buttons a.btn.btn-primary.btn-submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  height: 50px !important;
  padding: 0 32px !important;
  background: #2D5798 !important; background-image: none !important;
  color: #fff !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-size: 16px !important; font-weight: 700 !important;
  text-decoration: none !important; box-shadow: none !important;
  white-space: nowrap !important;
}
#content .team-buttons a.btn:hover,
#content .team-buttons a.btn.btn-primary.btn-submit:hover {
  background: #fff !important; color: #2D5798 !important; border-color: #2D5798 !important;
}
#content .team-buttons a.btn:hover > span { color: #2D5798 !important; background: transparent !important; }

/* ---- 1. MEMBER TILES: card cosmetics only. SBX's own .sbx-grid handles the
        columns; we make the panels denser by capping their width so more fit
        per row, and give them the modern card treatment. ---- */
#content .sbx-panel {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 3px rgba(27,58,102,0.05), 0 6px 18px rgba(27,58,102,0.05) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#content .sbx-panel:hover {
  transform: translateY(-3px) !important;
  border-color: #BADEFF !important;
  box-shadow: 0 6px 14px rgba(27,58,102,0.10), 0 18px 40px rgba(27,58,102,0.12) !important;
}
/* denser: shrink the panel footprint so SBX fits more per row */
#content .sbx-panel.sbx-size_medium {
  max-width: 210px !important;   /* denser: fits 4 per row on desktop */
  min-width: 0 !important;
}
#content .sbx-panel img {
  width: 100% !important;
  height: 132px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  padding: 0 !important;
}

/* the stats card's own columns must never be carded by the member-tile rule */
#content .sbx-grid.team-content > .sbx-col,
#content .sbx-grid.team-content > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* ---- MOBILE ---- */
@media (max-width: 767px) {
  #content .sbx-grid.team-content {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px 16px !important;
    text-align: center !important;
  }
  #content .team-logo img { max-width: 190px !important; margin: 0 auto !important; }
  #content .team-buttons { justify-content: center !important; }
  #content .team-buttons a.btn { width: 100% !important; max-width: 320px !important; }
  #content .info-block.sbx-grid { justify-content: space-between !important; gap: 12px !important; }
  #content .sbx-grid:not(.team-content):not(.info-block) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 12px !important;
  }
  #content .sbx-grid:not(.team-content):not(.info-block):not(.sbx-gutters) > .sbx-panel img { height: 120px !important; }
}

/* ============================================================================
   rc-22 — EVENTS: event detail page + registration page.
   Targets /calendar/<event> (sbxEvents-event) and its registration step
   (sbxEvents-eventReg). Brings both onto the same design language already
   used by the donation and P2P pages: white cards, 2px blue edges, pill
   buttons, 48px controls, no grey slabs.
   ========================================================================= */

/* ---- 22a. WHEN / WHERE modules as paired cards --------------------------
   SBX gives both columns real semantic hooks that the first pass ignored:
     When  : .whendate > p.datestart > span.date + span.time
     Where : div.googleMap (float:left, 150px) + h4.title + p.address
             + p.directions
   The two cards are composed to a SHARED internal rhythm — eyebrow, then a
   Fraunces headline, then supporting lines, then a chip/CTA row pinned to the
   bottom — so they read as a matched pair rather than two unrelated blocks.
   -------------------------------------------------------------------- */
#content #sectWhenWhere-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;  /* equal-height pair. Letting them size to
      content produced a 104px step that read as broken alignment; the When
      card instead earns its height with a calendar tile (22a-js). */
  gap: 20px !important;
  margin: 4px 0 28px !important;
}
#content #sectWhenWhere-grid .compSectGrid-col {
  flex: 1 1 320px !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* NOTE: do NOT set display:flex on .compSectGrid-col — it is an SBX layout
   wrapper and flexing it collapses the card width (footgun #52). Height:100%
   on the wrappers is enough to let the card fill the stretched row. */
#content #sectWhenWhere-grid .compSectGrid-content {
  padding: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
#content #sectWhen-wrap,
#content #sectWhere-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(27, 58, 102, .06) !important;
  padding: 24px 26px !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* accent rail echoing the P2P card treatment */
#content #sectWhen-wrap::before,
#content #sectWhere-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 5px !important;
  background: #2D5798 !important;
}
/* shared eyebrow */
#content #sectWhen-title,
#content #sectWhere-title { flex: 0 0 auto !important; }
#content #sectWhen-title h3,
#content #sectWhere-title h3 {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #8494A8 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-weight: 700 !important;
  border: 0 none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* content columns fill the card so the chip/CTA row can pin to the bottom */
#content #sectWhen-contentwrap,
#content #sectWhere-contentwrap { flex: 1 1 auto !important; display: flex !important; }
#content #sectWhen-content,
#content #sectWhere-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  font-size: 16px !important;
  color: #33445C !important;
}

/* --- WHEN interior ---
   A 104px calendar tile (built by rc-events.js from the parsed date) sits in
   the same position as the Where card's 104px map, giving the pair matching
   visual anchors and letting the When card fill an equal-height row honestly
   instead of showing a void. */
#content #sectWhen-content .whendate {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  column-gap: 16px !important;
  align-items: start !important;
  margin: 0 !important;
}
#content #sectWhen-content .rc-caltile {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 104px !important;
  height: 104px !important;
  box-sizing: border-box !important;
  border: 1px solid #E3EBF5 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}
#content #sectWhen-content .rc-caltile__mon {
  width: 100% !important;
  padding: 5px 0 !important;
  background: #2D5798 !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
#content #sectWhen-content .rc-caltile__day {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #1B3A66 !important;
}
#content #sectWhen-content p.datestart { grid-column: 2 !important; margin: 0 !important; min-width: 0 !important; }
#content #sectWhen-content span.date {
  display: block !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: #1B3A66 !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}
#content #sectWhen-content span.time {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 14px !important;
  background: #F1F6FC !important;
  border-radius: 999px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #2D5798 !important;
}
/* the "Add to …" chip row pins to the bottom of the card */
#content #sectWhen-content .compContentBar-wrap {
  margin-top: auto !important;
  padding-top: 18px !important;
  border-top: 1px solid #EDF2F8 !important;   /* matched footer band, so the
      shorter When card's empty middle reads as breathing room, not a gap */
}
#content #sectWhen-content ul.ccbmenu { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#content #sectWhen-content ul.ccbmenu li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#content #sectWhen-content ul.ccbmenu li > span {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #8494A8 !important;
}
#content #sectWhen-content ul.ccbmenu a {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1.5px solid #DCE6F2 !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2D5798 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
}
#content #sectWhen-content ul.ccbmenu a:hover {
  background: #2D5798 !important;
  border-color: #2D5798 !important;
  color: #fff !important;
}

/* --- WHERE interior --- */
/* un-float the 150px map and set it beside the venue text as a real row */
#content #sectWhere-content .googleMap {
  float: none !important;
  margin: 0 16px 0 0 !important;
  border: 0 none !important;
  flex: 0 0 auto !important;
}
#content #sectWhere-content .googleMap #map-canvas,
#content #sectWhere-content .googleMap img#event_map {
  display: block !important;
  width: 104px !important;
  height: 104px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #E3EBF5 !important;
  box-sizing: border-box !important;
}
/* Map sits left; venue name + address form one text column beside it. Using
   a CSS grid here (rather than the earlier 144px left-margin hack, which left
   a dead gap under the map) so the address tucks directly under the venue
   name and both stay flush against the map. */
#content #sectWhere-content {
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  grid-template-rows: auto auto 1fr !important;
  align-items: start !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
}
#content #sectWhere-content h4.title {
  grid-column: 2 !important; grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 0 8px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #1B3A66 !important;
  font-weight: 600 !important;
}
#content #sectWhere-content .googleMap { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
#content #sectWhere-content p.address {
  grid-column: 2 !important; grid-row: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #5A6B80 !important;
}
#content #sectWhere-content p.address a.website {
  display: inline-block !important;
  margin-top: 6px !important;
  color: #2D5798 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 0 none !important;
}
#content #sectWhere-content p.address a.website:hover { color: #1B3A66 !important; }
/* "Get Directions »" becomes the bottom-pinned CTA, mirroring the chip row */
#content #sectWhere-content p.directions {
  grid-column: 1 / -1 !important; grid-row: 3 !important;
  align-self: end !important;
  margin: 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid #EDF2F8 !important;
}
#content #sectWhere-content p.directions a {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  border: 1.5px solid #DCE6F2 !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #2D5798 !important;
  text-decoration: none !important;
  border-bottom-width: 1.5px !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
}
#content #sectWhere-content p.directions a:hover {
  background: #2D5798 !important;
  border-color: #2D5798 !important;
  color: #fff !important;
}

/* ---- 22b. Event Registration ticket table ------------------------------- */
#content .eventRegistration,
#content .eventTickets {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 14px rgba(27, 58, 102, .07) !important;
  padding: 24px 26px 26px !important;
  margin: 0 0 28px !important;
}
#content #sectTickets-title h3 {
  margin: 0 0 6px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 26px !important;
  color: #1B3A66 !important;
  border: 0 none !important;
  padding: 0 !important;
}
#content #ticketsTable, #content #ticketsTableContent { overflow-x: auto !important; }
#content table.tickets-tbl,
#content table.resultsTBL {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 none !important;
  margin: 14px 0 0 !important;
}
/* header row: quiet uppercase, no heavy rule */
#content table.tickets-tbl thead th,
#content table.resultsTBL thead th {
  background: transparent !important;
  border: 0 none !important;
  border-bottom: 2px solid #E7EEF7 !important;
  padding: 0 16px 12px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  text-align: left !important;
}
#content table.tickets-tbl thead th.ticketPrice,
#content table.resultsTBL thead th.ticketPrice,
#content table.tickets-tbl thead th:last-child,
#content table.resultsTBL thead th:last-child { text-align: right !important; }
/* body rows: generous padding, hairline separators, zebra removed */
#content table.tickets-tbl tbody td,
#content table.resultsTBL tbody td {
  background: transparent !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  padding: 18px 16px !important;
  vertical-align: middle !important;
  font-size: 15px !important;
  color: #33445C !important;
}
#content table.tickets-tbl tbody tr:last-child td,
#content table.resultsTBL tbody tr:last-child td { border-bottom: 0 none !important; }
#content table.tickets-tbl tbody tr.row0 td,
#content table.tickets-tbl tbody tr.row1 td,
#content table.resultsTBL tbody tr.row0 td,
#content table.resultsTBL tbody tr.row1 td { background: transparent !important; }
#content table.tickets-tbl tbody tr:hover td,
#content table.resultsTBL tbody tr:hover td { background: #F6F9FD !important; }
/* ticket name + description hierarchy */
#content table.tickets-tbl td.ticketType strong,
#content table.resultsTBL td.ticketType strong {
  display: block !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
  margin-bottom: 3px !important;
}
#content table.tickets-tbl td.ticketType div,
#content table.resultsTBL td.ticketType div {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #6B7A8D !important;
}
/* price column: tabular, brand blue, right-aligned */
#content table.tickets-tbl td.ticketPrice,
#content table.resultsTBL td.ticketPrice,
#content table.tickets-tbl td.ticketTotal,
#content table.resultsTBL td.ticketTotal {
  text-align: right !important;
  white-space: nowrap !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
}
/* qty selects on the registration table — compact, matches other controls */
#content table.tickets-tbl td select:not([name*="attendee"]),
#content table.resultsTBL td select:not([name*="attendee"]),
#content td.ticketQty select {
  width: 88px !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 10px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content table.tickets-tbl td select:focus,
#content table.resultsTBL td select:focus { border-color: #2D5798 !important; outline: none !important; }
/* members-only login note */
/* Members-only notice. span.msg and a.login-prompt are SIBLINGS inside
   #ticketsTableContent (which also holds the table), so the parent cannot be
   boxed. Instead the msg is an inline-block strip and the trailing Login link
   is pulled onto the same line beside it. */
#content .eventRegistration span.msg,
#content .eventTickets span.msg {
  display: inline !important;
  font-size: 14px !important;
  color: #33445C !important;
  background: transparent !important;
  border: 0 none !important;
  padding: 0 !important;
}
#content #ticketsTableContent > span.msg {
  display: inline-block !important;
  margin: 16px 0 0 !important;
  padding: 12px 16px 12px 16px !important;
  background: #F1F6FC !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 12px 0 0 12px !important;
  border-right: 0 none !important;
  vertical-align: middle !important;
}
#content #ticketsTableContent > span.msg + a.login-prompt {
  display: inline-block !important;
  margin: 16px 0 0 !important;
  padding: 12px 18px 12px 6px !important;
  background: #F1F6FC !important;
  border: 1px solid #DCE6F2 !important;
  border-left: 0 none !important;
  border-radius: 0 12px 12px 0 !important;
  vertical-align: middle !important;
  color: #2D5798 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
#content #ticketsTableContent > span.msg + a.login-prompt:hover { color: #1B3A66 !important; }
#content .eventRegistration a.login-prompt,
#content .eventTickets a.login-prompt {
  color: #2D5798 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 0 none !important;
}
/* table footer (additional donation / apply code) */
#content #ticket-footer.resultsTBL-foot {
  background: #F6F9FD !important;
  border: 1px solid #E7EEF7 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-top: 16px !important;
}

/* ---- 22c. Event buttons: Begin Registration / Manage My Tickets --------- */
#content #sectBtns-formUL.compList-btns { margin: 20px 0 0 !important; padding: 0 !important; }
#content #sectBtns-formUL li.buttons { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#content #sectBtns-formUL form { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; }
/* shared pill geometry for BOTH event buttons */
#content button#btnRegister,
#content button#btnManageMyTickets,
#content #sectBtns-formUL button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  padding: 0 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #2D5798 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content button#btnRegister > span,
#content button#btnManageMyTickets > span,
#content #sectBtns-formUL button.button > span {
  background: transparent !important;
  border: 0 none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  font: inherit !important;
  box-shadow: none !important;
}
/* primary = filled */
#content button#btnRegister { background-color: #2D5798 !important; color: #fff !important; }
#content button#btnRegister:hover { background-color: #fff !important; color: #2D5798 !important; }
/* secondary = outline, same size/shape (fixes the raw grey browser button) */
#content button#btnManageMyTickets {
  background-color: #fff !important;
  color: #2D5798 !important;
}
#content button#btnManageMyTickets:hover { background-color: #2D5798 !important; color: #fff !important; }

/* ---- 22d. Registration page: Orderer Information ------------------------ */
#content .eventContactInfo {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 14px rgba(27, 58, 102, .07) !important;
  padding: 24px 26px 8px !important;
  margin: 0 0 24px !important;
}
#content #sectContactInfo-title h3,
#content #sectBilling-title h3 {
  margin: 0 0 4px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 26px !important;
  color: #1B3A66 !important;
  border: 0 none !important;
  padding: 0 !important;
}
/* two-column responsive field grid */
#content #sectContactInfo-formUL.compList-formVert {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 20px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#content #sectContactInfo-formUL > li {
  flex: 1 1 100% !important;
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
#content #sectContactInfo-formUL > li.liClear { display: none !important; }
/* Email + Phone share a row */
#content #sectContactInfo-formUL > li:nth-child(2),
#content #sectContactInfo-formUL > li.leftHalf { flex: 1 1 calc(50% - 10px) !important; }
#content #sectContactInfo-formUL > li label.desc {
  display: block !important;
  margin: 0 0 7px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
/* Name splits into two equal halves */
#content #sectContactInfo-formUL > li:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 20px !important;
}
#content #sectContactInfo-formUL > li:first-child > label.desc { flex: 1 1 100% !important; }
#content #sectContactInfo-formUL > li:first-child > span.span-block {
  flex: 1 1 calc(50% - 10px) !important;
  display: block !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}
/* every text control in the orderer block gets the shared 48px treatment */
#content .eventContactInfo input.field,
#content .eventContactInfo input.text,
#content .eventContactInfo input[type="text"],
#content .eventContactInfo input[type="email"],
#content .eventContactInfo input[type="tel"],
#content .eventContactInfo select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
#content .eventContactInfo input:focus,
#content .eventContactInfo select:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
/* sub-labels ("First" / "Last") sit under the field, quiet */
#content .eventContactInfo span.span-block label,
#content .eventContactInfo .cntr label,
#content .eventContactInfo label.sub {
  display: block !important;
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6B7A8D !important;
}
#content .eventContactInfo .req,
#content .eventContactInfo .required { color: #C2543E !important; }

/* ---- 22e. Registration page: Billing Information ------------------------ */
/* kill the grey slab; make it a white card like the donation payment block */
#content #sectBilling-wrap.compSect-payment,
#content .compSect-wrap.compSect-payment {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 14px rgba(27, 58, 102, .07) !important;
  padding: 24px 26px 10px !important;
  margin: 0 0 24px !important;
}
#content #sectBilling-title.compSect-title { border: 0 none !important; padding: 0 !important; margin: 0 0 6px !important; }
#content #sectBilling-title .compSect-titleC { float: none !important; width: auto !important; }
#content #sectBilling-title p.desc {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  color: #6B7A8D !important;
}
#content #sectBilling-title img.payment-lock { display: none !important; }
#content img.payment-ssl { display: none !important; }
/* rows: label left, controls right — hairline separated, no slab */
#content #sectBilling-horzUL.compList-payment { margin: 12px 0 0 !important; padding: 0 !important; }
#content #sectBilling-horzUL > li {
  list-style: none !important;
  background: transparent !important;
  border: 0 none !important;
  border-top: 1px solid #EDF2F8 !important;
  padding: 22px 0 !important;
  margin: 0 !important;
}
#content #sectBilling-horzUL > li:first-child { border-top: 0 none !important; padding-top: 8px !important; }
#content #sectBilling-horzUL > li .cntr-label {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content #sectBilling-horzUL > li .cntr-label .desc,
#content #sectBilling-horzUL > li .cntr-label p {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #6B7A8D !important;
}
/* every control inside billing gets the shared 48px pill-radius treatment */
#content .compSect-payment input.field,
#content .compSect-payment input.text,
#content .compSect-payment input[type="text"],
#content .compSect-payment select {
  height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content .compSect-payment input:focus,
#content .compSect-payment select:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
#content .compSect-payment .cntr label,
#content .compSect-payment span.span-block > label:not(.choice) {
  display: block !important;
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6B7A8D !important;
}
/* Stripe Element (#card-element) — SBX renders the card number / expiry / CVC
   as a bare Stripe iframe with no chrome, so it must be boxed manually to
   match the sibling text inputs. */
#content .compSect-payment #card-element,
#content .compSect-payment .StripeElement {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 14px !important;
  margin-top: 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
#content .compSect-payment .StripeElement--focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
}
#content .compSect-payment .StripeElement--invalid { border-color: #C2543E !important; }
#content .compSect-payment #card-errors {
  margin-top: 8px !important;
  font-size: 13.5px !important;
  color: #C2543E !important;
}
/* the two name halves sit side by side above the card element. Flex on the
   container (not width math on the spans) — inline-block + calc overflowed
   and stacked them. #card-element is a full-width flex sibling below. */
#content #sectCC .cntr {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 16px !important;
}
#content #sectCC .cntr > span.span-block {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 !important;
}
#content #sectCC .cntr > #card-element,
#content #sectCC .cntr > #card-errors { flex: 1 1 100% !important; }

/* ---- payment-method tiles: same pattern as the donation page.
       Events markup differs from donations: here it is
       .sbxPayType > span.span-block > label.choice(img) + input.radio
       (no .paytype-* class), so it needs its own selector. ---- */
#content .sbxPayType { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
#content .sbxPayType > span.span-block {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
#content .sbxPayType input.radio,
#content .sbxPayType input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important; margin: 0 !important;
}
#content .sbxPayType label.choice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
#content .sbxPayType label.choice img {
  display: block !important;
  max-height: 30px !important;
  width: auto !important;
  border: 0 none !important;
  border-radius: 3px !important;
}
#content .sbxPayType label.choice:hover {
  border-color: #2D5798 !important;
  box-shadow: 0 3px 10px rgba(27, 58, 102, .12) !important;
  transform: translateY(-1px) !important;
}
#content .sbxPayType > span.span-block:has(input:checked) label.choice {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .16) !important;
}
/* checked tick badge */
#content .sbxPayType > span.span-block:has(input:checked)::after {
  content: "" !important;
  position: absolute !important;
  top: -6px !important; right: -6px !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: #2D5798 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat !important;
  box-shadow: 0 0 0 2px #fff !important;
}
/* the offline "cash or check" fallback panel */
#content .eventBilling.offline {
  background: #F6F9FD !important;
  border: 1px solid #E7EEF7 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin: 0 0 24px !important;
  font-size: 15px !important;
  color: #33445C !important;
}
/* P2P opt-in row + submit block on the registration page */
#content #sectP2P-wrap { margin: 4px 0 22px !important; }
#content #sectP2P-content { display: flex !important; align-items: center !important; gap: 10px !important; }
#content #sectBtns-wrap.compSectBtns-wrap ul.compList-btns { margin: 0 !important; padding: 0 !important; }
#content #sectBtns-wrap li.buttons { list-style: none !important; margin: 0 0 12px !important; padding: 0 !important; }
#content li.requiredtext, #content li.requiredtext span#reqLine {
  list-style: none !important;
  color: #6B7A8D !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* ---- 22f. Events MOBILE (390px portrait) -------------------------------- */
@media (max-width: 767px) {
  #content #sectWhenWhere-grid { gap: 14px !important; align-items: start !important; }
  #content #sectWhenWhere-grid .compSectGrid-col { flex: 1 1 100% !important; }
  #content #sectWhenWhere-grid .compSectGrid-content { height: auto !important; }
  #content #sectWhen-wrap, #content #sectWhere-wrap { height: auto !important; padding: 18px 18px 20px !important; }
  /* keep the anchor tile beside the text (not stacked) — at 390px a 104px
     square plus the headline still fits, and stacking wasted vertical space */
  #content #sectWhen-content .whendate,
  #content #sectWhere-content { grid-template-columns: 88px 1fr !important; column-gap: 14px !important; }
  #content #sectWhen-content .rc-caltile { width: 88px !important; height: 88px !important; }
  #content #sectWhen-content .rc-caltile__day { font-size: 32px !important; }
  #content #sectWhere-content .googleMap #map-canvas,
  #content #sectWhere-content .googleMap img#event_map { width: 88px !important; height: 88px !important; }
  #content #sectWhen-content span.date,
  #content #sectWhere-content h4.title { font-size: 20px !important; }
  #content #sectWhen-content ul.ccbmenu li > span { gap: 6px !important; }
  #content .eventRegistration, #content .eventTickets,
  #content .eventContactInfo,
  #content #sectBilling-wrap.compSect-payment,
  #content .compSect-wrap.compSect-payment { padding: 18px 16px !important; border-radius: 14px !important; }
  #content #sectTickets-title h3,
  #content #sectContactInfo-title h3,
  #content #sectBilling-title h3 { font-size: 22px !important; }
  /* ticket table: tighter gutters, description wraps */
  #content table.tickets-tbl thead th,
  #content table.resultsTBL thead th { padding: 0 8px 10px !important; font-size: 11px !important; }
  #content table.tickets-tbl tbody td,
  #content table.resultsTBL tbody td { padding: 14px 8px !important; }
  #content table.tickets-tbl td.ticketType strong,
  #content table.resultsTBL td.ticketType strong { font-size: 15px !important; }
  #content table.tickets-tbl td.ticketType div,
  #content table.resultsTBL td.ticketType div { font-size: 13px !important; }
  #content table.tickets-tbl td select:not([name*="attendee"]),
  #content table.resultsTBL td select:not([name*="attendee"]) { width: 68px !important; height: 42px !important; padding: 0 6px !important; }
  /* attendee dropdowns go full width at mobile rather than being clamped */
  #content select.household-select,
  #content .cntr > select.field.select,
  #content select[name*="attendee"] { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }
  /* the registration table gains QTY + TOTAL columns, which clip at 390px.
     Let the wrapper scroll horizontally rather than squeezing the columns. */
  #content #ticketsTable, #content #ticketsTableContent {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #content #ticketsTableContent > div:has(> table) { min-width: 0 !important; }
  #content table.tickets-tbl, #content table.resultsTBL { min-width: 100% !important; }
  #content table.tickets-tbl td.ticketPrice,
  #content table.resultsTBL td.ticketPrice,
  #content table.tickets-tbl td.ticketTotal,
  #content table.resultsTBL td.ticketTotal,
  #content table.tickets-tbl thead th.ticketPrice,
  #content table.resultsTBL thead th:last-child { padding-right: 4px !important; font-size: 14px !important; }
  /* access-code row stacks so Apply Code is not cramped */
  #content #ticket-footer.resultsTBL-foot { padding: 14px !important; }
  /* notice strip: at 390px the msg wraps and the split pill halves look
     broken, so render msg + Login as one full-width stacked block. */
  #content #ticketsTableContent > span.msg {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px 12px 0 0 !important;
    border-right: 1px solid #DCE6F2 !important;
    border-bottom: 0 none !important;
    padding: 12px 14px 8px !important;
  }
  #content #ticketsTableContent > span.msg + a.login-prompt {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 4px !important;
    border-left: 1px solid #DCE6F2 !important;
    border-top: 0 none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0 14px 12px !important;
  }
  /* buttons stack full-width */
  #content #sectBtns-formUL form { flex-direction: column !important; align-items: stretch !important; }
  #content button#btnRegister,
  #content button#btnManageMyTickets,
  #content #sectBtns-formUL button.button { width: 100% !important; height: 50px !important; padding: 0 20px !important; }
  /* orderer fields all stack */
  #content #sectContactInfo-formUL > li,
  #content #sectContactInfo-formUL > li.leftHalf,
  #content #sectContactInfo-formUL > li:nth-child(2),
  #content #sectContactInfo-formUL > li:first-child > span.span-block { flex: 1 1 100% !important; }
  #content #sectContactInfo-formUL > li:first-child > span.span-block { margin-bottom: 14px !important; }
  #content #sectContactInfo-formUL > li:first-child > span.span-block:last-child { margin-bottom: 0 !important; }
  /* billing rows stack label above controls */
  #content #sectBilling-horzUL > li { padding: 18px 0 !important; }
  #content #sectBilling-horzUL > li .cntr-label,
  #content #sectBilling-horzUL > li .cntr { display: block !important; width: 100% !important; float: none !important; margin-left: 0 !important; }
  #content #sectBilling-horzUL > li .cntr { margin-top: 12px !important; }
  #content .sbxPayType label.choice { min-width: 72px !important; height: 50px !important; }
  #content .sbxPayType label.choice img { max-height: 26px !important; }
}

/* ============================================================================
   rc-23 — CLASSES app: /classes/search and /classes/search/event/<id>.
   Supersedes the earlier ad-hoc classes rules (~line 1300): those set the
   table card + a status badge, but left the filter checkboxes stacked, the
   table type oversized, and the course image unconstrained.
   ========================================================================= */

/* ---- 23a. Filter sidebar checkboxes ------------------------------------
   Markup is a flat run of siblings inside .controls-dow:
     <input type="checkbox" id="dow0"><label for="dow0">MO</label>
     <input type="checkbox" id="dow1"><label for="dow1">TU</label> …
   with no per-item wrapper. Both input and label computed display:block, so
   every label fell UNDER its box. The global Material checkbox (22px, 6px
   radius, animated tick) already applies — this only fixes the pairing, so
   these read exactly like the donate-page checkboxes. ---- */
/* ROOT CAUSE: the Classes app ships its own search-template.css containing
     input[type="checkbox"] { position:absolute; float:left; opacity:0;
                              width:10px; height:10px; display:block }
   i.e. it HIDES the native box and expects the label to draw the control.
   Our global Material checkbox re-showed the box but inherited that
   `position:absolute`, so every box was out of flow and painted on top of its
   own label text ("MO" with a square through the M).
   Fix: force these back into normal flow (position:static) and lay the run out
   as a wrapping flex row — box, then label, two pairs per row.
   Specificity note: the rc-20 rule
   `#content input[type="checkbox"]:not(#…) + label { display:block; padding:0 }`
   outranks a plain `.controls-dow label`, so the :not() shape is mirrored. */
#content .controls-dow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 6px 0 2px !important;
  padding: 0 !important;
}
#content .controls-dow input[type="checkbox"]:not(#transaction_fee_amount) {
  position: static !important;   /* ← the actual fix: undo search-template.css */
  float: none !important;
  opacity: 1 !important;
  display: block !important;
  flex: 0 0 22px !important;
  order: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 10px 14px 0 !important;
  top: auto !important;
  left: auto !important;
}
/* search-template.css ALSO paints a sprite checkbox on the label itself:
     input[type="checkbox"] + label { background:url(../images/off.png) left 0
                                      no-repeat; padding-left:20px }
   (and an on.png variant when checked). That sprite is the second little box
   that sat over the text. Strip the background so only our real Material
   checkbox is drawn. */
#content .controls-dow input[type="checkbox"]:not(#transaction_fee_amount) + label,
#content .controls-dow label,
#content .controls input[type="checkbox"] + label,
#content .control-group input[type="checkbox"] + label {
  background: none !important;
  background-image: none !important;
}
#content .controls-dow input[type="checkbox"]:not(#transaction_fee_amount) + label,
#content .controls-dow label {
  flex: 0 0 calc(50% - 32px) !important;
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  color: #33445C !important;
  cursor: pointer !important;
  letter-spacing: .02em !important;
}

/* other filter checkbox groups in the sidebar follow the same pairing */
#content .controls:not(.controls-dow) > input[type="checkbox"] {
  position: static !important;   /* same search-template.css override */
  float: none !important;
  opacity: 1 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle !important;
  margin: 0 10px 0 0 !important;
}
#content .controls:not(.controls-dow) > input[type="checkbox"] + label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #33445C !important;
  cursor: pointer !important;
}
/* sidebar field labels + controls rhythm */
#content .control-group > label,
#content label.control-label {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}
#content .control-group { margin-bottom: 18px !important; }

/* ---- 23b. Search-result table: smaller, cleaner type -------------------- */
#content table.search-result td,
#content table.search-result th {
  padding: 13px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}
#content table.search-result .element-data { line-height: 1.45 !important; }
/* course title: the anchor of each row, but no longer oversized */
#content .element-data.title {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1B3A66 !important;
  margin-bottom: 2px !important;
}
#content .element-data.class-code {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5E7100 !important;
  margin-bottom: 2px !important;
}
#content .element-data.instructors { font-size: 13px !important; color: #6B7A8D !important; }
#content .element-data.date {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content .element-data.time { font-size: 13.5px !important; font-weight: 600 !important; color: #33445C !important; }
#content .element-data.repeat {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  color: #6B7A8D !important;
}
#content .element-data.location { font-size: 13px !important; color: #6B7A8D !important; }
/* status → real pill, with the availability line demoted beneath it */
#content .element-data.status {
  display: inline-block !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  background: #EFF3F8 !important;
  color: #5A6B80 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
}
/* open/available classes read as brand blue rather than neutral grey */
#content td.elements-col-status .element-data.status:not(:empty) { white-space: nowrap !important; }
#content .element-data.quantity-available {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: #8494A8 !important;
  font-weight: 500 !important;
}
/* Details button: compact pill matching the rest of the system */
#content table.search-result a.btnDetails,
#content a.btn.btnDetails {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 2px solid #2D5798 !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}
#content table.search-result a.btnDetails:hover,
#content a.btn.btnDetails:hover { background: #fff !important; color: #2D5798 !important; }

/* ---- 23c. Class detail page: course image ------------------------------
   SBX renders <h2 class="contentheading"><img class="course-image" …>Title</h2>
   with a 1024x1024 source and no sizing, so the raw image rendered at full
   1024px, pushed the heading off to one side and swamped the page. Constrain
   it to a proper banner and put the heading back on its own line. ---- */
#content h2.contentheading:has(img.course-image) {
  display: block !important;
  margin: 0 0 20px !important;
}
#content img.course-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center 28% !important;  /* square art crops better slightly
      above centre — dead-centre landed on the busiest part of the image */
  margin: 0 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid #E3EBF5 !important;
  box-shadow: 0 2px 12px rgba(27, 58, 102, .08) !important;
  box-sizing: border-box !important;
  float: none !important;
}
/* day-of-week badge under the title. Real class is
   span.badge.sectRepeatDates-days (a bare grey Bootstrap badge by default). */
#content .element-data.repeat,
#content span.badge.sectRepeatDates-days,
#content .sectRepeatDates-days {
  display: inline-block !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: #EFF3F8 !important;
  color: #5A6B80 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}
/* instructor list: real markup is ul.sectInstructors > li.sectInstructors-content
   > img.instructor-image + span.instructor-name. Drop the stray bullet and
   set the headshot beside the name. */
#content ul.sectInstructors,
#content ul.inline-block.sectInstructors {
  list-style: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
#content ul.sectInstructors li.sectInstructors-content { list-style: none !important; }
#content li.sectInstructors-content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #33445C !important;
}
#content li.sectInstructors-content span.instructor-name { color: #1B3A66 !important; }
/* section headings above the badge/date/instructor cluster */
#content .sectRepeatDates-days + *, #content .sectRepeatDates-wrap { margin-top: 6px !important; }

/* instructor headshots: round, consistent */
#content img.instructor-image {
  width: 88px !important;
  height: 88px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 1px solid #E3EBF5 !important;
  box-shadow: none !important;
}

/* ---- 23d. Kill the inner scrollbar on the registration table -----------
   SBX core gives #ticketsTable / #ticketsTableContent a fixed height with
   overflow:auto, so a 180px table was clipped into a 153px box with its own
   scrollbar (the "Ticket sales have ended" note was hidden below the fold).
   The table must always render at full height and let the PAGE scroll.
   NOTE: this also overrides the overflow-x:auto set in rc-22b; the mobile
   block below restores horizontal scrolling only where it is needed. ---- */
#content #ticketsTable.compResTbl-wrap,
#content #ticketsTableContent.compResTbl-content,
#content .compResTbl-wrap,
#content .compResTbl-content {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#content #ticketsTableContent > div { height: auto !important; max-height: none !important; overflow: visible !important; }

/* Class detail pages reuse the event When/Where cards but have no "Add to
   calendar" links, leaving an empty footer band with a stray divider. Hide
   the band when its menu has no links. */
#content #sectWhen-content .compContentBar-wrap:not(:has(a)) {
  display: none !important;
  border-top: 0 none !important;
  padding-top: 0 !important;
}

/* ---- 23e. Classes MOBILE (390px portrait) ------------------------------ */
@media (max-width: 767px) {
  #content .controls-dow {
    grid-template-columns: 22px 1fr 22px 1fr !important;
    gap: 12px 8px !important;
  }
  #content .controls-dow label { font-size: 13px !important; }
  #content table.search-result td,
  #content table.search-result th { padding: 11px 10px !important; font-size: 13px !important; }
  #content .element-data.title { font-size: 14px !important; }
  #content table.search-result a.btnDetails,
  #content a.btn.btnDetails { height: 36px !important; padding: 0 16px !important; font-size: 13px !important; }
  #content img.course-image { height: 180px !important; border-radius: 14px !important; }
  #content img.instructor-image { width: 72px !important; height: 72px !important; }
  /* the registration table still must not scroll inside itself; at 390px the
     WRAPPER may scroll horizontally, but never with a clipped height. */
  #content #ticketsTable.compResTbl-wrap,
  #content #ticketsTableContent.compResTbl-content {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================================================
   rc-24 — Classes filters/buttons, Events polish, Shop, Login.
   ========================================================================= */

/* ---- 24a. Filter sidebar headings: one consistent style -----------------
   All filter headings are `label.desc` inside .control-group (my rc-23 rule
   targeted `.control-group > label`, which never matched because SBX wraps
   them in a .control-label div). "Department" now matches every other one. */
#content .control-group label.desc,
#content .control-label label.desc,
#content .control-group > .control-label > label {
  display: block !important;
  margin: 0 0 7px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  line-height: 1.3 !important;
}

/* ---- 24b. Department (and other non-day) filter checkboxes --------------
   Markup is a flat `.controls` div: input, label, <br>, input, label…
   Same search-template.css traps as the day boxes (position:absolute on the
   input, off.png sprite on the label). Centre each box with its label and
   tighten the row spacing. */
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) {
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 10px 0 0 !important;
  vertical-align: middle !important;   /* centre-align box with its label */
  top: auto !important;
  left: auto !important;
}
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) + label,
#content .controls:not(.controls-dow) > label {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;   /* kill the off.png sprite */
  vertical-align: middle !important;
  line-height: 22px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #33445C !important;
  cursor: pointer !important;
}
/* the <br> separators create huge gaps — collapse them and use tight margins */
#content .controls:not(.controls-dow) > br { display: none !important; }
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) {
  margin-top: 8px !important;
}
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount):first-child {
  margin-top: 0 !important;
}
/* each box+label pair occupies its own line, 8px apart (was ~24px via <br>) */
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) + label::after {
  content: "" !important;
  display: block !important;
  height: 0 !important;
}
#content .controls:not(.controls-dow) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) { flex: 0 0 22px !important; }
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount) + label {
  flex: 0 0 calc(100% - 32px) !important;
  margin-top: 8px !important;
}
#content .controls:not(.controls-dow) > input[type="checkbox"]:not(#transaction_fee_amount):first-child + label { margin-top: 0 !important; }

/* ---- 24c. Details button = same size as Search --------------------------
   An earlier generic `.btn` rule (longer selector chain) was setting 15px 40px
   padding, making Details 68px tall against Search's 44px. Match Search. */
#content table.search-result a.btn.btnDetails,
#content table.search-result a.btnDetails,
#content a.btn.btnDetails,
#content .search-result .btn.btnDetails {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;   /* 2px borders were pushing 44 -> 48 */
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 24px !important;
  line-height: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 2px solid #2D5798 !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ---- 24d. Search / Share / Details share ONE hover: invert to white ------
   Matches the donation-page submit behaviour (white bg, blue text, blue
   border) rather than each control inventing its own. */
#content input.s-button:hover,
#content input.s-button:focus,
#content .s-button:hover,
#content a.btn.btnDetails:hover,
#content table.search-result a.btn.btnDetails:hover,
#content table.search-result a.btnDetails:hover,
#content .btnShare:hover,
#content a.btnShare:hover,
#content button.btnShare:hover {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border-color: #2D5798 !important;
  box-shadow: none !important;
}
#content input.s-button:hover > span,
#content a.btn.btnDetails:hover > span,
#content .btnShare:hover > span { color: #2D5798 !important; }

/* ---- 24e. Venue Name typeahead pills ------------------------------------
   bootstrap-tagsinput renders span.tag as a grey square that overlapped the
   input. Make them light-blue pills that sit cleanly BELOW the field. */
/* [superseded by rc-25d] this rule set flex-wrap:wrap; combined with
   rc-25d's flex-direction:column it produced a WRAPPING COLUMN, so chips
   overflowed into a second column and the first one painted inside the
   field. rc-25d below is the single source of truth for this wrapper. */
#content .bootstrap-tagsinput .twitter-typeahead { display: block !important; width: 100% !important; }
/* tt-hint is typeahead's absolutely-positioned ghost input that renders the
   inline autocomplete suggestion. It must NOT be treated as a second field
   (doing so stacked two boxes and collapsed the wrapper to 0 height) — it
   only needs to match the real input's metrics, keeping its own positioning. */
#content .bootstrap-tagsinput input.tt-hint {
  box-sizing: border-box !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 15px !important;
  color: #A9B6C6 !important;
}
#content .bootstrap-tagsinput input.tt-input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  color: #1B3A66 !important;
}
#content .bootstrap-tagsinput input.tt-input:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
/* selected venue chips: pushed to their own row under the input */
#content .bootstrap-tagsinput span.tag,
#content .bootstrap-tagsinput .tag.label {
  text-transform: none !important;   /* the .label class inherits the sidebar
      heading's uppercase treatment — venue names must read normally */
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  order: 2 !important;
  float: none !important;
  margin: 10px 8px 0 0 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;     /* light shade of the brand blue */
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
  vertical-align: middle !important;
}
/* the typeahead takes the whole first row so any selected chips are FORCED to
   wrap onto their own row beneath the field rather than sitting beside it. */
#content .bootstrap-tagsinput .twitter-typeahead {
  order: 1 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
#content .bootstrap-tagsinput span.tag { flex: 0 0 auto !important; }
#content .bootstrap-tagsinput span.tag [data-role="remove"] {
  cursor: pointer !important;
  opacity: .55 !important;
  font-weight: 700 !important;
}
#content .bootstrap-tagsinput span.tag [data-role="remove"]:hover { opacity: 1 !important; }
#content .bootstrap-tagsinput span.tag [data-role="remove"]::after { content: "×" !important; font-size: 15px !important; }
/* typeahead/tagsinput also injects a clear control that floats inside the
   empty field — hide it; the chip carries its own remove affordance. */
#content .bootstrap-tagsinput > [data-role="remove"],
#content .bootstrap-tagsinput .twitter-typeahead > [data-role="remove"],
#content .bootstrap-tagsinput .tt-menu:empty { display: none !important; }

/* ---- 24f. Filtering indicator: replace the grey slab --------------------
   .loader-container is an EMPTY div that core paints as rgba(0,0,0,.12) over
   the whole result set. Swap it for a soft white scrim + a small brand
   spinner, so the results stay readable while loading. */
#content .loader-container {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  border-radius: 14px !important;
  z-index: 5 !important;
}
#content .loader-container::after {
  content: "" !important;
  position: absolute !important;
  top: 90px !important;
  left: 50% !important;
  width: 34px !important;
  height: 34px !important;
  margin-left: -17px !important;
  border: 3px solid #DCE6F2 !important;
  border-top-color: #2D5798 !important;
  border-radius: 50% !important;
  animation: rc-spin .7s linear infinite !important;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #content .loader-container::after { animation-duration: 2.4s !important; }
}

/* ---- 24g. EVENTS app polish (applies to the whole events app) ----------- */
/* No hover state on ticket rows — they are not interactive. */
#content table.tickets-tbl tbody tr:hover td,
#content table.resultsTBL tbody tr:hover td,
#content #ticketsTBL tbody tr:hover td { background: transparent !important; }
/* Drop the heavy left accent rail on the When/Where cards. */
#content #sectWhen-wrap::before,
#content #sectWhere-wrap::before { display: none !important; content: none !important; }
#content #sectWhen-wrap,
#content #sectWhere-wrap { border: 1px solid #DCE6F2 !important; }
/* When/Where must align flush with the Event Registration card edges: the
   SBX grid columns carry side padding that inset them by 20px. */
/* The Event Registration card sits flush at the grid's own left edge (125px)
   while the When/Where columns were inset to 145px by SBX's .width50 column
   rule. Zero the inset AND force each column to a true half so both cards
   align with the Registration box on the left and right. */
#content #sectWhenWhere-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* .compSectGrid carries `clearfix`, whose ::before/::after pseudo-elements
   become FLEX ITEMS once the container is display:flex — the leading one ate
   a 20px slot and pushed both cards inward by exactly the gap width. */
#content #sectWhenWhere-grid.clearfix::before,
#content #sectWhenWhere-grid.clearfix::after,
#content #sectWhenWhere-grid::before,
#content #sectWhenWhere-grid::after {
  display: none !important;
  content: none !important;
}
#content #sectWhenWhere-grid .compSectGrid-col,
#content #sectWhenWhere-grid .compSectGrid-content,
#content .compSectGrid-col.csg-colWhen,
#content .compSectGrid-col.csg-colWhere,
#content .compSectGrid-col.width50 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
}
/* "Enrolling" is a STATUS, not an action: pill, light background, no hover. */
#content a.btn.btnStatus:not(.btn-amount),
#content .region-content a.btn.btnStatus,
#content a.btn.btnStatus,
#content .btnStatus,
#content a.btnStatus {
  background: #EAF2FC !important;
  background-color: #EAF2FC !important;
  background-image: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 5px 15px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;
  background-image: none !important;
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;    /* status, not a link */
  text-decoration: none !important;
}
#content a.btn.btnStatus:hover,
#content .btnStatus:hover,
#content a.btnStatus:hover {
  background: #EAF2FC !important;
  color: #23477F !important;
  border-color: #C9DCF2 !important;
  transform: none !important;
}

/* ---- 24h. SHOP: product collection grid --------------------------------
   .item-list is a flex row whose cards size to their content, giving ragged
   widths (343 / 385 / 411 / 362). Make it a real equal-column grid and stack
   the price onto its own line under the product name. */
#content .item-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  grid-auto-rows: 1fr !important;   /* equal-height rows that actually track
                                       the tallest card in each row */
  gap: 26px 20px !important;        /* more breathing room between rows */
  align-items: stretch !important;
  margin: 18px 0 26px !important;
}
#content .item-list > a {
  display: flex !important;      /* was block+height:100% — the inner
      .item.flex then reported no height to the grid row, so rows sized to
      ~292px while cards painted 326px and row 2 overlapped row 1 by 14px */
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  text-decoration: none !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(27, 58, 102, .06) !important;
  overflow: hidden !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
#content .item-list > a:hover {
  border-color: #2D5798 !important;
  box-shadow: 0 8px 22px rgba(27, 58, 102, .13) !important;
  transform: translateY(-2px) !important;
}
#content .item-list > a .item.flex {
  display: flex !important;
  flex-direction: column !important;   /* image on top, then name, then price */
  align-items: stretch !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#content .item-list .item-thumb-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #F6F9FD !important;
}
#content .item-list .item-thumb-wrapper img,
#content .item-list img.productImageCollection,
#content .item-list img.productImageList {
  display: block !important;
  width: 100% !important;
  height: 168px !important;
  object-fit: cover !important;
  margin: 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
}
#content .item-list .item-name {
  display: block !important;
  padding: 16px 18px 0 !important;
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content .item-list .item-price {
  display: block !important;          /* own line, under the name */
  padding: 6px 18px 18px !important;
  margin: auto 0 0 !important;        /* pin to the bottom of the card */
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
}
/* the "empty box on the far right" is the Display Num pagination control
   being swept into the product grid — pull it out and style it as a footer. */
#content .item-list > .list-footer {
  grid-column: 1 / -1 !important;
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: #6B7A8D !important;
}
#content .item-list > .list-footer:empty { display: none !important; }

/* ---- 24i. SHOP: product detail page ------------------------------------ */
/* the detail image is img#productImage (an ID, no class) inside
   .product-image-wrap — hence the ID selector. */
#content img#productImage,
#content .product-image-wrap img,
#content .item-image img,
#content img.productImage,
#content img.productImageItem {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  border: 1px solid #E3EBF5 !important;
  box-shadow: 0 2px 12px rgba(27, 58, 102, .07) !important;
  box-sizing: border-box !important;
}
/* balance the two columns and give the detail pane real breathing room */
#content .product-store-container {
  align-items: start !important;
  gap: 36px !important;
  padding: 26px !important;
}
#content .product-image-wrap { margin: 0 !important; }
#content .product-store-container > .column:last-child { padding-top: 4px !important; }
#content .product-store-container h1,
#content .product-store-container h2 { margin: 0 0 4px !important; }
/* quantity + Add to Cart sit on ONE row so the button stops reading as a
   lone slab floating in the column. They are SIBLING divs (.quantity and
   .add-to-cart) inside .column, so they are floated inline rather than
   flexing .column itself (which also holds the title, price and copy). */
#content .product-store-container .quantity,
#content .product-store-container .add-to-cart {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#content .product-store-container .add-to-cart { margin-right: 0 !important; }
#content .product-store-container .quantity + .add-to-cart { margin-top: 0 !important; }
#content .product-store-container .description {
  display: block !important;
  clear: both !important;
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid #EDF2F8 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #33445C !important;
}
#content .product-store-container h2.product-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  color: #1B3A66 !important;
  margin: 0 0 10px !important;
}
#content .price { display: flex !important; align-items: center !important; gap: 12px !important; margin: 6px 0 18px !important; }
#content .price .price-value {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
}
/* "In Stock" → status pill, matching the Classes status treatment */
#content .price > span:not(.price-value) {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}
/* Add to Cart: same geometry as the donation submit button */
#content button.add-to-cart,
#content .add-to-cart button,
#content button.button.add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 52px !important;
  padding: 0 34px !important;
  margin: 4px 0 0 !important;
  border-radius: 999px !important;
  border: 2px solid #2D5798 !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#content button.add-to-cart:hover,
#content button.button.add-to-cart:hover { background: #fff !important; color: #2D5798 !important; }
#content button.add-to-cart > span,
#content button.button.add-to-cart > span {
  background: transparent !important; border: 0 none !important;
  padding: 0 !important; color: inherit !important; font: inherit !important;
}
/* quantity select lines up with the button */
#content .item-form select,
#content .add-to-cart select {
  height: 44px !important;
  width: 88px !important;
  padding: 0 10px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content .item-description, #content .item-desc {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #EDF2F8 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #33445C !important;
}

/* ---- 24j. System messages (e.g. "Items added to cart") -----------------
   SBX emits dd.message with Bootstrap's `.fade` class but never adds `.in`,
   so the message renders at opacity:0 and is invisible. Force it visible and
   style it as a real success notice. */
#content #system-message,
#content dl#system-message { margin: 0 0 20px !important; padding: 0 !important; }
#content #system-message dt.message { display: none !important; }
#content #system-message dd.message,
#content dd.message.fade,
#content .alert.fade {
  opacity: 1 !important;        /* ← the actual fix */
  visibility: visible !important;
  display: block !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid #C9DCF2 !important;
  border-left: 5px solid #2D5798 !important;
  border-radius: 12px !important;
  background: #EAF2FC !important;
  color: #1B3A66 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  list-style: none !important;
}
/* core styles the inner <ul>/<li> as its own bordered green box — flatten it
   so the notice reads as ONE left-aligned strip. */
#content #system-message dd.message ul,
#content #system-message dd.message li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  color: #1B3A66 !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
#content #system-message dd.message { text-align: left !important; position: relative !important; }
/* the "×" dismiss control */
#content #system-message dd.message .close,
#content #system-message dd.message > a.close {
  position: absolute !important;
  top: 12px !important; right: 14px !important;
  color: #6B7A8D !important;
  opacity: .6 !important;
  font-size: 18px !important;
  text-decoration: none !important;
}
#content #system-message dd.message .close:hover { opacity: 1 !important; }
#content #system-message dd.message a {
  color: #2D5798 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* ---- 24k. LOGIN page ---------------------------------------------------
   SBX nests <a class="modal"> INSIDE the Login-by-Email button, and its modal
   CSS sets `.modal { position: fixed }` — so the link escaped the button and
   floated over the header while the button collapsed to an 18x10 stub.
   Pin the link back into the button and give all three options one stacked,
   equal-width column. */
#content li#lgn-email a.modal.lgn-emaillink,
#content li#lgn-email a.lgn-emaillink,
#content .compList a.modal.lgn-emaillink {
  position: static !important;   /* ← the actual fix */
  display: inline !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  z-index: auto !important;
}
/* the three login options as one consistent stacked column */
#content ul#sectLogin-formUL li.buttons,
#content ul#sectLogin-formUL li#lgn-email {
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 none !important;
}
#content ul#sectLogin-formUL li#lgn-email button.button,
#content ul#sectLogin-formUL li.buttons button.button,
#content ul#sectLogin-formUL button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 260px !important;
  width: auto !important;
  height: 52px !important;
  padding: 0 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #2D5798 !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
#content ul#sectLogin-formUL button.button > span {
  background: transparent !important; border: 0 none !important;
  padding: 0 !important; color: inherit !important; font: inherit !important;
}
#content ul#sectLogin-formUL button.button:hover { background: #fff !important; color: #2D5798 !important; }
#content ul#sectLogin-formUL button.button:hover > span,
#content ul#sectLogin-formUL button.button:hover a.lgn-emaillink { color: #2D5798 !important; }
/* the alternate providers read as secondary options */
#content ul#sectLogin-formUL li#lgn-email button.button,
#content ul#sectLogin-formUL li.buttons button.button.saml-login {
  background: #fff !important;
  color: #2D5798 !important;
}
#content ul#sectLogin-formUL li#lgn-email button.button:hover,
#content ul#sectLogin-formUL li.buttons button.button.saml-login:hover {
  background: #2D5798 !important;
  color: #fff !important;
}
#content ul#sectLogin-formUL li#lgn-email button.button:hover a.lgn-emaillink { color: #fff !important; }
/* the stray <hr>-ish dividers between each option add noise */
#content ul#sectLogin-formUL li.buttons + li.buttons { border-top: 0 none !important; }

/* ---- 24l. MOBILE (390px portrait) -------------------------------------- */
@media (max-width: 767px) {
  #content .item-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; }
  #content .item-list .item-thumb-wrapper img,
  #content .item-list img.productImageCollection { height: 130px !important; }
  #content .item-list .item-name { font-size: 16px !important; padding: 12px 14px 0 !important; }
  #content .item-list .item-price { padding: 4px 14px 14px !important; font-size: 15px !important; }
  #content button.add-to-cart, #content button.button.add-to-cart { width: 100% !important; }
  #content ul#sectLogin-formUL button.button { width: 100% !important; min-width: 0 !important; }
  #content a.btn.btnDetails, #content table.search-result a.btnDetails { height: 40px !important; padding: 0 18px !important; }
}

/* ============================================================================
   rc-25 — follow-up fixes: Shop row spacing, Classes filters/sort, P2P.
   ========================================================================= */

/* ---- 25a. Classes: Start Time slider must fill its column ---------------
   #time-range / .sliders_step1 / #slider-range inherit a ~50% width from the
   app's own sheet (145px inside a 290px column). */
#content #time-range,
#content .sliders_step1,
#content #slider-range.ui-slider,
#content .controls > #time-range {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#content #slider-range.ui-slider { margin: 6px 0 0 !important; }

/* ---- 25b. Classes: sort dropdown to the far right, above the results ----
   `div.clearfix.ordering` is a FULL-WIDTH bar (1170px) whose select sat at
   the far left, so it floated over the sidebar and read as a stray control
   above "Course Name". Right-align it over the results column instead. */
#content .clearfix.ordering,
#content div.ordering {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
#content .clearfix.ordering::before,
#content .clearfix.ordering::after { content: none !important; display: none !important; }
#content .clearfix.ordering .control-group,
#content .clearfix.ordering .controls {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
#content .clearfix.ordering .control-label { display: none !important; }
#content select#list_ordering {
  width: 220px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content select#list_ordering:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}

/* ---- 25c. Classes: Search / Share hover must carry the blue border ------
   The shared hover rule set background+color, but these two controls have a
   0-width border by default, so there was nothing to recolor. */
#content input.s-button,
#content .s-button,
#content .btnShare,
#content a.btnShare,
#content button.btnShare {
  border: 2px solid #2D5798 !important;
  box-sizing: border-box !important;
}
#content input.s-button:hover,
#content .s-button:hover,
#content .btnShare:hover,
#content a.btnShare:hover,
#content button.btnShare:hover {
  border: 2px solid #2D5798 !important;
  background: #fff !important;
  color: #2D5798 !important;
}

/* ---- 25d. Classes: selected Instructor / Venue chips -------------------
   Two bugs, one root: .bootstrap-tagsinput was a flex row with a fixed
   min-height:44px. Chips beyond the first row rendered OUTSIDE that box (so
   they looked like they vanished), and the first chip got pulled onto the
   input's own line and painted INSIDE the field.
   Fix: make the wrapper a block-level column that grows with its content,
   with the typeahead as its own row and the chips in a wrapping row beneath.
   Absolutely positioning the chips is avoided on purpose — the wrapper must
   actually reserve their height so the next control is not overlapped. */
#content .bootstrap-tagsinput {
  display: flex !important;
  flex-direction: column !important;   /* field row, then chip row */
  flex-wrap: nowrap !important;        /* MUST be nowrap — a wrapping column
      spills chips into a second column beside the field */
  align-items: stretch !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#content .bootstrap-tagsinput .twitter-typeahead {
  display: block !important;
  order: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* the inner .tt-input is 48px but the typeahead span reported only ~40px,
     so the first chip was laid out overlapping the bottom of the field.
     Pin the row to the real field height. */
  flex: 0 0 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 0 !important;
}
/* chips are relocated by initClassesFilterChips() into .rc-chiprail, a real
   block sibling after the field — flexbox alone kept fitting the first chip
   onto the field's own line. */
/* The chip rail sits BELOW the field. The typeahead span collapses to ~10px
   while its .tt-input paints 48px and overflows, so the rail is pushed down
   by the leftover 38px to clear it. (initClassesFilterChips also pins the
   span's height; this margin covers the case where the widget re-renders
   before that runs.) */
#content .bootstrap-tagsinput .rc-chiprail {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 48px 0 0 !important;
  padding: 0 !important;
  clear: both !important;
}
#content .bootstrap-tagsinput .rc-chiprail:empty { display: none !important; margin: 0 !important; }
#content .bootstrap-tagsinput .rc-chiprail span.tag { margin: 0 !important; }

/* every chip lives after the field; they wrap among themselves */
#content .bootstrap-tagsinput span.tag,
#content .bootstrap-tagsinput .tag.label {
  order: 1 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 10px 8px 0 0 !important;
}

/* ---- 25e. Shop: row-gap (see 24h) — rows overlapped by 14px because the
   card was display:block with height:100%, so the inner .item.flex reported
   no height to the grid row. Fixed in 24h; this only widens the row gutter. */


/* ---- 25f. P2P campaign page: restore full-size tiles --------------------
   The 210px cap was written for the TEAM page (rc-21) but `.sbx-panel` is
   shared, so it shrank the campaign grid too. Scope the cap to the team page
   only and let the campaign tiles size to their column again. */
/* NOTE: `.sbx-panel` is SHARED by the campaign, team and personal pages.
   The 210px cap tried in this round leaked onto the campaign grid; the
   240px cap below is the value that was in place before, restored. */
#content .sbx-panel.sbx-size_medium { max-width: 240px !important; }

/* ---- 25g. P2P tabs: bottom indicator only ------------------------------
   `.section-tab .bar > a` carried a 10px 10px 0 0 radius that drew a
   tab-shaped outline on the sides and top of the active tab. */
#content .section-tab .bar > a {
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#content .section-tab .bar > a.active {
  border: 0 none !important;
  border-bottom: 3px solid #2D5798 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1B3A66 !important;
  font-weight: 700 !important;
}
#content .section-tab .bar > a:hover { background: transparent !important; color: #2D5798 !important; }

/* ---- 25h. P2P: soften the big results container ------------------------ */
#content .section-tab .tab,
#content .section-tab > .tab {
  border-radius: 0 0 18px 18px !important;
  border: 1px solid #DCE6F2 !important;
  border-top: 0 none !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(27, 58, 102, .06) !important;
}
#content .section-tab .bar {
  border-bottom: 1px solid #DCE6F2 !important;
  border-radius: 18px 18px 0 0 !important;
  background: #fff !important;
}

/* ---- 25i / 25j. P2P TEAM + PERSONAL pages — REVERTED ------------------
   This round's team/personal tweaks (top-aligning Join Team, zeroing panel
   padding, forcing the avatar to 262px, re-flowing .team-buttons) wrecked
   both pages: .team-buttons IS an SBX `.sbx-col` inside `.team-content`, so
   overriding its align-items / align-self / height collapsed the stats column
   and dropped Join Team out of its own column (footgun #52 — style the CARD,
   never the SBX grid or its columns).
   Everything here has been removed and the pages returned to their prior
   state. The only rules kept are the two that were already verified good
   BEFORE this round: the campaign chip and the blue (never green) progress
   bar, both of which are pure cosmetics on non-layout elements. */

/* campaign link reads as a related-campaign chip (verified good, kept) */
#content span.campaign-link a,
#content .campaign-link a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}
#content span.campaign-link a:hover {
  background: #2D5798 !important;
  color: #fff !important;
  border-color: #2D5798 !important;
}

/* progress bar: brand blue, never green (verified good, kept).
   The personal-fundraiser page uses progress#fundraiser-progress-bar — an ID
   with NO class — so the class-based selectors below never reached it and it
   stayed green. Cosmetic only; touches no layout. */
#content progress#fundraiser-progress-bar,
#content #fundraiser-progress progress {
  accent-color: #2D5798 !important;
  background: #E7EEF7 !important;
  border: 0 none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
#content progress#fundraiser-progress-bar::-webkit-progress-bar { background: #E7EEF7 !important; border-radius: 999px !important; }
#content progress#fundraiser-progress-bar::-webkit-progress-value { background: #2D5798 !important; border-radius: 999px !important; }
#content progress#fundraiser-progress-bar::-moz-progress-bar { background: #2D5798 !important; border-radius: 999px !important; }

#content progress.sbx-progress-bar,
#content .sbx-progress-bar {
  height: 14px !important;
  border-radius: 999px !important;
  background: #E7EEF7 !important;
  accent-color: #2D5798 !important;
  border: 0 none !important;
  overflow: hidden !important;
}
#content progress.sbx-progress-bar::-webkit-progress-bar { background: #E7EEF7 !important; border-radius: 999px !important; }
#content progress.sbx-progress-bar::-webkit-progress-value { background: #2D5798 !important; border-radius: 999px !important; }
#content progress.sbx-progress-bar::-moz-progress-bar { background: #2D5798 !important; border-radius: 999px !important; }
#content .sbx-progress-bar__value { background: #2D5798 !important; border-radius: 999px !important; }

/* ---- 25o. P2P quirk polish — COSMETICS ONLY ---------------------------
   HARD RULE for this section (learned the hard way): never set display,
   align-items, align-self, height, flex or padding on `.sbx-col*`,
   `.sbx-grid` or `.team-content`. Those are SBX's layout grid (footgun #52)
   and touching them collapsed both P2P pages. Only button metrics, colours
   and INNER-container padding below. */

/* 1. All three action buttons share one size + hover.
      Login was 226x52 against Donate/Share at 306x48. */
#content .fundraiser-buttons a.btn,
#content .fundraiser-buttons a.btn-primary,
#content .fundraiser-buttons a.btn.btn-donate,
#content .fundraiser-buttons a.btn.share-link,
#content .fundraiser-buttons a.btn.btn-primary.btn-submit,
#content .fundraiser-buttons a.btn.btn-submit {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 50px !important;
  min-height: 50px !important;   /* the generic .btn-submit rule sets
      min-height:52px, which kept Login 2px taller than Donate/Share */
  margin: 0 0 10px !important;
  padding: 0 24px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content .fundraiser-buttons a.btn:hover,
#content .fundraiser-buttons a.btn.btn-donate:hover,
#content .fundraiser-buttons a.btn.share-link:hover,
#content .fundraiser-buttons a.btn.btn-submit:hover,
#content .team-buttons a.btn:hover,
#content .team-buttons a.btn.btn-submit:hover {
  background: #fff !important;
  color: #2D5798 !important;
  /* MUST restate width+style, not just border-color: the generic
     `#content .btn:...:hover` rule above sets `border: 0 none`, and a
     border-color alone cannot restore a zero-width border — which is why
     Donate/Share lost their blue outline on hover. */
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}
#content .fundraiser-buttons a.btn:hover > span,
#content .team-buttons a.btn:hover > span { color: #2D5798 !important; background: transparent !important; }
#content .fundraiser-buttons a.btn > span { background: transparent !important; color: inherit !important; }

/* 2. Breathing room between the progress column and the button column.
      Applied as INNER padding on the button block — not on the .sbx-col —
      so the SBX grid geometry is untouched. Mirrors the ~75px avatar gap. */
#content .fundraiser-buttons { padding-left: 40px !important; box-sizing: border-box !important; }
#content .team-buttons { padding-left: 40px !important; box-sizing: border-box !important; }
/* at mobile the columns stack, so the desktop gutter would push the buttons
   off-centre — drop it and let them centre in the full width */
@media (max-width: 767px) {
  #content .fundraiser-buttons,
  #content .team-buttons { padding-left: 0 !important; }
  #content .fundraiser-buttons a.btn { max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* 3. Personal-page avatar. NOT overridden: img.img-thumbnail is already
      width:100% of its `.sbx-col`, so its 180px vs the team page's 262px is
      the COLUMN width, set by SBX's own grid. Forcing a pixel width here
      either overflows the column or desyncs the two pages. Left as-is
      deliberately — changing it means touching .sbx-col (footgun #52). */

/* ---- 25k. DONATE: payment tiles fit one row ---------------------------
   [superseded by rc-26b] this block's `padding: 6px 10px` was competing with
   the symmetric padding in 26b, leaving padding-right:0 and pushing every
   logo ~5px right. rc-26b is now the single source of truth for tile
   geometry; only the row-wrap behaviour is kept here. */
#content .sbxPayType, #content .cntr.col.sbxPayType {
  display: flex !important;
  flex-wrap: nowrap !important;    /* 7 tiles on ONE desktop row */
  gap: 8px !important;
}
@media (max-width: 900px) {
  #content .sbxPayType, #content .cntr.col.sbxPayType { flex-wrap: wrap !important; }
}

/* ---- 25l. DONATE: State / Province + Country selects were crushed ------
   The Classes ticket-qty rule (88px) was matching these too. Restore them. */
#content .compSect-payment select,
#content .cntr.address select,
#content select[name*="state"],
#content select[name*="country"],
#content select[name*="province"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  color: #1B3A66 !important;
}
/* keep the narrow rule for ticket quantities ONLY */
#content table.tickets-tbl td select:not([name*="attendee"]),
#content table.resultsTBL td select:not([name*="attendee"]) { width: 88px !important; }

/* ---- 25m. DONATE: Total line ------------------------------------------
   Markup is <p><strong>Total:</strong> <span>$</span> <span>5.00</span>
   <span>USD</span></p> — the inter-span whitespace produced a wide gap
   between "$" and the number, and the amount was scaled up for no reason.
   Set the whole line at one size and close the gaps. */
#content #donate-total.section-total p,
#content .section-total p {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content .section-total strong {
  margin-right: 10px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content .section-total .currency-symbol,
#content .section-total .price_total,
#content .section-total .currency-code {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
  font-variant-numeric: tabular-nums !important;
}
#content .section-total .currency-symbol { margin-right: 1px !important; }
/* core sets .price_total { min-width:132px; text-align:right }, which opened a
   ~120px gap between the "$" and the digits. Let it size to its content. */
#content .section-total .price_total,
#content span.price_total {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  padding: 0 !important;
}
#content .section-total .currency-code {
  margin-left: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6B7A8D !important;
  letter-spacing: .04em !important;
}

/* ---- 25n. DONATE: cover-the-fee copy must span the full width ----------
   The copy is a `label.choice` inside `span.span-block` (a flex row that also
   holds the toggle). It sat at 745px inside a 1177px parent because the label
   was not allowed to grow — so the sentence wrapped about 2/3 across. */
#content .section-fee ~ * span.span-block:has(> label.choice),
#content span.span-block:has(> label.choice) { width: 100% !important; }
#content .section-fee ~ * span.span-block > label.choice,
#content .cntr > span.span-block > label.choice {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-right: 0 !important;
}

/* ============================================================================
   rc-26 — P2P personal page follow-ups.
   ========================================================================= */

/* ---- 26a. Hover borders: restate WIDTH + STYLE, not just border-color ---
   The generic `#content .btn:not(...):hover` rule sets `border: 0 none`.
   A later rule that only sets `border-color` cannot restore a zero-width
   border, which is why Donate / Share / Donate Now lost their blue outline
   on hover while the background and text colour changed correctly.
   Any hover rule that wants a visible border MUST set the full shorthand. */
#content .fundraiser-buttons a.btn:hover,
#content .fundraiser-buttons a.btn.btn-donate:hover,
#content .fundraiser-buttons a.btn.share-link:hover,
#content .fundraiser-buttons a.btn.btn-submit:hover,
#content .team-buttons a.btn:hover,
#content .team-buttons a.btn.btn-submit:hover,
#content button.btn-submit.payable-form-btn:hover,
#content button.btn.btn-primary.btn-submit:hover,
#content .btn-submit.payable-form-btn:hover {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
  border-width: 2px !important;
  border-style: solid !important;
}
#content .fundraiser-buttons a.btn:hover > span,
#content .team-buttons a.btn:hover > span,
#content button.btn-submit.payable-form-btn:hover > span,
#content button.btn.btn-primary.btn-submit:hover > span {
  color: #2D5798 !important;
  background: transparent !important;
}

/* ---- 26b. Payment-method tiles: smaller, image truly centred -----------
   Core ships `padding: 6px 0 6px 10px` — the asymmetric left padding pushed
   each logo right (49px of space on the left vs 39px on the right). */
/* the wrapper span is display:block and 127px wide, so the label stretched to
   fill it; and a later rule zeroed padding-right, leaving 5px 0 5px 5px. Size
   the WRAPPER and restate every padding longhand. */
/* .sbxPayType is a FLEX row, so each span.paytype-* stretched to an equal
   share (543/4 = 127px) and the logo drifted off-centre inside it. Make each
   wrapper size to its own content instead of stretching. */
/* .sbxPayType is a FLEX row, so each span.paytype-* stretched to an equal
   share (543/4 = 127px) and the logo drifted off-centre. Pin the WRAPPER to
   a fixed tile width — `width:auto` on a flex item still stretches, and
   inline-flex made the label fill the whole 543px row. */
#content .sbxPayType > [class*="paytype-"],
#content [class*="paytype-"] {
  display: block !important;
  flex: 0 0 78px !important;
  width: 78px !important;
  min-width: 0 !important;
  max-width: 78px !important;
}
#content .sbxPayType { justify-content: flex-start !important; }
#content [class*="paytype-"] label.choice {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  /* zero padding entirely: flex centring positions the logo, and any
     asymmetric padding surviving from core shifts it off-centre */
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
#content [class*="paytype-"] label.choice img {
  display: block !important;
  max-height: 22px !important;
  max-width: 88% !important;
  width: auto !important;
  margin: 0 !important;           /* flex centring owns the position; auto
                                     margins fought the label's own padding */
}
#content [class*="paytype-"] { margin: 0 7px 7px 0 !important; }

/* ---- 26c. "Other" amount box vertical alignment ------------------------
   The .input-group sat 4px above the amount pills (1495 vs 1499) because the
   pills carry a margin the group does not. Align them on one baseline. */
#content .input-group {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 48px !important;
  /* the amount pills carry a 4px top margin the input-group did not, so the
     Other box floated 4px above the row */
  margin: 4px 0 0 !important;
}
#content .btn-amount, #content .amts { vertical-align: middle !important; }

/* ---- 26d. P2P hero banner: round it like everything else ---------------
   The hero is a background-image DIV (#section-team-header / its campaign and
   personal equivalents), not an <img>, so image-based rules never reached it
   and it stayed the only square-cornered element on the page. */
#content #section-team-header,
#content .section-team-header,
#content .section-campaign-header,
#content .section-fundraiser-header,
#content [id$="-header"][class$="-header"] {
  border-radius: 18px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ============================================================================
   rc-27 — SHOP CART page (/shop/<store>-cart).
   ========================================================================= */

/* ---- 27a. Left-align page content with the page title -------------------
   The cart body sat at 245px while "Shop Cart" sat at 125px — a 120px inset
   from the account's own `.page-content { width: 80%; margin: auto }` rule in
   the cart page content. Pull the body back to the title's edge. */
#content .sbxStore-cart .page-content,
#content #page.com_store .page-content,
#content .page-content:has(table.cart-table),
#content .page-content:has(.section-accordion) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- 27b. Cart table: values left-align under their column headings -----
   Headers were text-align:left but every data cell was right — so PRICE /
   QUANTITY / TOTAL numbers floated away from their own labels. */
#content table.cart-table th,
#content table.cart-table td { text-align: left !important; }
#content table.cart-table td:first-child,
#content table.cart-table th:first-child { text-align: left !important; }
#content table.cart-table th {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  border-bottom: 2px solid #E7EEF7 !important;
  padding: 0 14px 12px !important;
}
#content table.cart-table td {
  padding: 18px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-size: 15px !important;
  color: #33445C !important;
}
/* price / total read as brand-blue tabular figures */
#content table.cart-table td:nth-child(2),
#content table.cart-table td:nth-child(4) {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
}
#content table.cart-table select {
  width: 84px !important;
  height: 44px !important;
  padding: 0 10px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}

/* ---- 27c. Remove button: small, and NOTHING moves on hover -------------
   It was a full-size 139x48 CTA with 40px padding sitting right against the
   product name. Any hover transform/size change also shoved the product
   title, so the whole row jittered. */
#content .cart-item-remove { margin-top: 14px !important; }   /* space from the name */
#content .cart-item-remove a.btn:not(.btn-amount),
#content table.cart-table a.btn:not(.btn-amount),
#content .cart-item-remove a.btn,
#content table.cart-table a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  color: #6B7A8D !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  /* colour-only transition — never size/position, or the row shifts */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content .cart-item-remove a.btn:not(.btn-amount):hover,
#content table.cart-table a.btn:not(.btn-amount):hover,
#content .cart-item-remove a.btn:hover,
#content table.cart-table a.btn:hover {
  /* identical box metrics to the resting state: same height, padding and
     border WIDTH, so neither the button nor the product name moves */
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #C2543E !important;
  background: #fff !important;
  color: #C2543E !important;
  transform: none !important;
  box-shadow: none !important;
}
/* the product cell: image, then name, then the small Remove pill */
/* NOTE: do NOT `display:flex` the <td> — it detaches the cell from the
   table's column sizing, which left a large dead gap before PRICE and pushed
   the values out from under their headings. Style the cell's CONTENTS. */
#content table.cart-table td:first-child { white-space: normal !important; }
#content table.cart-table td:first-child img {
  float: left !important;
  margin-right: 18px !important;
}
#content table.cart-table td:first-child::after {
  content: "" !important; display: block !important; clear: both !important;
}
#content table.cart-table td:first-child img {
  flex: 0 0 auto !important;
  width: 78px !important;
  height: 78px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #E3EBF5 !important;
}
#content .cart-item-name,
#content table.cart-table td:first-child > a:not(.btn) {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  text-decoration: none !important;
}

/* ---- 27d. Section headers: rounded cards, not grey slabs ---------------
   Contact Information / Shipping Information / Secure Payment / Order
   Summary each shipped as `div.section-header` on a flat rgb(85,85,85) bar.
   Restyle the whole `.section-accordion` as a card matching the Donations
   giving page (white, 1px #DCE6F2, 14px radius, soft shadow). */
#content .section.section-accordion,
#content .section-accordion {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  overflow: hidden !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
#content .section-accordion .section-header,
#content .section-accordion > .section-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 20px 28px 16px !important;
}
#content .section-accordion .section-header h3.title,
#content .section-accordion .section-header .title {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
/* the body of each section gets the card's inner padding */
#content .section-accordion .section-content,
#content .section-accordion > .section-body,
#content .section-accordion > div:not(.section-header) { padding: 20px 28px 24px !important; }
/* the first field group inside a section carried its own top margin on top of
   the card padding, leaving a large gap under each header */
#content .section-accordion .section-content > *:first-child,
#content .section-accordion > div:not(.section-header) > *:first-child { margin-top: 0 !important; }
#content .section-accordion ul.compList { margin-top: 0 !important; padding-top: 0 !important; }
#content .section-accordion ul.compList > li:first-child { padding-top: 0 !important; margin-top: 0 !important; }

/* subtotal / order-summary rows read as a clean ledger */
#content .cart-subtotal, #content .subtotal, #content .cart-totals {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}

/* ---- 27d-2. Optional Donation: right-justify the copy against the input --
   `.donation-content` holds a text block plus `#donationWrapper`. The label
   and description sat far left while the field was at x=1111, so the row read
   as disconnected. Push the copy right so it ends at the input's left edge —
   the same relationship the Subtotal row already has. */
#content .donation-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
}
#content .donation-content > div:first-child {
  text-align: right !important;
  flex: 0 1 auto !important;
}
#content .donation-content h4.title {
  margin: 0 0 2px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content .donation-content p.desc {
  margin: 0 !important;
  font-size: 14px !important;
  color: #6B7A8D !important;
}
#content .donation-content .amount,
#content #donationWrapper { flex: 0 0 auto !important; }
#content #donationWrapper input#donation {
  height: 48px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 16px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content #donationWrapper input#donation:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}

/* ---- 27e. Cart MOBILE (390px portrait) --------------------------------- */
@media (max-width: 767px) {
  /* the 4-column cart table cannot compress below ~430px, so let it scroll
     inside its own container rather than pushing the page wider */
  #content table.cart-table { min-width: 430px !important; }
  #content .cart-table-wrap,
  #content div:has(> table.cart-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #content table.cart-table th,
  #content table.cart-table td { padding: 12px 8px !important; font-size: 14px !important; }
  #content table.cart-table td:first-child { gap: 12px !important; }
  #content table.cart-table td:first-child img { width: 60px !important; height: 60px !important; }
  #content .cart-item-name { font-size: 16px !important; }
  #content table.cart-table select { width: 72px !important; height: 40px !important; }
  #content .section-accordion .section-header { padding: 16px 18px 14px !important; }
  #content .section-accordion .section-header h3.title { font-size: 20px !important; }
  #content .section-accordion .section-content,
  #content .section-accordion > div:not(.section-header) { padding: 18px !important; }
  /* stack the donation row so the copy is not squeezed at 390px */
  #content .donation-content { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 10px !important; }
  #content .donation-content > div:first-child { text-align: left !important; flex: 1 1 100% !important; }
}

/* ============================================================================
   rc-28 — PETITIONS app (/other/petitions, .petitions-view-petition).
   Brings the page onto the same design language as Donations / Shop / Events:
   white cards with 1px #DCE6F2 + 14px radius, the blue 14px progress bar,
   48px controls, pill CTAs, and status/meta as pills.
   ========================================================================= */

/* ---- 28a. Progress + stats as one card (was a thin ring + loose numbers) - */
#content .section-petition-progress {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 40px !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 22px 26px !important;
  margin: 0 0 24px !important;
  height: auto !important;
}
/* KEEP the progress circle (client request) — it is the page's signature
   element. Only recolour it to the brand blue so it stops reading as a grey
   hairline, and give it room in the card. */
#content .section-petition-progress svg,
#content .section-petition-progress canvas,
#content .petition-progress-circle {
  display: block !important;
  flex: 0 0 auto !important;
}
#content .section-petition-progress svg circle,
#content .section-petition-progress svg path {
  stroke-linecap: round !important;
}
/* the stats live inside div.petition-progress, which core renders as
   `display:table` — that stacked the circle and the two figures vertically.
   Flex the inner wrapper so circle | supporters | goal sit on one row. */
#content .petition-progress {
  display: flex !important;
  align-items: center !important;
  /* space-around gives the chart, Supporters and Goal equal breathing room
     instead of bunching them at the left with dead space on the right */
  justify-content: space-around !important;
  gap: 20px !important;
  width: 100% !important;
}
/* each of the three cells takes an equal share and centres its content */
#content .petition-chart,
#content .petition-count,
#content .petition-goal {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* all three cells share the row equally, so the chart is not visually wider
   than Supporters / Goal */
#content .petition-chart { flex: 1 1 0 !important; min-width: 0 !important; }
#content .petition-progchart { margin: 0 auto !important; }
#content .petition-count,
#content .petition-goal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
#content .petition-prognum {
  margin: 0 0 2px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #1B3A66 !important;
}
#content .petition-count .petition-prognum { color: #2D5798 !important; }
#content .petition-proglabel {
  margin: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}
/* the chart container defines the canvas size — give it a definite box so
   the canvas cannot overflow the card */
#content .petition-progchart {
  position: relative !important;
  width: 116px !important;
  height: 116px !important;
  margin: 0 auto !important;
}
#content .petition-progchart canvas {
  display: block !important;
  width: 116px !important;
  height: 116px !important;
  max-width: 100% !important;
}
/* the chart's own "4%" readout — absolutely centred over the canvas */
#content .petition-progchart .percent {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content .petition-progchart .percent::after { content: "%" !important; }

/* ---- 28a-2. Top-align the metrics card with the Sign the Petition card -
   Both columns start at the same y (212), but `.section-petition-media` — an
   EMPTY zero-height section that SBX renders above the metrics — still
   contributed ~18px of margin, pushing the metrics card down to 230 while the
   sidebar card stayed flush. Collapse empty leading sections entirely. */
#content .section-petition-media:empty,
#content .section-media.section-petition-media {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#content .petitions-col-main > .section:first-child,
#content .section-petition-progress { margin-top: 0 !important; }
#content .petitions-sidebar > .section:first-child,
#content .section-petition-form { margin-top: 0 !important; }
#content .petitions-col-main,
#content .petitions-col-sidebar,
#content .petitions-sidebar { padding-top: 0 !important; margin-top: 0 !important; }
#content .petition-count { color: #2D5798 !important; }
/* the big numbers inside those blocks */
#content .petition-count strong, #content .petition-goal strong,
#content .petition-count > span:first-child, #content .petition-goal > span:first-child {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1B3A66 !important;
}
#content .petition-count strong { color: #2D5798 !important; }
/* NOTE: no substitute progress bar here — the circle stays (client request),
   and showing both would duplicate the same figure. */

/* ---- 28b. LETTER: white card, readable type (was grey slab + Courier) --- */
#content .section-petition-letter {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-left: 1px solid #DCE6F2 !important;   /* was a 10px grey rail */
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 24px 28px 26px !important;
  margin: 0 0 26px !important;
}
#content .petition-letter-title,
#content .section-petition-letter .section-title {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1B3A66 !important;
}
/* the letter body ships in Courier — switch to the body face so it reads */
#content .section-petition-letter p,
#content .section-petition-letter div,
#content .section-petition-letter pre,
#content .petition-letter-body {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #33445C !important;
  white-space: normal !important;
  background: transparent !important;
}

/* ---- 28c. SIGN THE PETITION form as a card ----------------------------- */
#content .petition-sidebar-form,
#content form.petition-form {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 24px 24px 26px !important;
  box-sizing: border-box !important;
}
/* the toggle heading is a SIBLING of <form>, so carding the form alone left
   the heading floating above it. Wrap the pair via the sidebar column. */
#content .lay-2col .petition-sidebar,
#content .petition-sidebar,
#content div:has(> .btn-petition-formtoggle) + form.petition-form { margin-top: 0 !important; }
/* The heading is h3.petition-formtitle, a SIBLING of <form> inside
   div.section-petition-form. So the CARD belongs on that section, with the
   form itself left transparent — carding the form alone left the heading
   floating above it. */
#content .section-petition-form {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 22px 24px 24px !important;
  margin: 0 0 24px !important;
  box-sizing: border-box !important;
}
#content .petition-formtitle,
#content h3.petition-formtitle {
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1B3A66 !important;
}
/* the form itself is now just the fields inside that card */
#content .petition-sidebar-form,
#content form.petition-form {
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* the "SIGN THE PETITION" heading is a <button> toggle — de-button it */
#content .btn-petition-formtoggle,
#content button.btn-petition-formtoggle {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 14px !important;
  margin: 0 0 16px !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1B3A66 !important;
  cursor: default !important;
}
#content .btn-petition-formtoggle:hover {
  background: transparent !important;
  color: #1B3A66 !important;
  border-bottom-color: #EDF2F8 !important;
}
/* fields match every other form in the template */
#content .petition-form input[type="text"],
#content .petition-form input[type="email"],
#content .petition-form input.field,
#content .petition-form select,
#content .petition-form textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  margin-bottom: 12px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content .petition-form textarea { height: auto !important; min-height: 92px !important; padding: 12px 14px !important; }
#content .petition-form input:focus,
#content .petition-form select:focus,
#content .petition-form textarea:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
/* the "Display my signature" checkbox overlapped its own label */
#content .petition-form input[type="checkbox"] {
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 10px 0 0 !important;
  vertical-align: middle !important;
}
#content .petition-form input[type="checkbox"] + label,
#content .petition-form label.choice {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  vertical-align: middle !important;
  line-height: 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #33445C !important;
  cursor: pointer !important;
}
#content .petition-form .checkbox,
#content .petition-form li:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  margin: 6px 0 16px !important;
}
/* Sign It! — full-width pill CTA with the standard hover invert */
#content .btn-petition-submit,
#content button.btn-petition-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  margin: 4px 0 0 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#content .btn-petition-submit:hover,
#content button.btn-petition-submit:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #2D5798 !important;
}
#content .btn-petition-submit:hover > span { color: #2D5798 !important; }

/* ---- 28d. Supporters + share + outro ----------------------------------- */
#content .accordion-petition-supporters-header,
#content .section-petition-supporters .section-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1B3A66 !important;
  background: transparent !important;
  border: 0 none !important;
  padding: 0 0 12px !important;
}
#content .petition-supporters-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Real markup is:
     li.supporter-item > div.supporter-headline > strong.supporter-name
       + span.supporter-location + time.supporter-time
   The name/location/time were overlapping because the headline was not a
   flow row. Flex the HEADLINE (not the li) and push the time to the end. */
#content li.supporter-item,
#content .petition-supporters-list > li {
  list-style: none !important;
  padding: 12px 16px !important;
  margin: 0 0 8px !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  color: #33445C !important;
}
#content .supporter-headline {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  position: static !important;
  width: 100% !important;
}
#content .supporter-name,
#content .petition-supporters-list strong {
  flex: 0 0 auto !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
#content .supporter-location {
  flex: 0 1 auto !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  font-style: normal !important;
}
#content time.supporter-time {
  margin-left: auto !important;    /* pinned to the row's right edge */
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  font-size: 12.5px !important;
  color: #8494A8 !important;
  white-space: nowrap !important;
}
#content .supporter-text:empty { display: none !important; }
#content .supporter-text p:empty { display: none !important; margin: 0 !important; }

/* "HELP SPREAD THE WORD" bar */
#content .petition-share,
#content .section-petition-share {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  margin: 22px 0 !important;
  background: #F6F9FD !important;
  border: 1px solid #E7EEF7 !important;
  border-radius: 14px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  border-top: 1px solid #E7EEF7 !important;
  border-bottom: 1px solid #E7EEF7 !important;
}
#content .petition-share a, #content .section-petition-share a {
  color: #2D5798 !important;
  font-size: 18px !important;
  text-decoration: none !important;
}
#content .petition-share a:hover { color: #1B3A66 !important; }

/* ---- 28e. Petitions MOBILE (390px portrait) ---------------------------- */
@media (max-width: 767px) {
  #content .section-petition-progress { gap: 10px !important; padding: 16px 12px !important; }
  /* the 132px chart plus two stat columns crowd at 390px — shrink the canvas
     and tighten the labels so nothing clips */
  #content .petition-progchart,
  #content .petition-progchart canvas { width: 92px !important; height: 92px !important; }
  #content .petition-chart { flex: 0 0 100px !important; }
  #content .petition-count, #content .petition-goal { flex: 1 1 0 !important; }
  #content .petition-proglabel { font-size: 10.5px !important; letter-spacing: .04em !important; }
  #content .petition-progchart .percent { font-size: 15px !important; }
  #content .petition-count strong, #content .petition-goal strong,
  #content .petition-count > span:first-child, #content .petition-goal > span:first-child { font-size: 28px !important; }
  #content .section-petition-letter { padding: 18px !important; }
  #content .petition-letter-title,
  #content .btn-petition-formtoggle { font-size: 19px !important; }
  #content .petition-sidebar-form, #content form.petition-form { padding: 18px !important; }
  #content .petition-share, #content .section-petition-share { flex-wrap: wrap !important; gap: 10px !important; }
}

/* ============================================================================
   rc-29 — MY ACCOUNT pages (authenticated):
     my-event-orders/order/… · …/ticket/… · …/ticket/…/form
     my-transactions · my-profile · my-applications · applications/record/…
   SCOPING NOTE: every rule below is scoped to a my-account page class
   (.eventsManage, .donationsManage, .com_jsf) or to a selector that only
   exists on these pages, so nothing here can reach the public Donate / Shop /
   Events / Classes work.
   ========================================================================= */

/* ---- 29a. Shared: page meta block as a card ---------------------------- */
#content .eventsManage .article-meta-wrap,
#content .eventsManage .order-meta,
#content .eventsManage .page-content > dl:first-of-type {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 22px 26px !important;
  margin: 0 0 24px !important;
}
#content .eventsManage h1.componentheading,
#content .donationsManage h1.componentheading,
#content .com_jsf h1.componentheading { margin-bottom: 22px !important; }

/* ---- 29b. Status badges: brand pills (were solid green) ---------------- */
/* the real class is span.slds-badge.slds-theme_success (Salesforce Lightning
   badges), NOT Bootstrap .label/.badge — hence the solid green that survived. */
#content .slds-badge,
#content span.slds-badge,
#content .slds-badge.slds-theme_success,
#content [class*="status-"].slds-badge,
#content .eventsManage .label,
#content .eventsManage .badge,
#content .donationsManage .label,
#content .donationsManage .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;
  background-image: none !important;
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

/* ---- 29c. Account result tables --------------------------------------- */
#content .eventsManage table.resultsTBL,
#content .donationsManage table.resultsTBL {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  margin: 0 0 26px !important;
}
#content .eventsManage table.resultsTBL th,
#content .donationsManage table.resultsTBL th {
  background: #F6F9FD !important;
  border: 0 none !important;
  border-bottom: 2px solid #E7EEF7 !important;
  padding: 14px 16px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  text-align: left !important;
}
#content .eventsManage table.resultsTBL td,
#content .donationsManage table.resultsTBL td {
  background: transparent !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  padding: 15px 16px !important;
  vertical-align: middle !important;
  font-size: 14.5px !important;
  color: #33445C !important;
}
#content .eventsManage table.resultsTBL tr:last-child td,
#content .donationsManage table.resultsTBL tr:last-child td { border-bottom: 0 none !important; }
#content .eventsManage table.resultsTBL tbody tr:hover td,
#content .donationsManage table.resultsTBL tbody tr:hover td { background: #F6F9FD !important; }
/* money columns read as brand-blue tabular figures */
#content .donationsManage table.resultsTBL td:nth-last-child(2),
#content .eventsManage table.resultsTBL td:nth-child(4) {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---- 29d. Row action links → small pills (were run-together text) ------
   "View Copy Link Edit" sat as three bare links with no separation. */
/* the ticket VIEW page repeats these actions above the record, outside any
   table — same pill treatment there. */
#content .eventsManage .compNavBar-content a:not(.btn),
#content .eventsManage ul.navbarmenu a:not(.btn),
#content .eventsManage table.resultsTBL td a:not(.btn) {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 12px !important;
  margin: 2px 6px 2px 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #2D5798 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content .eventsManage .compNavBar-content a:not(.btn):hover,
#content .eventsManage ul.navbarmenu a:not(.btn):hover,
#content .eventsManage table.resultsTBL td a:not(.btn):hover {
  background: #2D5798 !important;
  color: #fff !important;
  border-color: #2D5798 !important;
}

/* ---- 29e. FLOATING "Update" LINK (my-transactions) ---------------------
   SAME BUG AS THE LOGIN PAGE (footgun #56): SBX's modal CSS sets
   `.modal { position: fixed }`, and each recurring row's Update control is an
   <a class="modal ra-updateLink"> — so every one escaped its table cell and
   stacked at (440,90) over the header. Pin them back into their rows. */
#content .donationsManage a.modal,
#content a.modal.ra-link,
#content a.modal.ra-updateLink,
#content .ra a.modal {
  position: static !important;   /* ← the actual fix */
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
}
/* then style them as the row's action pills */
#content .donationsManage .ra a.ra-link,
#content .donationsManage td a.ra-updateLink,
#content .donationsManage td a.ra-cancelLink {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 14px !important;
  margin: 2px 6px 2px 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #2D5798 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#content .donationsManage td a.ra-updateLink:hover {
  background: #2D5798 !important; color: #fff !important; border-color: #2D5798 !important;
}
#content .donationsManage td a.ra-cancelLink:hover {
  background: #fff !important; color: #C2543E !important; border-color: #C2543E !important;
}
#content .donationsManage .ra.ra-update,
#content .donationsManage .ra.ra-cancel { display: inline-block !important; }

/* ---- 29f. ShadowBox modal (the Update dialog) -------------------------- */
#sbox-overlay { background: rgba(16, 30, 51, .55) !important; }
#sbox-window {
  background: #fff !important;
  border: 0 none !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(16, 30, 51, .34) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#sbox-content, #sbox-content.sbox-content-iframe {
  background: #fff !important;
  border: 0 none !important;
  border-radius: 18px !important;
}
#sbox-content iframe { border: 0 none !important; border-radius: 18px !important; }
/* The modal body is an IFRAME of /donate/update/… — a separate document, but
   style-overrides.css DOES load inside it, so these rules apply there. The
   grey bar is div.modal-hdr at rgb(102,102,102). */
.modal-hdr,
div.modal-hdr {
  background: #fff !important;
  background-image: none !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  border-radius: 18px 18px 0 0 !important;
  color: #1B3A66 !important;
  padding: 16px 20px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.modal-hdr h1, .modal-hdr h2, .modal-hdr h3, .modal-hdr strong, .modal-hdr span {
  color: #1B3A66 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
/* its Cancel control as a small outline pill */
.modal-hdr a, .modal-hdr button, .modal-hdr .btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  color: #6B7A8D !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.modal-hdr a:hover, .modal-hdr button:hover, .modal-hdr .btn:hover {
  border-color: #C2543E !important; color: #C2543E !important; background: #fff !important;
}
/* the close control as a proper round button. It must sit INSIDE the window,
   because #sbox-window has overflow:hidden for its radius — a negative offset
   clipped it behind the corner. */
/* The iframe renders its OWN "Cancel" control in the title bar, so a round
   close pinned inside the top-right collided with it. Park it just outside
   the window instead — the wrapper must therefore allow overflow while the
   radius is kept on #sbox-content. */
#sbox-window { overflow: visible !important; }
#sbox-btn-close {
  top: -15px !important;
  right: -15px !important;
  z-index: 10 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #2D5798 !important;
  box-shadow: 0 3px 12px rgba(16, 30, 51, .35) !important;
  opacity: 1 !important;
}
#sbox-btn-close:hover { background: #1B3A66 !important; }
/* SBX adds body.body-overlayed while the modal is open */
body.body-overlayed { overflow: hidden !important; }

/* ---- 29g. Account buttons --------------------------------------------- */
#content .eventsManage a.btn.btnCancelOrder,
#content .eventsManage .btnCancelOrder {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 26px !important;
  white-space: nowrap !important;   /* "Cancel Order" was wrapping to 2 lines */
  border: 2px solid #C2543E !important;
  background: #fff !important;
  color: #C2543E !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
#content .eventsManage a.btn.btnCancelOrder:hover {
  background: #C2543E !important; color: #fff !important; border-color: #C2543E !important;
}
/* the Google/Apple Wallet badge is a supplied image. The generic .btn rule
   flexed the anchor and collapsed it to 0x0, so the artwork vanished — let it
   size to its own image instead of becoming a brand pill. */
#content a.btn:not(.btn-amount):has(> img) > img,
#content .eventsManage a.btn:has(img) > img,
#content .eventsManage a.btn img {
  display: block !important;
  /* these are SVG wallet badges (Apple 111x35, Google similar). `width:auto`
     on an SVG with no intrinsic CSS size collapses the anchor to 0x0, so give
     the height explicitly and let the width follow the aspect ratio. */
  height: 42px !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
}
/* mirror the generic rule's `:not(.btn-amount)` shape so this outranks it —
   otherwise the wallet anchors keep the blue pill + 15px 40px padding. */
#content .eventsManage a.btn:not(.btn-amount):has(img),
#content a.btn:not(.btn-amount):has(> img),
#content .eventsManage a.btn:has(img),
#content .eventsManage a.btn:has(> img) {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#content .eventsManage a.btn > img { display: block !important; max-height: 44px !important; width: auto !important; }
#content .eventsManage .compList-btns,
#content .eventsManage .buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 20px !important;
}

/* ---- 29h. Ticket view + ticket edit form ------------------------------ */
#content .eventsManage dl,
#content .eventsManage .ticket-detail {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 22px 26px !important;
  margin: 0 0 22px !important;
}
#content .eventsManage dt {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  margin: 0 0 3px !important;
}
#content .eventsManage dd {
  margin: 0 0 16px !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
}
#content .eventsManage dd:last-child { margin-bottom: 0 !important; }
/* the edit form's fields match every other form in the template. Scoped to
   .eventsManage so it cannot touch the public event registration form. */
#content .eventsManage input[type="text"],
#content .eventsManage input[type="email"],
#content .eventsManage input[type="tel"],
#content .eventsManage input.field:not([type="checkbox"]):not([type="radio"]),
#content .eventsManage select,
#content .eventsManage textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 520px !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content .eventsManage textarea { height: auto !important; min-height: 96px !important; padding: 12px 14px !important; }
#content .eventsManage input:focus,
#content .eventsManage select:focus,
#content .eventsManage textarea:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
#content .eventsManage label:not(.choice) {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}

/* ---- 29i. JSF pages: My Profile / My Applications --------------------- */
#content .com_jsf .items-blog > div,
#content .com_jsf .items-row,
#content .com_jsf .item,
#content .com_jsf .blog .item {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 24px 26px !important;
  margin: 0 0 20px !important;
}
#content .com_jsf h2.contentheading {
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 24px !important;
  color: #1B3A66 !important;
}
#content .com_jsf h3 {
  margin: 22px 0 12px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 19px !important;
  color: #1B3A66 !important;
}
#content .com_jsf table td { padding: 8px 12px 8px 0 !important; font-size: 15px !important; color: #33445C !important; }
/* NOTE: do NOT uppercase `td:first-child` here. On My Profile the JSF tables
   are single-column VALUE lists (address lines, email, phone), so treating
   column 1 as a label rendered real data as "1234 MAIN ST APT 20". Only style
   the first cell as a label when the row genuinely has a second cell. */
#content .com_jsf table tr:has(td + td) > td:first-child {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  white-space: nowrap !important;
  width: 1% !important;
}

/* ---- 29i-2. Application View: kill the bordered strip, real Edit button -
   The "edit" link sits in ul.navbarmenu, which core draws as a three-sided
   box across the top of the record. Drop the box and promote the link to a
   pill matching every other primary button. */
/* the three-sided box is div#appsNavBar-wrap (border on right/bottom/left,
   none on top) — the navbarmenu inside it carries no border at all. */
#content #appsNavBar-wrap,
#content .compNavBar-wrap,
#content #appsNavBar-content,
#content .compNavBar-content {
  border: 0 none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
#content .com_jsf ul.navbarmenu,
#content .com_jsf .navbarmenu {
  border: 0 none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  list-style: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
}
#content .com_jsf ul.navbarmenu > li,
#content .com_jsf ul.navbarmenu > li.nbEdit {
  list-style: none !important;
  border: 0 none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#content .com_jsf ul.navbarmenu form { display: inline-block !important; margin: 0 !important; }
#content .com_jsf a.ia-link,
#content .com_jsf ul.navbarmenu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 26px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: capitalize !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content .com_jsf a.ia-link:hover,
#content .com_jsf ul.navbarmenu a:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}

/* ---- 29j. Account MOBILE (390px portrait) ----------------------------- */
@media (max-width: 767px) {
  #content .eventsManage table.resultsTBL,
  #content .donationsManage table.resultsTBL { min-width: 560px !important; }
  #content .eventsManage .page-content,
  #content .donationsManage .page-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #content .eventsManage table.resultsTBL th,
  #content .donationsManage table.resultsTBL th { padding: 10px !important; font-size: 10.5px !important; }
  #content .eventsManage table.resultsTBL td,
  #content .donationsManage table.resultsTBL td { padding: 11px 10px !important; font-size: 13.5px !important; }
  #content .eventsManage .article-meta-wrap,
  #content .com_jsf .items-blog > div { padding: 18px !important; }
  #sbox-window { border-radius: 14px !important; }
}


/* ============================================================================
   rc-30 — P2P personal page parity with the team page.
   ========================================================================= */

/* ---- 30a. Hero corners -------------------------------------------------
   rc-26d rounded #section-team-header but the personal page's hero is
   div#section-fundraiser-header.row — a different id AND it carries Bootstrap
   `.row`, so it never matched. */
#content #section-fundraiser-header,
#content .section-fundraiser-header,
#content #section-personal-header {
  border-radius: 18px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ---- 30b. Campaign name: plain link, not a pill ------------------------
   rc-25i made .campaign-link a chip. Client wants it to read exactly like the
   team name beside it, so the pill treatment is removed here. */
#content span.campaign-link a,
#content .campaign-link a {
  display: inline !important;
  padding: 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1B3A66 !important;              /* same as .team-link */
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
#content span.campaign-link a:hover,
#content .campaign-link a:hover {
  background: transparent !important;
  color: #2D5798 !important;
  border: 0 none !important;
}

/* ---- 30c. Card the personal page's content block -----------------------
   The team page wraps its stats row in `.sbx-grid.team-content`, which rc-21
   cards (white, 1px #DCE6F2, 18px radius). The personal page's equivalent is
   `.sbx-grid.fundraiser-content` and was never carded, so the two pages did
   not match. COSMETICS ONLY — no display/grid-template/align properties on
   this element (footgun #52: it IS an SBX layout grid). */
#content .sbx-grid.fundraiser-content {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  margin-top: 22px !important;
}


/* ============================================================================
   rc-31 — logged-in admin controls on public pages (Edit / Delete).
   ========================================================================= */

/* ---- 31a. THIRD instance of the modal-position bug (footgun #56) --------
   `<a class="modal">` inherits SBX's `.modal { position: fixed }`. It bit the
   login page, then every recurring-donation Update link, and now the event
   "Delete" control — which floated at (440,90) over the header instead of
   sitting beside Edit. Pin ALL such links back into flow, site-wide. */
#content a.modal,
#content .hasTip a.modal {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
}

/* ---- 31b. Edit / Delete as real buttons, no pipe -----------------------
   These live in `ul.navbarmenu` (same structure as the Application View
   record page). Kill the list chrome + separator, then make each a pill. */
#content #eventsDetailNavBar-wrap,
#content #eventsDetailNavBar-content,
#content .compNavBar-wrap,
#content .compNavBar-content {
  border: 0 none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
#content ul.navbarmenu {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 none !important;
  min-height: 0 !important;
}
/* the "|" is a border/`::after` on the list items — remove every variant */
#content ul.navbarmenu > li,
#content ul.navbarmenu > li.first,
#content ul.navbarmenu > li.last,
#content ul.navbarmenu > li.right {
  list-style: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  width: auto !important;
}
#content ul.navbarmenu > li::before,
#content ul.navbarmenu > li::after,
#content ul.navbarmenu .hasTip::before,
#content ul.navbarmenu .hasTip::after { content: none !important; display: none !important; }
#content ul.navbarmenu .hasTip { display: inline-block !important; margin: 0 !important; padding: 0 !important; }

/* Edit = filled brand pill; Delete = red outline (destructive, so it should
   not look identical to the safe action). */
#content ul.navbarmenu a,
#content ul.navbarmenu a.modal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 24px !important;
  margin: 0 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content ul.navbarmenu a:hover,
#content ul.navbarmenu a.modal:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}
#content ul.navbarmenu a.modal {
  background: #fff !important;
  border-color: #C2543E !important;
  color: #C2543E !important;
}
#content ul.navbarmenu a.modal:hover {
  background: #C2543E !important;
  border-color: #C2543E !important;
  color: #fff !important;
}


/* ============================================================================
   rc-32 — My Event Orders index + order detail refinements.
   ========================================================================= */

/* ---- 32a. Event names are TEXT, not buttons ---------------------------
   rc-29d pilled every `td a:not(.btn)` so the row ACTIONS (View / Copy Link /
   Edit) would separate. That also caught the event-name link in column 1,
   which should stay plain text. Exclude the first column. */
#content .eventsManage table.resultsTBL td:first-child a:not(.btn) {
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1B3A66 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: normal !important;
}
#content .eventsManage table.resultsTBL td:first-child a:not(.btn):hover {
  background: transparent !important;
  color: #2D5798 !important;
  border: 0 none !important;
  text-decoration: underline !important;
}

/* ---- 32b. Every column heading aligns with its own data ----------------
   SBX right-aligns some `th` (Status here, Action on the order page) while
   the cells below stay left, so the label floated away from its column. */
/* NOTE: rc-22b right-aligns `#content table.resultsTBL thead th:last-child`
   for the PUBLIC gala ticket table (its last column is Price). On the account
   tables the last column is Status / Action, whose data is left-aligned — so
   that rule has to be undone here, matching its selector shape to win. */
#content .eventsManage table.resultsTBL thead th,
#content .eventsManage table.resultsTBL thead th:last-child,
#content .eventsManage table.resultsTBL th,
#content .eventsManage table.resultsTBL td,
#content .donationsManage table.resultsTBL thead th,
#content .donationsManage table.resultsTBL thead th:last-child,
#content .donationsManage table.resultsTBL th,
#content .donationsManage table.resultsTBL td {
  text-align: left !important;
}


/* ---- 32c. Order-detail: gap between the two meta cards -----------------
   They are `dl.definition-list` siblings inside a flex row that already uses
   justify-space-between — but each is 600px in a 1200px row, so they touch
   edge-to-edge. Add a real gap and let them share the remainder. */
#content .eventsManage .flex.flex-row.justify-space-between,
#content .eventsManage div.flex.flex-row { gap: 24px !important; }
#content .eventsManage dl.definition-list {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ---- 32d. Order-detail action buttons ---------------------------------
   Cancel Order and the Wallet badges must be the SAME size. The wallet
   artwork is a fixed-aspect SVG (~152x42), so that is the reference: Cancel
   Order matches its height, and neither changes size on hover. */
#content .eventsManage a.btn.btnCancelOrder,
#content .eventsManage .btnCancelOrder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;   /* centred like every other button */
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  width: 152px !important;              /* matches the wallet badge */
  padding: 0 !important;
  border: 2px solid #C2543E !important;
  border-radius: 999px !important;
  background: #C2543E !important;       /* SOLID red, white text */
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}
#content .eventsManage a.btn.btnCancelOrder:hover,
#content .eventsManage .btnCancelOrder:hover {
  background: #fff !important;          /* invert: white bg, red text+border */
  color: #C2543E !important;
  border: 2px solid #C2543E !important;
  border-color: #C2543E !important;
  height: 42px !important;              /* never resize on hover */
  width: 152px !important;
  transform: none !important;
  box-shadow: none !important;
}
/* wallet badges: fixed box, and NOTHING changes on hover */
#content a.btn:not(.btn-amount):has(> img) > img,
#content .eventsManage a.btn img {
  height: 42px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block !important;
}
#content .eventsManage a.btn:has(img),
#content .eventsManage a.btn:has(img):hover {
  height: 42px !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ---- 32e. Ticket view: Copy Link / Edit as filled blue buttons ---------
   These live in `.actionSect` (not the navbar the rc-29d rule targets), so
   they stayed bare 27px-tall text links. */
#content .eventsManage .actionSect a,
#content .actionSect a:not(.btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 22px !important;
  margin: 0 10px 0 0 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
#content .eventsManage .actionSect a:hover,
#content .actionSect a:not(.btn):hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}
#content .actionSect {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 18px !important;
}


/* ============================================================================
   rc-33 — Event registration attendee rows (revealed after choosing a ticket
   quantity) + checkout.
   NOTE: the attendee panel loads by AJAX on a real quantity change, which
   could not be reproduced with synthetic events during authoring. These rules
   target the documented SBX/Salesforce markup and are SAFE no-ops when the
   elements are absent — but they are the one part of this round that is
   unverified on screen. Check them on the deployed page.
   ========================================================================= */

/* ---- 33a. "Select a Household Member" dropdown ------------------------
   Sat flush against the attendee name with no gutter, and was too narrow to
   show its own default option. */
#content .well-table select,
#content tr.btn-edit-attendee select,
#content select[name*="household"],
#content select[id*="household"],
#content .attendee-row select {
  min-width: 260px !important;   /* fits "- Select a Household Member -" */
  width: auto !important;
  height: 44px !important;
  margin-left: 16px !important;  /* breathing room from the name beside it */
  padding: 0 34px 0 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #1B3A66 !important;
  text-overflow: ellipsis !important;
}

/* ---- 33b. Salesforce picklists must show their default option ----------
   SBX/Salesforce picklists (Dietary Preference etc.) ship narrow, clipping
   "- Select -". Size them to their content and keep room for the caret. */
#content .well-table select,
#content select.sf-picklist,
#content select[name*="picklist"],
#content select[data-sf-field],
#content .compList select:not([name^="ticket-"]) {
  min-width: 220px !important;
  width: auto !important;
  max-width: 100% !important;
  padding-right: 34px !important;    /* clear of the dropdown arrow */
  text-overflow: ellipsis !important;
  overflow: visible !important;
}
/* the ticket-quantity selects stay compact — they only hold 0-10 */
#content select[name^="ticket-"]:not([name*="attendee"]) {
  min-width: 0 !important;
  width: 72px !important;
  padding-right: 10px !important;
}

/* ---- 33c. Copy Contact Info / Remove must not resize on hover ----------
   Both were changing size on hover, which shifts the whole attendee row. */
#content .well-table .btn,
#content .well-actions .btn,
#content tr.btn-edit-attendee .btn,
#content .well-table .btn:hover,
#content .well-actions .btn:hover,
#content tr.btn-edit-attendee .btn:hover {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}


/* ---- 33d. CHECKOUT (/checkout) — items table --------------------------
   `table.events-cart.cart-table` sits on .sbxEvents-cart. It rendered with a
   wide empty first column pushing every item right, and no card treatment
   (the rc-27b shop-cart rules key off a different wrapper). */
#content table.events-cart {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  margin: 0 0 26px !important;
}
#content table.events-cart th {
  background: #F6F9FD !important;
  border: 0 none !important;
  border-bottom: 2px solid #E7EEF7 !important;
  padding: 14px 18px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  text-align: left !important;
}
#content table.events-cart td {
  background: transparent !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  padding: 18px !important;
  vertical-align: middle !important;
  font-size: 15px !important;
  color: #33445C !important;
  text-align: left !important;
}
#content table.events-cart tr:last-child td { border-bottom: 0 none !important; }
/* `td.item-thumb` reserves ~136px for a product thumbnail these event line
   items never have, shoving the title right and leaving a dead column. */
#content table.events-cart td.item-thumb:empty {
  padding: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  border: 0 none !important;
  overflow: hidden !important;
}
#content table.events-cart td:empty:not(.item-thumb),
#content table.events-cart th:empty { padding: 0 !important; border-bottom: 1px solid #EDF2F8 !important; }
/* Event title + meta hierarchy.
   NOTE: SBX wraps EVERY line of the item cell in <strong> — title, dates,
   times and venue alike. Styling `td strong` as a block heading therefore
   exploded the meta onto one Fraunces line each. Only the FIRST strong is the
   title; the rest are meta and must stay inline body text. */
#content table.events-cart td > strong:first-child,
#content table.events-cart td > b:first-child {
  display: block !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  margin-bottom: 6px !important;
}
#content table.events-cart td strong,
#content table.events-cart td b {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #5A6B80 !important;
  display: inline !important;
}
#content table.events-cart td > strong:first-child { display: block !important; }
/* price / qty / total columns read as tabular figures */
#content table.events-cart td:nth-last-child(3),
#content table.events-cart td:nth-last-child(2),
#content table.events-cart td:last-child {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
/* attendee Remove pills: small, and never resize on hover */
#content table.events-cart .btn,
#content table.events-cart a.btn,
#content table.events-cart .btn:hover,
#content table.events-cart a.btn:hover {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}
#content table.events-cart .btn { border-color: #DCE6F2 !important; background: #fff !important; color: #6B7A8D !important; }
#content table.events-cart .btn:hover { border-color: #C2543E !important; color: #C2543E !important; background: #fff !important; }

/* ---- 33e. CHECKOUT payment tiles: match the donate/event pages --------
   These were 177x72 with 45x30 logos; every other page uses the compact
   78x46 tile with a centred ~22px logo (rc-26b). `.sbxPayType > span.span-block`
   is the Events-app markup — it has no `.paytype-*` class, so rc-26b never
   reached it. */
#content .sbxPayType { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important; }
#content .sbxPayType > span.span-block {
  display: block !important;
  flex: 0 0 78px !important;
  width: 78px !important;
  max-width: 78px !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
#content .sbxPayType label.choice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
#content .sbxPayType label.choice img {
  display: block !important;
  max-height: 22px !important;
  max-width: 88% !important;
  width: auto !important;
  margin: 0 !important;
}
#content .sbxPayType label.choice:hover { border-color: #2D5798 !important; }
#content .sbxPayType > span.span-block:has(input:checked) label.choice {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .16) !important;
}


/* ============================================================================
   rc-34 — follow-ups.
   ========================================================================= */

/* ---- 34a. P2P personal hero: round the element that carries the PHOTO ---
   rc-30a rounded #section-fundraiser-header, but on this page the background
   image lives on an inner `.col-fundraiser-image-left` that is 1220px wide
   inside a 1200px parent — so the photo spilled past the rounded corners and
   the hero still read as square. Round the image element itself. */
#content #section-fundraiser-header .col-fundraiser-image-left,
#content [class*="col-fundraiser-image"],
#content [class*="fundraiser-image"] {
  border-radius: 18px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  box-sizing: border-box !important;
}

/* ---- 34b. Order detail / ticket view: breathing room under the meta cards
   The `.flex.flex-row` card row had margin-bottom:0, so the ticket table sat
   flush against it. 24px measured correct but still read as tight, because
   each card carries a `0 10px 28px` drop shadow that visually fills most of
   that gap — the *perceived* separation was only a few pixels. 40px gives a
   real break between the meta block and the table below on BOTH the order
   page (`table.resultsTBL`) and the ticket page (stacked detail cards). */
#content .eventsManage .flex.flex-row.justify-space-between,
#content .eventsManage div.flex.flex-row { margin-bottom: 40px !important; }
/* the table wrapper that follows must not claw the space back */
#content .eventsManage .compResTbl-wrap,
#content .eventsManage .compResTbl-content { margin-top: 0 !important; }
/* on the ticket page the stacked cards below also need room between them */
#content .eventsManage .compResTbl-content > dl.definition-list { margin-bottom: 22px !important; }
#content .eventsManage .compResTbl-content > dl.definition-list:last-child { margin-bottom: 0 !important; }

/* ---- 34c. Wallet badge: NOTHING changes on hover ----------------------
   The generic `#content a.btn:not(.btn-amount):hover` rule sets `border: 2px`
   and outranks a plain `:has(img)` selector, so a border appeared and the box
   grew on hover. Mirror the :not() shape so this wins, and pin every metric. */
#content a.btn:not(.btn-amount):has(> img),
#content a.btn:not(.btn-amount):has(> img):hover,
#content a.btn:not(.btn-amount):has(img),
#content a.btn:not(.btn-amount):has(img):hover,
#content .eventsManage a.btn:has(img),
#content .eventsManage a.btn:has(img):hover {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 none !important;
  border-width: 0 !important;
  border-style: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  outline: 0 !important;
}
#content a.btn:not(.btn-amount):has(> img) > img,
#content a.btn:not(.btn-amount):has(> img):hover > img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
}


/* ---- 34d. MooTools tooltip (`div.tool-tip`) ---------------------------
   SBX ships MooTools' default tip: a pale-yellow rgb(255,255,204) box with a
   1px border, square corners and 16.5px body text — completely outside the
   design system, and it sits misaligned against the Edit/Delete buttons.
   Restyle it as a compact dark tooltip. It is created ONCE per page and
   reused, so this single rule covers every tipped control. */
.tool-tip,
#content .tool-tip,
body .tool-tip {
  box-sizing: border-box !important;
  max-width: 280px !important;
  padding: 8px 12px !important;
  border: 0 none !important;
  border-radius: 8px !important;
  background: #1B3A66 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  box-shadow: 0 6px 20px rgba(16, 30, 51, .28) !important;
  z-index: 100001 !important;
  /* nudge clear of the control it describes — MooTools positions it hard
     against the cursor, which read as misaligned under the pill buttons */
  margin-top: 8px !important;
  pointer-events: none !important;
}
.tool-tip > div,
.tool-tip .tool-title,
.tool-tip .tool-text {
  background: transparent !important;
  border: 0 none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}
.tool-tip .tool-title {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  margin-bottom: 2px !important;
}
.tool-tip .tool-title:empty { display: none !important; margin: 0 !important; }


/* ---- 34e. CHECKOUT: Optional Donation block --------------------------
   Rendered at 23.1px bold title over a 20.79px BOLD description — far larger
   than the same element on the Events registration page. Match that scale
   (19px Fraunces title, 14px regular grey description). */
#content #form-donation-title,
#content .foot-donation-left #form-donation-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1B3A66 !important;
  margin: 0 0 2px !important;
}
#content #form-donation-desc,
#content .foot-donation-left #form-donation-desc {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #6B7A8D !important;
  margin: 0 !important;
}
#content .foot-donation-left { text-align: right !important; }

/* ---- 34f. CHECKOUT: make the line items readable ---------------------
   Recommendation, not just cosmetics: the cart shows EVENT, then ticket
   LEVEL, then each ATTENDEE, all as same-weight blue links in one cell — so
   there is no visual hierarchy telling you what belongs to what. Give the
   three tiers distinct roles and indent the attendees under their level. */
#content table.events-cart td.item-product > a:first-child,
#content table.events-cart td.item-product > strong:first-child {
  display: block !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
}
/* ticket level = small uppercase eyebrow, so it reads as a category */
#content table.events-cart .item-ticket-type,
#content table.events-cart .ticket-level,
#content table.events-cart td.item-product > div:first-of-type {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  margin: 0 0 8px !important;
}
/* Attendees indent under their level with a hairline rail.
   NOTE: `[class*="attendee"]` matches FIVE nested levels here
   (.cart-ticket-attendees > .cart-ticket-attendee > -name / -details /
   -remove), so a blanket rule drew five stacked rails and five paddings.
   Style ONLY the individual attendee row. */
#content table.events-cart .cart-ticket-attendee {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 5px 0 5px 14px !important;
  border-left: 2px solid #E7EEF7 !important;
  margin: 0 0 6px !important;
}
#content table.events-cart .cart-ticket-attendees {
  padding: 0 !important;
  border-left: 0 none !important;
  margin: 4px 0 0 !important;
}
#content table.events-cart .cart-ticket-attendee-name {
  padding: 0 !important;
  border-left: 0 none !important;
  margin: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #33445C !important;
  white-space: nowrap !important;
}
#content table.events-cart .cart-ticket-attendee-details,
#content table.events-cart .cart-ticket-attendee-remove {
  padding: 0 !important;
  border-left: 0 none !important;
  margin: 0 !important;
}
#content table.events-cart .cart-ticket-attendee-details:empty { display: none !important; }


/* ---- 34g. MULTI-DAY events: the end date fell out of the grid ---------
   rc-22a made `.whendate` a 2-column grid (tile | date) assuming ONE
   `p.datestart`. Multi-day events add `p.dateend` (plus a `span.to`), which
   wrapped onto a second row UNDERNEATH the calendar tile at x=152 instead of
   continuing beside it at x=272 — so the end date read as orphaned.
   Fix: keep the tile in column 1 and let BOTH date blocks share column 2. */
#content #sectWhen-content .whendate {
  grid-template-columns: 104px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  row-gap: 0 !important;
}
#content #sectWhen-content .whendate .rc-caltile {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;   /* tile spans both date rows */
  align-self: start !important;
}
#content #sectWhen-content .whendate p.datestart { grid-column: 2 !important; grid-row: 1 !important; }
#content #sectWhen-content .whendate p.dateend   { grid-column: 2 !important; grid-row: 2 !important; margin-top: 10px !important; }
/* the end date is secondary — smaller than the start, with a clear "to" */
#content #sectWhen-content .whendate p.dateend span.date {
  font-size: 18px !important;
  color: #33445C !important;
}
#content #sectWhen-content span.to {
  display: inline-block !important;
  margin: 8px 0 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #8494A8 !important;
}

/* ---- 34h. Household / picklist dropdowns: stop clipping their labels ---
   rc-33a/b set min-width but the SBX field rules cap these selects, so the
   default option ("- Select a Household Member -", "- Select -") still got
   cut. Size to content and mirror the .field/.text shape so this wins. */
#content select.field:not([name^="ticket-"]),
#content select.text:not([name^="ticket-"]),
#content .well-table select,
#content .well select,
#content tr.btn-edit-attendee select,
#content select[name*="household"],
#content select[id*="household"],
#content select[name*="Household"] {
  width: auto !important;
  min-width: 300px !important;      /* fits "- Select a Household Member -" */
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 36px 0 12px !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  font-size: 15px !important;
}
/* Salesforce picklists (Dietary Preference etc.) */
#content .well-table select[name*="sf"],
#content select[data-sf-field],
#content select[name*="picklist"],
#content .attendee-fields select { min-width: 260px !important; }
/* ticket-quantity selects stay compact (they only hold 0-10).
   MUST exclude attendee fields: their names are
   "ticket-474.attendee-1.household-memeber", which also start with "ticket-"
   — that is what kept clamping the household dropdown to 72/88px. */
#content select[name^="ticket-"]:not([name*="attendee"]) {
  width: 72px !important;
  min-width: 0 !important;
  padding-right: 10px !important;
}


/* ============================================================================
   rc-35 — Event registration attendee rows, verified against the LIVE panel.
   The earlier rc-33/34h attempts guessed at selectors because the panel loads
   by AJAX and could not be triggered synthetically. With a real session the
   actual markup is:
     select.household-select        name="ticket-N.attendee-1.household-memeber"
     select.field.select            name="ticket-N.attendee-1.<SF_field>__c"
     button.autofill-attendee.btn-info    ("Copy Contact Info")
     button.remove-attendee.btn-danger    ("Remove")
   all inside `div.row-actions.btn-toolbar`. Both selects ship at a hard 88px,
   which clipped "Select A Household Member" and "- Select -".
   ========================================================================= */

/* ---- 35a. Household member dropdown ----------------------------------- */
#content select.household-select,
#content select[name*="household"],
#content .row-actions select {
  width: auto !important;
  min-width: 300px !important;   /* "Select A Household Member" measures 210px */
  max-width: 100% !important;
  height: 40px !important;
  margin-left: 18px !important;  /* gutter from the "Attendee #N" title */
  padding: 0 36px 0 12px !important;
  box-sizing: border-box !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  color: #1B3A66 !important;
  text-overflow: ellipsis !important;
}

/* ---- 35b. Salesforce picklists (Dietary Preference etc.) --------------
   Any per-attendee custom field renders as `select.field.select` inside
   `.cntr` — same 88px clamp, so "- Select -" was cut off. */
#content .cntr > select.field.select,
#content select.field.select:not([name^="ticket-"]),
#content select[name*="__c"] {
  width: auto !important;
  min-width: 260px !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 36px 0 12px !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  font-size: 15px !important;
}
/* the ticket-quantity selects stay compact — they only hold 0-10 */
#content select[name^="ticket-"]:not([name*="attendee"]) {
  width: 72px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding-right: 10px !important;
}

/* ---- 35c. Copy Contact Info / Remove: no size change on hover ---------
   Real classes are .autofill-attendee.btn-info and .remove-attendee.btn-danger
   (Bootstrap .btn-mini), 30px tall with 7px 18px padding. Pin every metric in
   BOTH states so the row never shifts. */
#content .autofill-attendee,
#content .remove-attendee,
#content .row-actions .btn,
#content .autofill-attendee:hover,
#content .remove-attendee:hover,
#content .row-actions .btn:hover,
#content .autofill-attendee:focus,
#content .remove-attendee:focus {
  box-sizing: border-box !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}
#content .autofill-attendee {
  border-color: #2D5798 !important;
  background: #2D5798 !important;
  color: #fff !important;
}
#content .autofill-attendee:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border-color: #2D5798 !important;
}
#content .remove-attendee {
  border-color: #DCE6F2 !important;
  background: #fff !important;
  color: #6B7A8D !important;
}
#content .remove-attendee:hover {
  background: #fff !important;
  color: #C2543E !important;
  border-color: #C2543E !important;
}
#content .row-actions .btn-group { margin-left: 10px !important; }
#content .row-actions.btn-toolbar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; }
#content .row-actions .title { flex: 0 0 auto !important; }


/* ============================================================================
   rc-36 — Upcoming Events listing + My Organization record.
   ========================================================================= */

/* ---- 36a. UPCOMING EVENTS (/calendar/upcoming-events) -----------------
   Every event dumped its FULL description inline — multi-paragraph copy,
   objectives lists, the lot — with no card and no separation, so the page read
   as one 6000px wall of text and you could not scan the list at all.
   Each event is a `div.contentpaneopen`; card it, and CLAMP the description so
   the listing stays scannable (the detail page has the full text). */
#content .eventsCalendar .contentpaneopen,
#content #page[class*="Events"] .contentpaneopen,
#content .article_column.event_column .contentpaneopen {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 26px 30px 28px !important;
  margin: 0 0 24px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* title */
#content .event-title h2.contentheading,
#content .article-title.event-title h2 {
  margin: 0 0 10px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content .event-title a.contentpagetitle {
  color: #1B3A66 !important;
  text-decoration: none !important;
  font-size: 24px !important;
}
#content .event-title a.contentpagetitle:hover { color: #2D5798 !important; }
/* date line reads as the primary meta; location is secondary */
#content .event-meta-wrap { margin: 0 0 14px !important; padding: 0 0 14px !important; border-bottom: 1px solid #EDF2F8 !important; }
#content .event-meta-content .meta-line.meta-line-med {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  margin: 0 0 4px !important;
}
#content .event-meta-content .meta-line:not(.meta-line-med) {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  color: #6B7A8D !important;
}
/* CLAMP the description: ~4 lines, faded out, so every card is a similar
   height and the list can actually be scanned. */
#content .article-content.event-content {
  position: relative !important;
  max-height: 108px !important;
  overflow: hidden !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #33445C !important;
  margin: 0 !important;
}
#content .article-content.event-content::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 46px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%) !important;
  pointer-events: none !important;
}
/* inside the clamp, suppress the heavy sub-structure so 4 lines of prose show
   instead of a stray "Objectives:" heading and a bullet list */
#content .article-content.event-content p { margin: 0 0 8px !important; }
#content .article-content.event-content br { display: none !important; }
#content .article-content.event-content ul,
#content .article-content.event-content ol,
#content .article-content.event-content strong { display: none !important; }
#content .article-content.event-content p:first-child { display: block !important; }
/* An event whose description LEADS with an image had the image sliced in half
   by the 108px clamp. Give image-led cards a proper banner instead: let the
   image fill the card width at a fixed height and drop the text clamp fade. */
#content .article-content.event-content img {
  display: block !important;
  width: 100% !important;
  height: 108px !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  border-radius: 10px !important;
  margin: 0 !important;
}
#content .article-content.event-content:has(img) { max-height: 108px !important; }
#content .article-content.event-content:has(img)::after { display: none !important; }
/* separators between events are redundant once each is a card */
#content .article_separator, #content .event_separator { display: none !important; }
/* the RSS "Subscribe" control reads as a quiet chip */
#content .article_column a[href*="format=feed"],
#content a[href*="format=feed"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  color: #6B7A8D !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#content a[href*="format=feed"]:hover { border-color: #2D5798 !important; color: #2D5798 !important; }

/* ---- 36b. MY ORGANIZATION (/my-account/my-organization) ---------------
   Bare `Label: value` lines on white, cramped into the left half of a
   1176px container. Same JSF markup as My Profile (.record-container,
   .element-label / .element-data), so give it the same card treatment plus a
   two-column field grid so it uses the width it has. */
#content .myprofile-search .record-container,
#content .com_jsf .record-container {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 28px 32px 30px !important;
  margin: 0 0 22px !important;
  box-sizing: border-box !important;
}
#content .record-container h2.contentheading,
#content .record-container .item-pagetitle h2 {
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content .record-container h2.contentheading a,
#content .record-container h2.contentheading a .element-data,
#content .record-container h2.contentheading .element-data {
  color: #1B3A66 !important;
  text-decoration: none !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
}
/* section headings ("Address Information") */
#content .record-container h3 {
  margin: 26px 0 12px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}
/* field rows: label above value, two per row so the card is not half empty */
#content .record-container .article-meta-content,
#content .record-container .pos-metaC,
#content .record-container .item-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px 28px !important;
  align-items: start !important;
}
#content .record-container .meta-line-element,
#content .record-container .element.meta-line-element {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
#content .record-container .element-label {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}
#content .record-container .element-data {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1B3A66 !important;
  word-break: break-word !important;
}
#content .record-container .element-data a { color: #2D5798 !important; text-decoration: none !important; }
#content .record-container .element-data a:hover { text-decoration: underline !important; }
/* empty placeholder rows collapse instead of leaving gaps */
#content .record-container .meta-line-element:not(:has(.element-data)):not(:has(h3)) { display: none !important; }
/* Section headings ("Address Information") are themselves grid CELLS — SBX
   emits them as `.element-plaintext` items in the same meta list — so they
   were laid out inline as if they were a field. Span the full row so they
   break the grid into sections the way they read on the source page. */
#content .record-container .meta-line-element:has(h3),
#content .record-container .element-plaintext:has(h3) {
  grid-column: 1 / -1 !important;
  margin: 12px 0 0 !important;
}
#content .record-container .meta-line-element h3,
#content .record-container .element-textdata h3 {
  margin: 0 0 2px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #EDF2F8 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
}
/* The Edit control sits BEFORE the field list in DOM order (it renders at
   y=369 while the fields end at y=552), so it landed in the middle of the
   card. Flex the record container and order it last. */
#content .record-container,
#content .contentpaneopen.record-container {
  display: flex !important;
  flex-direction: column !important;
}
#content .record-container > .item-pagetitle,
#content .record-container > .title-container { order: 0 !important; }
#content .record-container > .meta-container,
#content .record-container > .item-meta { order: 1 !important; }
/* the real wrapper is `.item-actions` (holding .ia > form > a.ia-link), NOT
   `.edit-button-container` — that one is empty on this page. */
#content .record-container > .item-actions,
#content .record-container > .edit-button-container {
  order: 2 !important;
  margin-top: 26px !important;
  padding-top: 22px !important;
  border-top: 1px solid #EDF2F8 !important;
}
#content .record-container > .item-actions:empty,
#content .record-container > .edit-button-container:empty {
  margin: 0 !important; padding: 0 !important; border: 0 none !important;
}
#content .record-container > .edit-button-container:empty {
  margin: 0 !important; padding: 0 !important; border: 0 none !important;
}


/* ---- 36c. PAST EVENTS: collapse the empty description block -----------
   Past events often carry no description, leaving the clamp's 108px reserved
   space as a gap between the date line and "Read more...". */
#content .article-content.event-content:not(:has(p)):not(:has(img)),
#content .article-content.event-content:empty {
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#content .article-content.event-content:empty::after { display: none !important; }

/* ---- 36d. POST AN EVENT (/calendar/post-an-event) ---------------------
   Four `.compSect-wrap` sections (eventInfo / eventTickets / eventTerms /
   eventPub); only eventTickets was carded (it inherits rc-22's registration
   styling). Card them all so the form reads as a set of grouped steps. */
#content .compSect-wrap.eventInfo,
#content .compSect-wrap.eventTerms,
#content .compSect-wrap.eventPub,
#content .form-eventSubmit .compSect-wrap {
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 24px 28px 26px !important;
  margin: 0 0 22px !important;
  box-sizing: border-box !important;
}
#content .form-eventSubmit .compSect-title h3,
#content .compSect-wrap.eventInfo h3,
#content .compSect-wrap.eventTerms h3,
#content .compSect-wrap.eventPub h3 {
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #EDF2F8 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
/* the "Add" controls beside Venue / Host shipped as raw browser buttons
   floating above their selects */
/* The "Add" controls are `a.ia-link.addLink.modal`, NOT input buttons — and
   the Application-View rule for `.ia-link` stretched them into full-width
   pills floating above their selects. Size them to their own content. */
#content a.ia-link.addLink,
#content .form-eventSubmit a.addLink,
#content .form-eventSubmit input[type="button"],
#content .form-eventSubmit .btn-add,
#content .form-eventSubmit input[value="Add"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  width: auto !important;
  padding: 0 18px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
#content a.ia-link.addLink,
#content .form-eventSubmit a.addLink {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  vertical-align: middle !important;
  margin: 0 0 0 10px !important;
}
#content a.ia-link.addLink:hover,
#content .form-eventSubmit a.addLink:hover,
#content .form-eventSubmit input[type="button"]:hover,
#content .form-eventSubmit input[value="Add"]:hover {
  border-color: #2D5798 !important;
  background: #2D5798 !important;
  color: #fff !important;
}
/* the [show/hide] toggle above the rich-text editor reads as a quiet link */
#content .form-eventSubmit a[href*="show"],
#content .form-eventSubmit .toggle-editor {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #6B7A8D !important;
  text-decoration: none !important;
}
/* the rich-text editor chrome gets the same rounded treatment as fields */
#content .form-eventSubmit .cke,
#content .form-eventSubmit .cke_chrome,
#content .form-eventSubmit iframe.cke_wysiwyg_frame {
  border-radius: 10px !important;
  border-color: #DCE6F2 !important;
  overflow: hidden !important;
}
#content .form-eventSubmit .cke_top,
#content .form-eventSubmit .cke_bottom {
  background: #F6F9FD !important;
  border-color: #DCE6F2 !important;
}


/* ============================================================================
   rc-37 — FORMS app (`form.form-jsfsubmit`), e.g. the Coach Survey at
   /other/forms/<form-name>. 26 field rows in a single flat `ul.compList`,
   all with identical 6px padding, floating on bare white with no card — so a
   long survey read as one undifferentiated stack.
   ========================================================================= */

/* ---- 37a. Card the form ------------------------------------------------ */
#content .form-jsfsubmit,
#content form.form-jsfsubmit {
  display: block !important;
  background: #fff !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  padding: 30px 34px 32px !important;
  margin: 0 0 26px !important;
  box-sizing: border-box !important;
  max-width: 860px !important;   /* long forms are easier to read narrower */
}

/* ---- 37b. Field rhythm ------------------------------------------------
   Every `li` shipped with the same 6px padding, so questions ran together.
   Give each row real separation and a hairline between questions. */
#content .form-jsfsubmit ul.compList { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#content .form-jsfsubmit ul.compList > li {
  list-style: none !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #EDF2F8 !important;
}
#content .form-jsfsubmit ul.compList > li:first-child { padding-top: 0 !important; }
/* SBX emits an empty leading <li> (the form's description slot); it drew a
   stray divider across the top of the card. */
#content .form-jsfsubmit ul.compList > li:empty,
#content .form-jsfsubmit ul.compList > li:not(:has(*)):not(:has(input)) {
  display: none !important;
}
#content .form-jsfsubmit .compDesc-wrap:not(:has(p)):empty { display: none !important; }
/* The stray rule across the top of the card is a `border-top` on
   `div.compSect-wrap.jsfsubmitForm` — an inner wrapper, not the list. The
   card already provides that edge. */
#content .form-jsfsubmit .compSect-wrap,
#content .compSect-wrap.jsfsubmitForm {
  border: 0 none !important;
  border-top: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#content .form-jsfsubmit ul.compList > li:last-child { border-bottom: 0 none !important; }
/* the "Hi, my name is ryan...." intro line is not a question */
#content .form-jsfsubmit ul.compList > li:not(:has(input)):not(:has(select)):not(:has(textarea)) {
  border-bottom: 0 none !important;
  padding-bottom: 4px !important;
  color: #6B7A8D !important;
}

/* ---- 37c. Labels + controls ------------------------------------------- */
#content .form-jsfsubmit label.desc,
#content .form-jsfsubmit label {
  display: block !important;
  margin: 0 0 8px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1B3A66 !important;
}
#content .form-jsfsubmit input[type="text"],
#content .form-jsfsubmit input[type="email"],
#content .form-jsfsubmit input.field,
#content .form-jsfsubmit textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content .form-jsfsubmit input[type="text"],
#content .form-jsfsubmit input.field { height: 46px !important; padding: 0 14px !important; }
#content .form-jsfsubmit textarea { min-height: 110px !important; padding: 12px 14px !important; }
/* rating selects: consistent width, wide enough for their options */
#content .form-jsfsubmit select {
  box-sizing: border-box !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 100% !important;
  height: 46px !important;
  padding: 0 36px 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
}
#content .form-jsfsubmit input:focus,
#content .form-jsfsubmit select:focus,
#content .form-jsfsubmit textarea:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}

/* ---- 37d. Submit row --------------------------------------------------- */
#content .form-jsfsubmit li.buttons {
  border-bottom: 0 none !important;
  padding-top: 24px !important;
}
#content .form-jsfsubmit .btn-submit,
#content .form-jsfsubmit button[type="submit"],
#content .form-jsfsubmit input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 160px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 32px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#content .form-jsfsubmit .btn-submit:hover,
#content .form-jsfsubmit button[type="submit"]:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}
/* the required-fields note is secondary, not a red warning */
#content .form-jsfsubmit li.requiredtext,
#content .form-jsfsubmit .requiredtext,
#content .form-jsfsubmit span.req {
  border-bottom: 0 none !important;
  padding-top: 4px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #6B7A8D !important;
}

/* ---- 37e. Forms MOBILE (390px portrait) ------------------------------- */
@media (max-width: 767px) {
  #content .form-jsfsubmit, #content form.form-jsfsubmit { padding: 20px 18px 22px !important; border-radius: 14px !important; }
  #content .form-jsfsubmit ul.compList > li { padding: 15px 0 !important; }
  #content .form-jsfsubmit select { width: 100% !important; min-width: 0 !important; }
  #content .form-jsfsubmit .btn-submit,
  #content .form-jsfsubmit button[type="submit"] { width: 100% !important; }
}


/* ============================================================================
   rc-38 — SHOP "Order Form" experience (`table.shop-table`), e.g.
   /shop/membership. A single-page buy flow: product table with inline
   quantity, an optional-donation row, subtotal, then contact/billing cards.
   Written generically (no store-specific selectors) so it standardises across
   every template we build for the Shop app's Order Form.
   ========================================================================= */

/* ---- 38a. Product table as a card ------------------------------------- */
#content table.shop-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(27, 58, 102, .05), 0 10px 28px rgba(27, 58, 102, .06) !important;
  margin: 0 0 26px !important;
}
#content table.shop-table th {
  background: #F6F9FD !important;          /* was flat #EEE */
  border: 0 none !important;
  border-bottom: 2px solid #E7EEF7 !important;
  padding: 14px 18px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  text-align: left !important;
}
#content table.shop-table td {
  background: transparent !important;
  border: 0 none !important;
  border-bottom: 1px solid #EDF2F8 !important;
  padding: 18px !important;
  vertical-align: middle !important;
  font-size: 15px !important;
  color: #33445C !important;
}
#content table.shop-table tr:last-child td { border-bottom: 0 none !important; }
#content table.shop-table tbody tr:hover td { background: #F9FBFE !important; }

/* ---- 38b. Product cell: image, name, description, status -------------- */
#content table.shop-table img.product-thumb,
#content table.shop-table td img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #E3EBF5 !important;
  box-sizing: border-box !important;
}
#content table.shop-table .product-name,
#content table.shop-table td h3,
#content table.shop-table td > a:not(.btn) {
  display: block !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1B3A66 !important;
  text-decoration: none !important;
  margin: 0 0 4px !important;
}
#content table.shop-table .product-desc,
#content table.shop-table .description {
  font-size: 14px !important;
  color: #6B7A8D !important;
  margin: 0 0 6px !important;
}
/* stock badge -> brand pill (was a flat grey rectangle) */
#content .label.label-in,
#content table.shop-table span.label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  border: 1px solid #C9DCF2 !important;
  background: #EAF2FC !important;
  background-image: none !important;
  color: #23477F !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}
/* out-of-stock / sold-out reads muted rather than alarming */
#content .label.label-out,
#content .label.label-sold {
  background: #F1F3F6 !important;
  border-color: #DDE2E9 !important;
  color: #6B7A8D !important;
}

/* ---- 38c. Price / qty / total ----------------------------------------- */
#content table.shop-table td.price,
#content table.shop-table td.total,
#content table.shop-table td:nth-last-child(3),
#content table.shop-table td:last-child {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
#content table.shop-table select {
  width: 88px !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 10px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content table.shop-table select:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}

/* ---- 38d. Donation row + subtotal ------------------------------------- */
#content table.shop-table .donation-row td,
#content table.shop-table tr:has(input[name*="donation"]) td { background: #F9FBFE !important; }
#content table.shop-table input[type="text"]:not([name*="qty"]) {
  height: 46px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#content .display-subtotal,
#content .amount.display-subtotal,
#content table.shop-table .subtotal {
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---- 38e. Order Form MOBILE ------------------------------------------- */
@media (max-width: 767px) {
  #content table.shop-table { min-width: 520px !important; }
  #content div:has(> table.shop-table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #content table.shop-table th { padding: 10px !important; font-size: 10.5px !important; }
  #content table.shop-table td { padding: 12px 10px !important; font-size: 14px !important; }
  #content table.shop-table img.product-thumb, #content table.shop-table td img { width: 56px !important; height: 56px !important; }
  #content table.shop-table .product-name { font-size: 16px !important; }
  #content table.shop-table select { width: 76px !important; height: 40px !important; }
}


/* ============================================================================
   rc-39 — mobile burger: sit close to the viewport's right edge.
   Supersedes the three earlier "rc-17 addenda" attempts above, which each
   moved it partway. Measured on /shop/membership at 390px: the icon ended up
   25px from the right edge (shell padding 16px + the button's own internal
   inset), so it read as floating well inside the page.
   The bars are 26px wide inside a 44px tap target, i.e. 9px of dead space on
   each side. To land the BARS ~10px from the edge while keeping the full 44px
   touch area (accessibility), the button is pulled right by that inset.
   ========================================================================= */
@media (max-width: 1080px) {
  /* ROOT CAUSE: the header shell is a flex row with `justify-content: normal`
     and a 28px gap, so its children PACK LEFT — the burger simply landed
     wherever the brand block ended (right edge at 356 of 390), not at the
     viewport edge. No amount of margin on the button alone could fix that.
     Push the CTA block to the far right instead. */
  .rc-header .rc-header__inner.rc-shell {
    justify-content: space-between !important;
    /* 16px matches the logo's left gutter; the -9px below cancels the
       button's internal bar inset so the BARS land on that same 16px. */
    padding-right: 25px !important;
  }
  .rc-header__cta {
    margin-left: auto !important;   /* pin to the right edge of the row */
    margin-right: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
  }
  #rc-burger.rc-burger {
    margin-right: -9px !important;   /* cancel the button's own bar inset */
    padding-left: 10px !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;       /* never shrink the tap target */
  }
  /* the brand block must yield space so the burger can never be pushed off
     the right edge (at 320px it overflowed to -41px before this) */
  .rc-header .rc-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .rc-header .rc-brand__word { min-width: 0 !important; }
  .rc-header .rc-brand__name,
  .rc-header .rc-brand__tag {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
/* very narrow phones: drop the shell gap so the row still fits */
@media (max-width: 400px) {
  .rc-header .rc-header__inner.rc-shell { gap: 10px !important; }
}


/* ============================================================================
   rc-40 — mobile drawer Donate button + Order Form TOTAL column.
   ========================================================================= */

/* ---- 40a. Drawer "Donate" was navy-on-blue and over-tall --------------
   `.rc-drawer__nav a` (the generic drawer link rule) sets
   `color: var(--rc-ink)` and `padding: 15px 4px`, and it comes AFTER
   `.rc-btn--primary` in the sheet — so the CTA inherited near-invisible navy
   text on a blue fill, and the link padding inflated it to 60px tall with the
   label sitting low in the pill. Restate the button's own treatment. */
.rc-drawer .rc-drawer__donate,
.rc-drawer__nav a.rc-drawer__donate,
.rc-drawer a.rc-btn--primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  margin: 18px 0 6px !important;
  border: 2px solid var(--rc-purple, #2D5798) !important;
  border-radius: 999px !important;
  background: var(--rc-purple, #2D5798) !important;
  color: #fff !important;                 /* the actual fix */
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.rc-drawer .rc-drawer__donate:hover,
.rc-drawer__nav a.rc-drawer__donate:hover,
.rc-drawer a.rc-btn--primary:hover {
  background: #fff !important;
  color: var(--rc-purple, #2D5798) !important;
  border: 2px solid var(--rc-purple, #2D5798) !important;
  /* identical box in both states so nothing shifts or clips on hover */
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  transform: none !important;
}
/* the drawer must never clip its own CTA */
#rc-drawer.rc-drawer {
  padding-bottom: 22px !important;
  overflow: visible !important;
}

/* ---- 40b. Order Form: TOTAL column must not shift on quantity change ---
   Choosing a quantity rewrites the TOTAL cell ($0.00 -> $1,000.00), and with
   auto table layout the wider string re-flows every column. Reserve stable
   widths for the numeric columns so only the digits change. */
#content table.shop-table th:nth-last-child(3),
#content table.shop-table td:nth-last-child(3) { width: 150px !important; }
#content table.shop-table th:nth-last-child(2),
#content table.shop-table td:nth-last-child(2) { width: 120px !important; }
#content table.shop-table th:last-child,
#content table.shop-table td:last-child {
  width: 150px !important;
  min-width: 150px !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;  /* digits share one width */
}
/* the product column absorbs the remainder */
#content table.shop-table th:first-child,
#content table.shop-table td:first-child { width: auto !important; }


/* ============================================================================
   rc-41 — Order Form per-item custom fields (quantity > 1).
   Choosing qty N reveals N `tr.product-details` blocks, each holding a nested
   `table.table-inwell` with a `tr.tr-header` ("Item #N" + Remove) and a
   `tr.tr-form` (.well.well-form with the field list).
   ========================================================================= */

/* ---- 41a. MULTI-SELECTS MUST NOT BE CLAMPED TO 44px -------------------
   THE bug on this page: a `<select multiple size="5">` with 8 options was
   forced to height:44px by the generic field rule, so its options rendered
   OUTSIDE the control and spilled down the page as loose text. A multiple
   select needs its own height and its own scroll. */
#content select[multiple],
#content select[size]:not([size="1"]),
#content .product-details-list select[multiple] {
  height: auto !important;
  min-height: 132px !important;
  max-height: 176px !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
  line-height: 1.7 !important;
  background-image: none !important;   /* no caret on a list box */
}
#content select[multiple] option { padding: 3px 6px !important; }

/* ---- 41b. Each item reads as its own labelled block ------------------- */
#content tr.product-details > td { padding: 0 !important; border: 0 none !important; }
#content table.table-inwell {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
}
#content tr.tr-inwell.tr-header td {
  border: 0 none !important;
  padding: 0 0 10px !important;
  background: transparent !important;
}
#content tr.tr-inwell.tr-form td {
  border: 0 none !important;
  padding: 0 0 6px !important;
  background: transparent !important;
}
/* "Item #N" as a clear eyebrow so two items never blur together */
#content tr.tr-header .row-actions .title,
#content .table-inwell .title {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  margin-right: 12px !important;
}
#content .table-inwell .item-count { color: #2D5798 !important; }
/* the field group is a bordered card, so each item is visibly self-contained */
#content .well.well-form,
#content .table-inwell .well {
  background: #F6F9FD !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 12px !important;
  padding: 18px 20px 20px !important;   /* was 6px bottom: the list box
      overhung the card edge by ~14px */
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#content ul.product-details-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#content ul.product-details-list > li {
  list-style: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
#content ul.product-details-list > li:last-child { margin-bottom: 0 !important; }
#content ul.product-details-list label.desc {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
}
/* per-item Remove: small, and never resizes on hover */
#content .remove-item,
#content [id^="remove-button-item"],
#content .remove-item:hover,
#content [id^="remove-button-item"]:hover {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  color: #6B7A8D !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}
#content .remove-item:hover,
#content [id^="remove-button-item"]:hover { color: #C2543E !important; border-color: #C2543E !important; }
#content tr.tr-header .row-actions.btn-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

/* ---- 41c. "Add an additional donation" row ---------------------------
   Match the Events app treatment: label + description right-aligned against
   the input's left edge rather than stranded at the far left. */
#content table.shop-table tr:has(input[name*="donation"]) td:first-child,
#content table.shop-table .donation-label {
  text-align: right !important;
  padding-right: 22px !important;
}
#content table.shop-table tr:has(input[name*="donation"]) .title,
#content table.shop-table tr:has(input[name*="donation"]) strong {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}

/* ---- 41d. Secure Payment: credit-card fields match the section -------
   When a card type is chosen, SBX reveals number/expiry/CVC inputs that ship
   without the section's field treatment. */
#content .sbxPayType ~ * input[type="text"],
#content li#sectCC input,
#content .cc-fields input,
#content input[name*="card"],
#content input[id*="card"]:not([type="radio"]):not([type="checkbox"]) {
  box-sizing: border-box !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
/* the Stripe card element on THIS page sits in `.control-group.cc-group-notice`,
   not the `.compSect-payment` wrapper the rc-22e rule keys off — so it
   rendered as a bare 19px iframe with no field chrome. */
#content #card-element,
#content .StripeElement,
#content .cc-group-notice #card-element {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#content .StripeElement--focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
}
#content .StripeElement--invalid { border-color: #C2543E !important; }
#content #card-errors { margin-top: 8px !important; font-size: 13.5px !important; color: #C2543E !important; }

#content input[name*="card"]:focus,
#content li#sectCC input:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}

/* ---- 41e. Billing: country + state selects --------------------------- */
#content select[name*="country"],
#content select[name*="Country"],
#content select[name*="state"],
#content select[name*="State"],
#content select[name*="province"] {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  padding: 0 36px 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  text-overflow: ellipsis !important;
}


/* ============================================================================
   rc-42 — Order Form refinements (measured on /shop/membership).
   ========================================================================= */

/* ---- 42a. Per-item Remove: smaller, balanced against "ITEM #N" --------
   Was 84x34 at 13px against a 12px uppercase eyebrow — visually heavier than
   the title it sits beside. */
/* NOTE: rc-33c styles `#content .row-actions .btn` at 34px / 7px 18px for the
   EVENT attendee rows, and these per-item Remove buttons also live inside a
   `.row-actions` toolbar — so that rule was winning. Match its shape here so
   the Order Form's smaller Remove wins on the shop page only. */
/* SCOPE: `.remove-item` / `#remove-button-item-*` are SHOP order-form
   controls. The EVENT attendee rows use `.remove-attendee` /
   `.autofill-attendee` and must keep their 34px size (rc-35c) — so this rule
   must never match them. Verified: event Remove stays 34px. */
#content .table-inwell .row-actions .btn.remove-item,
#content .table-inwell .row-actions .btn.remove-item:hover,
#content .remove-item,
#content [id^="remove-button-item"],
#content .remove-item:hover,
#content [id^="remove-button-item"]:hover {
  box-sizing: border-box !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}

/* ---- 42b. Item blocks align with the PRODUCT TITLE --------------------
   Measured: product title at x=379, item titles at x=361 — an 18px mismatch
   caused by the `.well` padding. Shift the inwell table right by that much so
   "ITEM #1" starts exactly under "Bronze Level Membership". */
#content table.table-inwell { margin-left: 18px !important; }

/* ---- 42c. The product row must NOT shift when custom fields appear ----
   The thumb column is auto-width, so adding the wider custom-field rows
   re-flowed it and the whole product row jumped horizontally. Pin it. */
/* Pin the thumb column so adding custom-field rows cannot re-flow it.
   NOTE: `table-layout: fixed` was tried here and cramped the product title
   into a narrow column — auto layout with explicit widths on the NUMERIC
   columns (rc-40b) is enough to hold the row still. */
#content table.shop-table td.item-thumb,
#content table.shop-table th:first-child {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  box-sizing: border-box !important;
}
#content table.shop-table td.item-product,
#content table.shop-table td:nth-child(2) { width: auto !important; }
/* the nested inwell table must not participate in the outer column sizing */
#content tr.product-details > td:first-child { width: 120px !important; padding: 0 !important; }

/* ---- 42d. "Add an additional donation" sits beside its input ----------
   The label cell spans 686px with text-align:right, so the label ended up
   centred in a huge cell rather than adjacent to the field. Collapse the
   label cell to the columns before the input. */
#content table.shop-table tr:has(input[name="donation"]) td:first-child {
  text-align: right !important;
  padding-right: 18px !important;
}
#content table.shop-table tr:has(input[name="donation"]) td:nth-child(2),
#content table.shop-table tr:has(input[name="donation"]) td:nth-child(3) {
  padding: 0 !important;
  width: 0 !important;
}
#content table.shop-table input[name="donation"] {
  width: 206px !important;
  margin-left: 0 !important;
}

/* ---- 42e. Billing: Country left-aligns with City ----------------------
   Bootstrap's `.span6` carries a 28px grid gutter on the right-hand column,
   so Country sat at x=206 while City above it sat at x=178. */
#content .section-accordion .span6,
#content .compSect-payment .span6,
#content .row-fluid .span6 { margin-left: 0 !important; }

/* ---- 42f. Apply Code right-aligns with the promo field ----------------
   The field ends at x=1288; the button was left-anchored under it. */
#content .promo-wrap,
#content div:has(> input[name*="promo"]) + div,
#content input[name*="promo"] ~ .btn { }
#content .btn.btn-small:has(+ *),
#content a.btn.btn-small,
#content button.btn-small {
  margin-left: auto !important;
}
#content div:has(> .btn-small):has(input[name*="promo"]),
#content .promo-code-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

/* ---- 42g. Order Summary: image + qty + title left, amount right -------
   Cells were `.item-thumb | .item-qty | .item-times | .item-product |
   .item-total` at fixed widths, so the quantity floated in a 44px column
   detached from the product it belonged to. Group the left three and push
   the total to the far right. */
#content table.order-table { table-layout: auto !important; width: 100% !important; }
#content table.order-table td { border: 0 none !important; border-bottom: 1px solid #EDF2F8 !important; padding: 14px 8px !important; vertical-align: middle !important; }
#content table.order-table tr:last-child td { border-bottom: 0 none !important; }
#content table.order-table td.item-thumb {
  width: 76px !important;
  min-width: 76px !important;
  padding-left: 0 !important;
}
#content table.order-table td.item-thumb img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid #E3EBF5 !important;
  display: block !important;
}
/* quantity reads as a count chip attached to the product, not a stray number */
#content table.order-table td.item-qty {
  width: 46px !important;
  min-width: 46px !important;
  text-align: right !important;
  padding-right: 2px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1B3A66 !important;
  font-variant-numeric: tabular-nums !important;
}
#content table.order-table td.item-times {
  width: 26px !important;
  min-width: 26px !important;
  padding: 0 6px !important;
  text-align: center !important;
  color: #8494A8 !important;
}
#content table.order-table td.item-product {
  width: auto !important;
  text-align: left !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1B3A66 !important;
}
#content table.order-table td.item-total {
  width: 150px !important;
  min-width: 150px !important;
  text-align: right !important;
  padding-right: 0 !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2D5798 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
#content table.order-table td.item-total .original { display: block !important; }
#content table.order-table td.item-total .discount:empty { display: none !important; }

/* ---- 42h. Place Order: hover must invert colour only ------------------
   It shipped with `padding: 15px 40px` and NO border, so the 2px border added
   on hover grew the box by 4px horizontally. Give it a border in BOTH states
   and pin the metrics. */
#content .btn-large.btn-primary.btn-submit,
#content button.btn-large.btn-primary,
#content .btn-large.btn-primary.btn-submit:hover,
#content button.btn-large.btn-primary:hover {
  box-sizing: border-box !important;
  width: 180px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #2D5798 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}
#content .btn-large.btn-primary.btn-submit { background: #2D5798 !important; color: #fff !important; }
#content .btn-large.btn-primary.btn-submit:hover { background: #fff !important; color: #2D5798 !important; }


/* ============================================================================
   rc-43 — Order Form item blocks, summary padding, submit-button hover.
   ========================================================================= */

/* ---- 43a. Each ITEM is ONE rounded box -------------------------------
   Previously the tinted `.well` wrapped only the FIELDS, so "ITEM #N" sat
   outside its own box and the alternating background did the grouping work
   the border was already doing. Wrap the whole item — header + fields — in a
   single bordered card on plain white, so the boxes alone signal the items. */
#content tr.product-details > td:nth-child(2) {
  padding: 0 !important;
  background: transparent !important;
}
#content table.table-inwell {
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: hidden !important;
  /* each item is its own <tr>, and adjacent boxes each contribute this
     margin, so the visible gap is 2x. 12px here reads as ~24px between
     boxes — enough to separate them without floating apart. */
  margin: 0 0 12px !important;
  box-shadow: 0 1px 3px rgba(27, 58, 102, .04) !important;
}
/* the header row lives inside the same box */
#content tr.tr-inwell.tr-header > td {
  padding: 16px 20px 10px !important;
  background: transparent !important;
  border: 0 none !important;
}
#content tr.tr-inwell.tr-form > td {
  padding: 0 20px 18px !important;
  background: transparent !important;
  border: 0 none !important;
}
/* the inner `.well` no longer needs its own frame or tint */
#content .well.well-form,
#content .table-inwell .well {
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* NO alternating row colour and NO rules between items or against the parent */
#content tr.product-details,
#content tr.product-details > td,
#content tr.tr-inwell,
#content tr.tr-inwell > td,
#content tr.tr-secondary,
#content tr.tr-secondary > td {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}
#content table.shop-table tbody tr.product-details:hover td,
#content table.shop-table tbody tr.tr-inwell:hover td { background: transparent !important; }
/* breathing room between the PRODUCT row and its first item box */
#content tr.product-details:first-of-type > td,
#content tr.product-details > td { padding-top: 0 !important; }
#content tr.product-details > td:nth-child(2) > table.table-inwell:first-child { margin-top: 20px !important; }
/* and clearance under the last item before the next product */
/* NOTE: each item is its own `tr.product-details`, so every inwell table is
   BOTH :first-child and :last-child of its cell — stacking a 26px bottom on
   the 20px margin compounded to a 46px gap between boxes. Keep the uniform
   20px and add the clearance to the LAST product-details row only. */
#content tr.product-details:last-of-type > td:nth-child(2) > table.table-inwell { margin-bottom: 26px !important; }

/* ---- 43b. Order Summary: inner padding ------------------------------
   Content sat 1px from the table edges — the thumbnail flush left and the
   amount flush right. */
#content table.order-table td.item-thumb { padding-left: 20px !important; }
/* the total cell is width:150px with right-aligned text, so a padding-right
   alone is absorbed by the fixed width — widen the cell by the same amount so
   the figure actually sits 20px inside the table edge. */
#content table.order-table td.item-total {
  padding-right: 20px !important;
  width: 170px !important;
  min-width: 170px !important;
}
#content table.order-table th:first-child { padding-left: 20px !important; }
#content table.order-table th:last-child { padding-right: 20px !important; }

/* ---- 43c. Submit buttons must not grow on hover ---------------------
   The "Go To PayPal" variant ships `padding: 15px 40px` with NO border, so
   the 2px hover border widened it by 4px. Same defect the Place Order button
   had. Give EVERY shop submit a border in both states and pin the metrics. */
/* NOTE: the PayPal button is `button#btn-shoppaypal.btn.btn-primary` — it
   carries NEITHER `.btn-submit` nor `.btn-large`, so the earlier selectors
   missed it entirely and it kept `padding: 15px 40px` with no border (the
   hover border then widened it by 4px). Target the id as well. */
#content #btn-shoppaypal,
#content #btn-shoppaypal:hover,
#content button[id*="paypal"],
#content button[id*="paypal"]:hover,
#content .btn.btn-primary.btn-submit,
#content .btn.btn-primary.btn-submit:hover,
#content .btn-large.btn-primary,
#content .btn-large.btn-primary:hover {
  box-sizing: border-box !important;
  min-width: 180px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #2D5798 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ============================================================================
   rc-44 — LOGIN page: one card, three equal actions, no dotted rules.
   RECOMMENDATION (client asked for a modern treatment): rather than three
   loose blocks separated by dotted rules, the page reads as ONE card — the
   username/password form first, then a labelled "OR CONTINUE WITH" divider,
   then the alternate sign-in methods as equal full-width buttons. That is the
   convention users already know from every modern sign-in screen, and it
   makes the primary path unambiguous.
   ========================================================================= */

/* ---- 44a. Dotted rules -> one labelled "OR CONTINUE WITH" divider -----
   SBX emits three `li.section.sectionMTop` spacers with 1px dotted borders.
   Only the one BETWEEN the password form and the alternate methods earns a
   divider; the rest collapse. */
#content ul#sectLogin-formUL li.section.sectionMTop,
#content ul.compList li.section.sectionMTop {
  border: 0 none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Only the spacer BETWEEN the primary Login and the alternate methods carries
   the label. It is li:nth-child(4) — `li.buttons + li.section` also matched
   the one after the SAML button, which then rendered as a solid blue bar, so
   it is pinned by position instead.
   NO RULES: the earlier version drew a left-hand line via a background
   gradient (`background-size: calc(50% - 92px)`) and a right-hand line via
   ::after. The two never matched — the gradient rendered but the flex ::after
   collapsed — leaving a line on the left only, and the `padding-left` offset
   pushed the text off-centre. Client asked for plain centred words, which is
   also the more robust construction. */
#content ul#sectLogin-formUL > li.section.sectionMTop:nth-child(4) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 22px 0 18px !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 none !important;
  overflow: visible !important;
  list-style: none !important;
  text-align: center !important;
}
#content ul#sectLogin-formUL > li.section.sectionMTop:nth-child(4)::before {
  content: "OR CONTINUE WITH" !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: none !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  color: #8494A8 !important;
  text-align: center !important;
}
#content ul#sectLogin-formUL > li.section.sectionMTop:nth-child(4)::after {
  content: none !important;
  display: none !important;
}

/* every OTHER spacer collapses completely */
#content ul#sectLogin-formUL > li.section.sectionMTop:not(:nth-child(4)) {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 none !important;
}
#content ul#sectLogin-formUL > li.section.sectionMTop:not(:nth-child(4))::before,
#content ul#sectLogin-formUL > li.section.sectionMTop:not(:nth-child(4))::after {
  content: none !important;
  display: none !important;
}

/* ---- 44b. The whole form as ONE card ---------------------------------- */
#content .sbxLogin .compSect-wrap,
#content #page[class*="login"] .compSect-wrap,
#content form.form-login,
#content ul#sectLogin-formUL {
  box-sizing: border-box !important;
}
#content ul#sectLogin-formUL {
  display: flex !important;
  flex-direction: column !important;
  max-width: 460px !important;   /* a sign-in form should not span 1200px */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* username + password stack full-width instead of sitting in half columns */
#content ul#sectLogin-formUL li.leftHalf,
#content ul#sectLogin-formUL li.rightHalf {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
#content ul#sectLogin-formUL li.leftHalf input,
#content ul#sectLogin-formUL li.rightHalf input {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
}
/* the forgot-password links read as quiet inline links, not bullets */
#content ul#sectLogin-formUL ~ ul li,
#content .sbxLogin ul li:has(a[href*="remind"]),
#content .sbxLogin ul li:has(a[href*="reset"]) { list-style: none !important; }
#content ul#sectLogin-formUL li.buttons,
#content ul#sectLogin-formUL li:has(> button) {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* ---- 44c. All three actions: solid blue, invert on hover, same size --- */
#content ul#sectLogin-formUL button.button,
#content ul#sectLogin-formUL li.buttons button.button,
#content ul#sectLogin-formUL li#lgn-email button.button,
#content ul#sectLogin-formUL li.buttons button.button.saml-login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  background: #2D5798 !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}
#content ul#sectLogin-formUL button.button:hover,
#content ul#sectLogin-formUL li#lgn-email button.button:hover,
#content ul#sectLogin-formUL li.buttons button.button.saml-login:hover {
  background: #fff !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
  /* identical box in both states */
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  transform: none !important;
}
#content ul#sectLogin-formUL button.button > span,
#content ul#sectLogin-formUL button.button a.lgn-emaillink { color: inherit !important; font: inherit !important; }
#content ul#sectLogin-formUL button.button:hover > span,
#content ul#sectLogin-formUL button.button:hover a.lgn-emaillink { color: #2D5798 !important; }


/* ============================================================================
   rc-45 — LOGIN: hover inversion + centred layout.
   ========================================================================= */

/* ---- 45a. Hover must beat the base rule's specificity ----------------
   The base rule `#content ul#sectLogin-formUL li.buttons button.button`
   carries an extra class over the hover rule
   `#content ul#sectLogin-formUL button.button:hover`, so the solid blue
   background won even on hover. Mirror the full base shape in the hover
   selector so the inversion actually lands. */
#content ul#sectLogin-formUL li.buttons button.button:hover,
#content ul#sectLogin-formUL li#lgn-email button.button:hover,
#content ul#sectLogin-formUL li.buttons button.button.saml-login:hover,
#content ul#sectLogin-formUL li button.button:hover,
#content ul#sectLogin-formUL button.button:hover {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #2D5798 !important;
  border: 2px solid #2D5798 !important;
  border-color: #2D5798 !important;
}
/* the label inside: SBX wraps it in <span> (Login, SAML) or <a> (Email).
   rc-29 left `a.lgn-emaillink` resolving to WHITE on hover, so the Email
   label stayed invisible against the inverted white fill. */
#content ul#sectLogin-formUL li button.button:hover > span,
#content ul#sectLogin-formUL li button.button:hover a,
#content ul#sectLogin-formUL li#lgn-email button.button:hover a.lgn-emaillink,
#content ul#sectLogin-formUL button.button:hover > span,
#content ul#sectLogin-formUL button.button:hover a.lgn-emaillink {
  color: #2D5798 !important;
  background: transparent !important;
}

/* ---- 45b. Centre the form under the title ----------------------------
   The title stays left-aligned; everything below it centres as a column. */
#content #page[class*="login"] .page-content,
#content .sbxLogin .page-content,
#content .page-content:has(ul#sectLogin-formUL) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#content ul#sectLogin-formUL {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* the intro line, the form list, and the forgot-links all share the column */
#content .page-content:has(ul#sectLogin-formUL) > *,
#content .page-content:has(ul#sectLogin-formUL) form {
  width: 100% !important;
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
#content .page-content:has(ul#sectLogin-formUL) h2,
#content .page-content:has(ul#sectLogin-formUL) h3,
#content .page-content:has(ul#sectLogin-formUL) p { text-align: center !important; }
/* forgot-password links: centred, no bullets */
#content .page-content:has(ul#sectLogin-formUL) ul:not(#sectLogin-formUL) {
  list-style: none !important;
  padding: 0 !important;
  text-align: center !important;
}
#content .page-content:has(ul#sectLogin-formUL) ul:not(#sectLogin-formUL) li {
  list-style: none !important;
  margin: 0 0 8px !important;
}
/* the page title itself stays left-aligned */
#content h1.componentheading { text-align: left !important; }

/* the forgot-password links live in `ul.linksList`; their bullets are drawn
   by a ::before marker, not list-style, so `list-style:none` alone left them
   visible (and off-centre against the centred text). */
#content ul.linksList {
  list-style: none !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
#content ul.linksList li {
  /* the parent `.compSect-content` sets `list-style: disc`, which the li
     inherits — `list-style-type: none` alone did not stop the marker being
     painted, so the item must leave `display: list-item` entirely. */
  display: block !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: center !important;
}
#content .compSect-content:has(ul.linksList) { list-style: none !important; }
/* belt-and-braces: some engines still paint the marker box when the item was
   originally display:list-item, so blank the marker explicitly too. */
#content ul.linksList li::marker { content: "" !important; color: transparent !important; font-size: 0 !important; }
#content ul.linksList { list-style-image: none !important; }
#content ul.linksList li::before,
#content ul.linksList li::marker { content: none !important; display: none !important; }
#content ul.linksList a {
  color: #2D5798 !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
}
#content ul.linksList a:hover { text-decoration: underline !important; }


/* ============================================================================
   rc-46 — "Login by Email" ShadowBox modal.
   The modal body is an IFRAME of /component/user/emaillogin. style-overrides
   DOES load inside it (verified), so these rules apply there — hence the
   selectors are NOT scoped to #content.
   ========================================================================= */

/* ---- 46a. Close control: draw an actual X --------------------------
   `#sbox-btn-close` is an EMPTY <a>, so the brand circle rendered with no
   glyph at all — users had no signal it was a close button. Draw the X with
   pseudo-elements and give it a title-style tooltip target. */
#sbox-btn-close {
  position: absolute !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #2D5798 !important;
  box-shadow: 0 3px 12px rgba(16, 30, 51, .35) !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  transition: background-color .18s ease, transform .18s ease !important;
}
#sbox-btn-close::before,
#sbox-btn-close::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 15px !important;
  height: 2.5px !important;
  border-radius: 2px !important;
  background: #fff !important;
  display: block !important;
}
#sbox-btn-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
#sbox-btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
#sbox-btn-close:hover { background: #1B3A66 !important; transform: scale(1.08) !important; }

/* ---- 46b. Modal body (inside the iframe) --------------------------- */
body.contentpane #sect-login,
#sect-login.login-page {
  padding: 26px 26px 28px !important;
  box-sizing: border-box !important;
  font-family: "Figtree", system-ui, sans-serif !important;
}
body.contentpane { background: #fff !important; }
/* the empty <h1 id="title"> collapses instead of leaving a gap */
#sect-login #title:empty,
#sect-login .section-header:has(#title:empty) { display: none !important; margin: 0 !important; }
#sect-login #init-sect p:empty,
#sect-login #confirm-sect p:empty { display: none !important; margin: 0 !important; }

/* the form is laid out in a `table.paramlist` — strip the table chrome and
   let it read as a normal stacked field */
#emailLogin table.paramlist,
#emailLogin table.admintable {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 0 none !important;
  background: transparent !important;
  margin: 0 !important;
}
#emailLogin table.paramlist td,
#emailLogin table.admintable td {
  display: block !important;
  width: 100% !important;
  border: 0 none !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}
#emailLogin .editlinktip { display: block !important; }
#emailLogin label.desc,
#emailLogin label {
  display: block !important;
  margin: 0 0 8px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #6B7A8D !important;
  text-align: left !important;
}
#emailLogin input[type="text"],
#emailLogin input[type="email"],
#emailLogin input#email {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 46px !important;
  margin: 0 0 16px !important;
  padding: 0 14px !important;
  border: 2px solid #DCE6F2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15.5px !important;
  color: #1B3A66 !important;
  box-shadow: none !important;
}
#emailLogin input#email:focus {
  border-color: #2D5798 !important;
  box-shadow: 0 0 0 3px rgba(45, 87, 152, .14) !important;
  outline: none !important;
}
/* The Submit control is `a#loginBtn` — a plain anchor with NO class, sitting
   in `div.buttons-config` OUTSIDE the form, so form-scoped selectors missed
   it entirely and it kept its default 1px/4px chrome. */
#loginBtn,
#loginBtn:hover,
.buttons-config #loginBtn,
.buttons-config #loginBtn:hover,
/* the Submit control as the standard pill, inverting on hover */
#emailLogin button,
#emailLogin input[type="submit"],
#emailLogin .btn,
#emailLogin button:hover,
#emailLogin input[type="submit"]:hover,
#emailLogin .btn:hover {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 2px solid #2D5798 !important;
  border-radius: 999px !important;
  font-family: "Figtree", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
}
#loginBtn,
#emailLogin button,
#emailLogin input[type="submit"],
#emailLogin .btn {
  background: #2D5798 !important;
  color: #fff !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#loginBtn:hover,
#emailLogin button:hover,
#emailLogin input[type="submit"]:hover,
#emailLogin .btn:hover { background: #fff !important; color: #2D5798 !important; }
.buttons-config { margin-top: 4px !important; }
/* any explanatory copy in the modal */
#sect-login p {
  margin: 0 0 14px !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #33445C !important;
}

/* ========================================================================
   rc-47 — P2P contact fields, Donors alignment, members-only notice gap,
           Classes search bar proportions, Search/Share parity.
   ======================================================================== */

/* ---- 47a. P2P Contact Information: First/Last 50-50, Email full width ---
   SBX renders each field in a `.span-block` inside a shared `li`. The two
   name fields already sit side by side but were content-width (206px each
   inside a 396px column, leaving a ragged right edge); Email was in its own
   li at 396px but did not fill the column either.
   Fix: make the name li a flex row of two equal children with a real gap,
   and let every span-block/field stretch to 100%. `min-width:0` is REQUIRED
   — flex items default to min-width:auto and would refuse to shrink below
   their intrinsic input width, re-creating the ragged edge. */
#content li.name-group-notice,
#content li.name-group {
  display: flex !important;
  flex-wrap: wrap !important;      /* MUST wrap — see label note below */
  align-items: flex-end !important;
  gap: 16px !important;
  width: 100% !important;
}
/* The "Name:" <label.desc> is a THIRD child of this li, so with nowrap it
   became a flex item on the same line and shoved both inputs 79px right —
   the name row no longer lined up with the Email row beneath it. Force the
   label to occupy its own full-width line (like the email row's label) so
   the two inputs start at the column's left edge. */
#content li.name-group-notice > label.desc,
#content li.name-group > label.desc {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
#content li.name-group-notice > .span-block,
#content li.name-group > .span-block {
  flex: 1 1 0 !important;
  min-width: 0 !important;      /* see note above */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
#content li.name-group-notice > .span-block input,
#content li.name-group > .span-block input,
#content li.email-group-notice .span-block input,
#content li.email-group-notice input[name="email"],
#content li.email-group input[name="email"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Email on its own full-width row. */
#content li.email-group-notice,
#content li.email-group {
  display: block !important;
  width: 100% !important;
}
#content li.email-group-notice > .span-block,
#content li.email-group > .span-block {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* ---- 47b. P2P Donors: names flush-left with the amounts beneath them ----
   The `li.supporter-item` carried padding-left:16px while the inner
   `.row` children sat at the li's content edge, so the name/date row read as
   indented relative to the card. Zero the li pad and let both rows share one
   left edge. */
#content .section-campaign-supporters li.supporter-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  list-style: none !important;
}
#content .section-campaign-supporters li.supporter-item > .row,
#content .section-campaign-supporters .supporter-headline,
#content .section-campaign-supporters .supporter-tag {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

/* ---- 47c. Members-only notice: kill the white sliver ------------------
   span.msg and a.login-prompt are two inline-blocks styled as one pill
   (radius 12px 0 0 12px + 0 12px 12px 0). The whitespace TEXT NODE between
   them rendered as a ~4px inline space, showing the transparent parent
   through the middle of the bar. font-size:0 on the parent would also kill
   the table text, so instead the two pills are laid out as an inline flex
   pair — the stray text node collapses to zero and the halves butt together.
   Applies to BOTH the event page and the registration (2nd) page. */
#content #ticketsTableContent,
#content .eventRegistration #ticketsTableContent {
  /* container stays block — only the pills are re-flowed, via the wrapper
     below, so the ticket table above is untouched. */
}
#content #ticketsTableContent > span.msg,
#content .eventRegistration span.msg.rc-notice,
#content #ticketsTableContent > span.msg + a.login-prompt {
  vertical-align: top !important;   /* baseline alignment was adding sub-px */
}
#content #ticketsTableContent > span.msg {
  margin-right: 0 !important;
  padding-right: 0 !important;
  border-right: 0 none !important;
}
#content #ticketsTableContent > span.msg + a.login-prompt {
  margin-left: -4px !important;     /* absorbs the whitespace text node */
  padding-left: 10px !important;
  border-left: 0 none !important;
}
/* Preferred, JS-assisted form: when the shim wraps both in .rc-notice-wrap
   the negative margin is unnecessary and the pair is a true flex unit. */
#content .rc-notice-wrap {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 16px 0 0 !important;
  border: 1px solid #DCE6F2 !important;
  border-radius: 12px !important;
  background: #F1F6FC !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
#content .rc-notice-wrap > span.msg,
#content .rc-notice-wrap > a.login-prompt {
  margin: 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
  display: flex !important;
  align-items: center !important;
}
#content .rc-notice-wrap > span.msg { padding: 12px 4px 12px 16px !important; }
#content .rc-notice-wrap > a.login-prompt {
  padding: 12px 18px 12px 6px !important;
  color: #2D5798 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#content .rc-notice-wrap > a.login-prompt:hover {
  color: #1B3A66 !important;
  text-decoration: underline !important;
}

/* ---- 47d. Registration page: access code row -------------------------
   Measured: the access-code input ended at y=809 and the ticket table began
   at y=814 — a 5px gap that read as the field colliding with the table.
   The wrapper is `.form-inline.form-accesscode`; give it real bottom room.
   ALSO: the Apply Code button was already beside the field, but as a 30px
   `.btn-small` against a 48px input it sat 9px low and looked detached.
   Making the wrapper a flex row with `align-items:center` and matching the
   button height puts them on one clean baseline. */
#content .form-inline.form-accesscode,
#content #ticket-footer .form-inline.form-promocode {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 0 28px !important;   /* was ~0 → 5px to the table */
}
#content .form-inline.form-accesscode > .field.text,
#content #ticket-footer .form-inline.form-promocode > .field.text,
#content .form-inline.form-accesscode > input.field,
#content #ticket-footer .form-inline.form-promocode > input.field {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
/* Match the input's height so the pair reads as one control. */
#content .form-inline.form-accesscode > button.btn.btn-small,
#content #ticket-footer .form-inline.form-promocode > button.btn.btn-small,
#content .form-inline.form-accesscode > .btn,
#content #ticket-footer .form-inline.form-promocode > .btn {
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  line-height: 44px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
/* The 0x0 tracking <img> is a flex item and would eat one `gap`. */
/* NOTE: scoped to #ticket-footer on purpose. The SHOP order form puts its
   promo box inside `.order-promocode.pull-left`, a 167px-wide column — a
   flex row there wraps into a 167x106 stack and breaks the approved Shop
   layout. Only the Events registration footer is wide enough. */
#content .form-inline.form-accesscode > img,
#content #ticket-footer .form-inline.form-promocode > img { display: none !important; }
/* Extra clearance above the ticket table itself. */
#content .eventRegistration table.resultsTBL.tickets-tbl,
#content table.resultsTBL.tickets-tbl { margin-top: 10px !important; }
#content p.accesscode-code { margin: 0 0 10px !important; }

/* ---- 47e. Classes search: compact keyword box + right-aligned sort -----
   The keyword input was 910px (it flex-grew to fill .search-form). Cap it
   under half the row and push the ordering select to the far right of the
   SAME row so the standalone sort row disappears. */
#content form.search-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}
#content form.search-form input[type="text"],
#content form.search-form input[type="search"],
#content form.search-form input[name*="keyword"] {
  flex: 0 1 420px !important;      /* < half of the 1174px row */
  width: 420px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#content form.search-form .s-buttons-container { flex: 0 0 auto !important; }
/* Sort select rides the same row, hard right.
   IMPORTANT: `.clearfix.ordering` is a SIBLING of form.search-form (both are
   children of .container), NOT a child of it — so `margin-left:auto` inside
   the form can never pull it up. The row has to be formed one level higher:
   the form is capped at a share of the width and floated left, and .ordering
   is pulled up onto that line with a negative margin equal to its own height
   plus the form's bottom gap. Using position:absolute is avoided so the
   results grid below still reflows correctly. */
#content .compDescIntro-content.srch + form.search-form,
#content form.search-form {
  width: auto !important;
  max-width: calc(100% - 280px) !important;  /* leaves room for the select */
  margin-bottom: 0 !important;
}
#content .clearfix.ordering {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: -48px !important;   /* form row height (48) — lifts onto the row */
  margin-bottom: 20px !important;
  clear: none !important;
}
#content .clearfix.ordering::before,
#content .clearfix.ordering::after {
  content: none !important;   /* clearfix pseudo-els would break the flex row */
  display: none !important;
}

/* ---- 47f. Classes: Share must equal Search exactly --------------------
   Search resolved to 107.8x44 (padding 11px 28px, 2px border, fw700);
   Share to 121.7x48 (padding 15px 40px, 0 border, fw600) — a different
   padding/weight pair, so matching only the border was not enough. Both are
   border-box, so identical padding + border + font metrics ⇒ identical box
   in BOTH the standard and hover states (hover only swaps colours). */
#content input.s-button,
#content input.s-button.s-button-share,
#content .s-button,
#content .s-button.s-button-share,
#content input.s-button:hover,
#content input.s-button.s-button-share:hover,
#content .s-button:hover,
#content .s-button.s-button-share:hover {
  padding: 11px 28px !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}
/* Identical padding is NOT enough: "Share" is a shorter string than
   "Search", so the shrink-to-fit widths differed (101.7 vs 107.8). Pin an
   explicit width on both so the two boxes are pixel-identical. */
#content input.s-button,
#content input.s-button.s-button-share,
#content .s-button,
#content .s-button.s-button-share,
#content input.s-button:hover,
#content input.s-button.s-button-share:hover {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  text-align: center !important;
}
#content .s-buttons-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* ---- 47g. Mobile portrait ---------------------------------------------- */
@media (max-width: 767px) {
  #content li.name-group-notice,
  #content li.name-group { gap: 12px !important; }
  /* The desktop rule caps the FORM at calc(100% - 280px) to leave room for
     the sort select on the same row; on mobile the select drops to its own
     row, so that cap must be released or the keyword field is squeezed to
     ~75px. flex-basis alone is not enough — the parent width is the limit. */
  #content .compDescIntro-content.srch + form.search-form,
  #content form.search-form {
    max-width: 100% !important;
    width: 100% !important;
  }
  #content form.search-form input[type="text"],
  #content form.search-form input[type="search"],
  #content form.search-form input[name*="keyword"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Undo the desktop negative lift — the select gets its own row again. */
  #content .clearfix.ordering {
    margin-top: 12px !important;
  }
  #content .clearfix.ordering {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  #content select#list_ordering { width: 100% !important; }
  #content .s-buttons-container { width: 100% !important; }
  #content input.s-button,
  #content input.s-button.s-button-share { flex: 1 1 0 !important; }
  #content .rc-notice-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #content .rc-notice-wrap > span.msg { padding: 12px 16px 4px !important; }
  #content .rc-notice-wrap > a.login-prompt { padding: 0 16px 12px !important; }
}