/*
 * SOMA Academy — Tutor LMS skin.
 *
 * Tutor 4.x builds its whole interface on a --tutor-brand-* ramp with hard-coded
 * fallbacks, so redefining the ramp here re-colours buttons, links, tabs,
 * progress bars and the dashboard in one move. Everything below that is
 * typography, radii and surfaces, pulled from tokens.css.
 */

:root {
  /* The ramp, built from the SOMA secondary. 600 is the button colour and
     700 its hover, which is exactly how Tutor uses them. */
  --tutor-brand-100: #F1F8F6;
  --tutor-brand-200: #E0F0EC;
  --tutor-brand-300: #C2E1DA;
  --tutor-brand-400: #7FC0B2;
  --tutor-brand-500: #17937B;
  --tutor-brand-600: #0D7C68;
  --tutor-brand-700: #0A6354;
  --tutor-brand-800: #085243;
  --tutor-brand-900: #063E33;
  --tutor-brand-950: #04291F;

  /* Tutor reads these two everywhere, dashboard included, with an Inter
     fallback. Setting them here is what actually replaces Inter. */
  --tutor-font-family-body: "Raleway", system-ui, sans-serif;
  --tutor-font-family-heading: "Cormorant", Georgia, serif;

  --tutor-color-primary: #0D7C68;
  --tutor-color-primary-hover: #0A6354;
  --tutor-color-primary-rgb: 13, 124, 104;
  --tutor-body-color: #545454;
  --tutor-color-black: #131527;
  --tutor-border-radius-6: 10px;
  --tutor-border-radius-10: 16px;
}

/* --- Typography ------------------------------------------------------- */
.tutor-wrap,
.tutor-course-details-page,
.tutor-dashboard,
.tutor-dashboard-content,
.tutor-course-topics-wrap,
[class*="tutor-"] .tutor-fs-4,
.tutor-quiz-wrap {
  font-family: var(--soma-font-body);
}
.tutor-course-details-page h1, .tutor-course-details-page h2,
.tutor-course-details-page h3, .tutor-course-details-page h4,
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3, .tutor-dashboard h4,
.tutor-course-name, .tutor-course-title {
  font-family: var(--soma-font-display);
  font-weight: 600;
  color: var(--soma-primary);
}

/* --- Buttons ---------------------------------------------------------- */
.tutor-btn.tutor-btn-primary,
.tutor-btn[data-tutor-modal-target] {
  border-radius: var(--soma-r-pill);
  font-family: var(--soma-font-body);
  font-weight: 600;
}
.tutor-btn.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-secondary,
.tutor-btn.tutor-btn-ghost { border-radius: var(--soma-r-pill); font-weight: 600; }

/* Tutor renders some actions as <button> and some as <a>, and only the anchors
   were affected: `.soma-page a` is (0,1,1) and outranks Tutor's own (0,1,0)
   colour, so a solid teal pill rendered as a link drew its label in the generic
   link teal and vanished. "Start Learning" on an enrolled course page measured
   1.00:1 against its own background. The <button> equivalents were always
   correct, which is why this surfaced on some screens and not others.

   Same family as the `.soma-page a.soma-btn` fix and Astra's `img { height:
   auto }`: the label colour is restated for the anchor form, from the tokens,
   for every Tutor variant that can be one. */
.soma-page a.tutor-btn.tutor-btn-primary,
.soma-page a.tutor-btn.tutor-btn-primary:hover,
.soma-page a.tutor-btn.tutor-btn-primary:focus-visible,
.soma-page a.tutor-btn.tutor-btn-lg.tutor-btn-primary,
.soma-page a.tutor-btn.tutor-btn-block.tutor-btn-primary { color: var(--soma-white); }

.soma-page a.tutor-btn.tutor-btn-outline-primary,
.soma-page a.tutor-btn.tutor-btn-outline-primary:hover,
.soma-page a.tutor-btn.tutor-btn-outline-primary:focus-visible { color: var(--soma-primary); }

/* Ghost, link and secondary variants sit on a light ground and read as links.
   The inherited teal is the intended colour there, so they are left alone. */

/* Tutor's product tour draws its Skip control as a ghost button with a white
   label, on a panel that is #FAFAFA here: 1.04:1, invisible. A different fault
   from the one above (it is a <button>, so no anchor rule reaches it) and a
   different fix, but the same symptom for a visitor. */
.tutor-btn.tour-skip-btn,
.tutor-btn.tour-skip-btn:hover,
.tutor-btn.tour-skip-btn:focus-visible { color: var(--soma-primary); }

/* --- Cards and panels ------------------------------------------------- */
.tutor-card,
.tutor-course-details-page .tutor-card,
.tutor-dashboard .tutor-card {
  border-radius: var(--soma-r-lg);
  border-color: var(--soma-line);
}
.tutor-course-topic { border-radius: var(--soma-r-md); overflow: hidden; }

/* --- Course page: SOMA layout around Tutor's own blocks --------------- */
.soma-course-hero { display: flex; gap: var(--soma-gap-lg); align-items: flex-start; }
.soma-course-hero__text { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.soma-course-hero__aside { display: flex; flex-direction: column; gap: 16px; width: 400px; flex-shrink: 0; }
.soma-course-hero__media { border-radius: var(--soma-r-lg); overflow: hidden; background: var(--soma-primary); }
.soma-course-hero__media img,
.soma-course-hero__media iframe,
.soma-course-hero__media video { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .soma-course-hero { flex-direction: column; }
  .soma-course-hero__aside { width: 100%; }
}

/* Tutor's blocks, dropped into a SOMA section. */
.soma-tutor-block { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.soma-tutor-block > * { margin: 0; }
.soma-tutor-block .tutor-course-details-widget-title,
.soma-tutor-block .tutor-fs-5 {
  font-family: var(--soma-font-display);
  font-size: var(--soma-t-h3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--soma-primary);
}
.soma-tutor-block .tutor-color-black,
.soma-tutor-block .tutor-color-secondary { color: var(--soma-primary); }
.soma-tutor-block p, .soma-tutor-block li { font-size: var(--soma-t-body); line-height: 1.8; color: var(--soma-text); }
.soma-tutor-block a { color: var(--soma-secondary); }

/* Tutor lays its own container out with a max width; inside a SOMA section
   the section already sets the gutter. */
.soma-course .tutor-container,
.soma-programmes .tutor-container { max-width: 100%; padding: 0; margin: 0; }

/* --- Dashboard -------------------------------------------------------- */
.soma-tpl-tutor #content { background: var(--soma-base); }
.tutor-dashboard-permalinks a { font-family: var(--soma-font-body); font-weight: 500; }
.tutor-dashboard-permalinks .tutor-dashboard-menu-item.is-active > a,
.tutor-dashboard-permalinks li.active > a { color: var(--soma-secondary); }
.tutor-dashboard .tutor-card { background: var(--soma-white); }

/* Where a SOMA section already carries the heading, Tutor's own title for the
   same block is redundant. */
.soma-tutor-block--headless .tutor-course-details-widget-title,
.soma-tutor-block--headless .tutor-course-content-title,
.soma-tutor-block--headless .tutor-course-details-content > h2 { display: none; }

/* --- Dashboard (Tutor renders it as its own full page, without the theme
       header and footer, so only variables and these rules reach it) ------ */
.tutor-dashboard-layout,
.tutor-dashboard-layout button,
.tutor-dashboard-layout input,
.tutor-dashboard-layout select,
.tutor-dashboard-layout textarea { font-family: var(--soma-font-body); }
.tutor-dashboard-layout h1,
.tutor-dashboard-layout h2,
.tutor-dashboard-layout h3,
.tutor-dashboard-layout h4 { font-family: var(--soma-font-display); font-weight: 600; color: var(--soma-primary); }

/* Tutor's own headings inside the course template lose their margins to the
   `.soma-page h1..h4 { margin: 0 }` reset, which our flex sections normally
   make up for with a gap. These sit inside Tutor's block-layout widgets, where
   no gap reaches them, so they were touching the list underneath. */
.soma-tutor-block h2:not(:last-child),
.soma-tutor-block h3:not(:last-child),
.soma-tutor-block h4:not(:last-child) { margin-bottom: 12px; }

/* When an optional white section (benefits, Q&A) is skipped, two same-background
   sections stack. Halve the shared boundary padding on both sides and draw a
   hairline exactly on the boundary, so the break reads as one consistent,
   symmetric section gap. Scoped to single course pages only. */
body.single-courses .soma-section--base:has(+ .soma-section--base),
body.single-courses .soma-section--white:has(+ .soma-section--white) {
    padding-bottom: calc(var(--soma-section) / 2);
}
body.single-courses .soma-section--base + .soma-section--base,
body.single-courses .soma-section--white + .soma-section--white {
    position: relative;
    padding-top: calc(var(--soma-section) / 2);
}
body.single-courses .soma-section--base + .soma-section--base::before,
body.single-courses .soma-section--white + .soma-section--white::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--soma-gutter);
    right: var(--soma-gutter);
    height: 1px;
    background: rgba(19, 21, 39, 0.12);
}

/* --- Course hero: who teaches it, and who it is for ------------------- */
/* Both moved up out of the old Instructor section, which repeated them on
   every course. They are meta lines, not a section: Tutor's own small avatar
   disc so the visual language matches the "A course by" block, and one muted
   sentence for the audience. Each is emitted only when its data exists, so an
   empty audience costs no line and no gap. */
.soma-course-hero__facts { display: flex; flex-direction: column; gap: 10px; }
.soma-course-by { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.soma-course-by__one { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.soma-course-by__name {
  font-size: var(--soma-t-small); font-weight: 600; color: var(--soma-primary);
}
/* Tutor sizes its own disc; three classes deep so the override wins whichever
   stylesheet loads last. */
.soma-course-hero__facts .tutor-avatar.tutor-avatar-sm {
  width: 34px; height: 34px; flex: 0 0 34px;
}
/* Tutor draws its initials at rgba(255,255,255,.8) on the teal disc, which
   measures 3.88:1 and is under the 4.5:1 AA threshold at this size. Full white
   on the same disc is 5.1:1. Scoped to the hero: Tutor's own avatars elsewhere
   are left as they are. */
.soma-course-hero__facts .tutor-avatar.tutor-avatar-sm .tutor-avatar-text {
  font-size: 13px; color: #fff;
}
.soma-course-for {
  font-size: var(--soma-t-small); line-height: 1.55; color: var(--soma-text);
  max-width: 60ch;
}

/* Tutor draws avatar initials at rgba(255,255,255,.8), which fails AA contrast
   on the teal disc. Full white in the review list, matching the hero fix. */
.tutor-review-list-item .tutor-avatar-text {
    color: #fff;
}


/* --- The shelf under the header --------------------------------------

   Tutor puts 80px of padding above and below `.tutor-wrap-parent`, which is
   right for a plugin that must sit inside an unknown theme and cannot assume
   the page around it has any spacing of its own. Here it does: every section
   inside carries its own top and bottom padding, so Tutor's 80px only showed
   as a bare strip of the page background — grey above the first white band,
   and grey again between the last section and the one after it.

   Scoped to `.soma-page` so it applies to the templates this theme draws and
   leaves Tutor's own pages, which have no bands of their own, alone. */
.soma-page .tutor-wrap-parent { padding-top: 0; padding-bottom: 0; }

/* --- Cart and checkout ------------------------------------------------

   These are the two pages on which a stranger decides whether to hand over
   money, and until now the two that looked least like the rest of the site:
   Astra's page furniture on the outside, Tutor's system sans and slate grey
   on the inside, five-pixel corners, and a blue selected-payment state
   borrowed from no part of this design.

   Nothing here touches Tutor's markup or its JavaScript — the coupon toggle,
   the country-and-state reload and the payment radios all still run on their
   own classes. The page shell comes from the plugin; this is only the skin.
--------------------------------------------------------------------- */

/* Astra wraps the shortcode in a container of its own width and an <h1> that
   says "Checkout" in the system sans. The shell supplies the heading and the
   band inside supplies the gutters, so both of Astra's are a second copy of
   something already there. */
.soma-commerce-page .entry-header,
.soma-commerce-page .entry-title { display: none; }
.soma-commerce-page .site-content > .ast-container,
.soma-commerce-page .ast-article-single,
.soma-commerce-page .entry-content {
  max-width: none; width: 100%; padding: 0; margin: 0;
}
.soma-commerce-page #primary.content-area { margin: 0; padding: 0; }
.soma-commerce,
.soma-commerce-page .site-content { background: var(--soma-white); }

/* Tutor adds 40px above and below its own page div and insets the checkout
   container by 44px. Both were drawn for a theme with no spacing of its own;
   here they only pushed the panels out of line with the heading above them. */
.soma-commerce .tutor-checkout-page,
.soma-commerce .tutor-cart-page { padding: 0; }
.soma-commerce .tutor-checkout-container,
.soma-commerce .tutor-cart-container { margin: 0; max-width: none; }
.soma-commerce .soma-page-header { padding-bottom: 40px; }

/* Inside Astra's .entry-content a paragraph carries a bottom margin, which the
   band's own gap already provides. Left in, it lengthened the header by a
   third of a line for no reason anyone could see. */
.soma-commerce .soma-band__lead { margin-bottom: 0; }

.soma-commerce__body { padding-top: 0; }
.soma-commerce .tutor-container { max-width: 1120px; width: 100%; margin: 0; padding: 0; }
.soma-commerce .tutor-checkout-page,
.soma-commerce .tutor-cart-page {
  font-family: var(--soma-font-body); font-size: 1rem; color: var(--soma-text);
}
.soma-commerce .tutor-checkout-page a { color: var(--soma-secondary); }

/* The summary is a thing to check; the form is the work. So the form takes the
   wider half. Below 992px Tutor's own stacking already puts the summary first,
   which is the right order on a phone. */
@media (min-width: 992px) {
  .soma-commerce #tutor-checkout-form > .tutor-row {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px; margin: 0;
  }
  .soma-commerce #tutor-checkout-form > .tutor-row > [class*="tutor-col-"] {
    flex: none; width: auto; max-width: none; padding: 0; margin: 0;
  }
}

/* --- The two panels --- */
.soma-commerce .tutor-checkout-details-inner,
.soma-commerce .tutor-checkout-billing-inner {
  border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-lg, 24px);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}
.soma-commerce .tutor-checkout-details-inner { background: var(--soma-base); }
.soma-commerce .tutor-checkout-billing-inner { background: var(--soma-white); }

.soma-commerce .tutor-checkout-details-inner > h5,
.soma-commerce .tutor-checkout-billing-inner h5 {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; color: var(--soma-primary);
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--soma-line);
}
.soma-commerce .tutor-payment-method-wrapper h5 {
  border-bottom: 0; padding-bottom: 0; margin: 28px 0 14px;
}

/* --- What is being bought --- */
.soma-commerce .tutor-checkout-course-item + .tutor-checkout-course-item {
  border-top: 1px solid var(--soma-line); margin-top: 16px; padding-top: 16px;
}
.soma-commerce .tutor-checkout-course-thumb-title { display: flex; align-items: flex-start; gap: 14px; }
.soma-commerce .tutor-checkout-course-thumb-title img {
  flex: 0 0 auto; width: 76px; height: 56px; object-fit: cover;
  border-radius: var(--soma-r-sm, 10px); background: rgba(19, 21, 39, .06);
}
.soma-commerce .tutor-checkout-course-title {
  margin: 0; font-family: var(--soma-font-display); font-weight: 600;
  font-size: 1.2rem; line-height: 1.22;
}
.soma-commerce .tutor-checkout-course-title a { color: var(--soma-primary); }

/* --- Money --- */
.soma-commerce .tutor-checkout-summary {
  border-top: 1px solid var(--soma-line); margin-top: 18px; padding-top: 12px;
}
.soma-commerce .tutor-checkout-summary-item { padding: 6px 0; font-size: .95rem; }
.soma-commerce .tutor-checkout-summary-item .tutor-fw-bold,
.soma-commerce .tutor-checkout-summary-item .tutor-fw-medium { color: var(--soma-primary); }
.soma-commerce .tutor-checkout-details-inner > .tutor-pt-12 {
  border-top: 1px solid var(--soma-line); margin-top: 12px;
}
.soma-commerce .tutor-checkout-grand-total {
  font-family: var(--soma-font-display); font-weight: 600;
  font-size: 1.75rem; line-height: 1.1; color: var(--soma-primary);
}
.soma-commerce #tutor-toggle-coupon-button { color: var(--soma-secondary); font-weight: 600; }
.soma-commerce .tutor-apply-coupon-form { display: flex; gap: 10px; margin: 10px 0 4px; }
.soma-commerce .tutor-apply-coupon-form input { flex: 1 1 auto; min-width: 0; }

/* --- The form ---

   Tutor builds the billing block as a zero-gutter grid of boxes sharing their
   borders. That is a defensible look, but it is not this site's; here a field
   is its own rounded box with air around it, as on every other form. The two
   !importants are on the border and the radius alone, because Tutor sets those
   per-corner from a rule that is already more specific than this one. */
.soma-commerce .tutor-billing-fields > .tutor-row {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0;
}
.soma-commerce .tutor-billing-fields > .tutor-row > [class*="tutor-col-"] {
  flex: none; width: auto; max-width: none; padding: 0;
}
@media (min-width: 560px) {
  .soma-commerce .tutor-billing-fields > .tutor-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soma-commerce .tutor-billing-fields > .tutor-row > :not([class*="tutor-col-sm-6"]) { grid-column: 1 / -1; }
}

.soma-commerce .tutor-billing-fields input,
.soma-commerce .tutor-billing-fields select,
.soma-commerce .tutor-billing-fields textarea,
.soma-commerce .tutor-apply-coupon-form input {
  width: 100%; min-height: 50px; padding: 13px 16px;
  font-family: var(--soma-font-body); font-size: 1rem;
  color: var(--soma-primary); background: var(--soma-white);
  border: 1px solid var(--soma-line) !important;
  border-radius: var(--soma-r-sm, 10px) !important;
  box-shadow: none;
}
.soma-commerce .tutor-billing-fields input::placeholder,
.soma-commerce .tutor-apply-coupon-form input::placeholder { color: rgba(19, 21, 39, .38); }
.soma-commerce .tutor-billing-fields input:focus-visible,
.soma-commerce .tutor-billing-fields select:focus-visible,
.soma-commerce .tutor-billing-fields textarea:focus-visible,
.soma-commerce .tutor-apply-coupon-form input:focus-visible {
  outline: 2px solid var(--soma-secondary); outline-offset: 2px;
  border-color: var(--soma-secondary) !important;
}

/* --- Paying ---

   The selected state was Tutor's blue, #E9EDFB, which appears nowhere else
   here. State is carried by the border as well as the tint, so it survives a
   printed page and a viewer who does not separate those two colours. */
.soma-commerce .tutor-checkout-payment-options { display: grid; gap: 10px; }
.soma-commerce .tutor-checkout-payment-item {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 14px 16px; cursor: pointer;
  background: var(--soma-white);
  border: 1.5px solid var(--soma-line);
  border-radius: var(--soma-r-sm, 10px);
  transition: border-color .15s ease, background-color .15s ease;
}
.soma-commerce .tutor-checkout-payment-item:hover { border-color: var(--soma-secondary); }
.soma-commerce .tutor-checkout-payment-item.active {
  background: rgba(13, 124, 104, .06);
  border-color: var(--soma-secondary);
}
.soma-commerce .tutor-payment-item-content {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--soma-primary);
}
.soma-commerce .tutor-payment-item-content img { height: 20px; width: auto; }

/* Astra underlines links inside .entry-content, and on the cart page the
   checkout control is a link wearing a button. A button is a button. */
.soma-commerce a.tutor-btn,
.soma-commerce a.tutor-btn:hover,
.soma-commerce .tutor-btn { text-decoration: none; }

/* The cart's own summary card, to match the checkout's. */
.soma-commerce .tutor-cart-summary,
.soma-commerce .tutor-cart-box {
  background: var(--soma-base);
  border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-lg, 24px);
}

.soma-commerce #tutor-checkout-pay-now-button {
  min-height: 56px; font-size: 1.05rem;
  border-radius: var(--soma-r-pill, 999px);
}

/* --- The GSTIN disclosure ---------------------------------------------
   Folded away, because most buyers are not a business and should not have to
   read the word. Open, it looks like the rest of the billing form. */
.soma-commerce .soma-gstin {
  margin: 18px 0 0; padding: 14px 16px;
  border: 1px solid var(--soma-line);
  border-radius: var(--soma-r-sm, 10px);
  background: var(--soma-base);
}
.soma-commerce .soma-gstin__summary {
  cursor: pointer; font-weight: 600; color: var(--soma-primary);
  font-size: .95rem; list-style: none;
}
.soma-commerce .soma-gstin__summary::-webkit-details-marker { display: none; }
.soma-commerce .soma-gstin__summary::before {
  content: '+'; display: inline-block; width: 1.1em;
  color: var(--soma-secondary); font-weight: 700;
}
.soma-commerce .soma-gstin[open] .soma-gstin__summary::before { content: '–'; }
.soma-commerce .soma-gstin__summary:focus-visible { outline: 2px solid var(--soma-secondary); outline-offset: 3px; }

.soma-commerce .soma-gstin__note,
.soma-commerce .soma-gstin__hint {
  margin: 10px 0 0; font-size: var(--soma-t-small, .875rem);
  line-height: 1.6; color: var(--soma-text); max-width: 60ch;
}
.soma-commerce .soma-gstin__fields { display: grid; gap: 6px; margin-top: 12px; }
.soma-commerce .soma-gstin__label {
  font-size: var(--soma-t-label, .75rem); font-weight: 600;
  letter-spacing: var(--soma-ls-label, .18em); text-transform: uppercase;
  color: var(--soma-secondary); margin-top: 8px;
}
.soma-commerce .soma-gstin__input {
  width: 100%; min-height: 50px; padding: 13px 16px;
  font-family: var(--soma-font-body); font-size: 1rem;
  color: var(--soma-primary); background: var(--soma-white);
  border: 1px solid var(--soma-line); border-radius: var(--soma-r-sm, 10px);
}
/* The GSTIN is compared character by character, so it is set where a 1 and an
   l, a 0 and an O, cannot be mistaken for one another. */
.soma-commerce .soma-gstin__input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.soma-commerce .soma-gstin__input:focus-visible {
  outline: 2px solid var(--soma-secondary); outline-offset: 2px;
  border-color: var(--soma-secondary);
}

/* SOMA checkout phone — the order-summary line item.
   Tutor lays the thumbnail, title and price out in one row. Below ~600px
   that leaves the title about 90px wide and it wraps to a word a line, so
   the row is stacked instead: thumbnail and title together, price under. */
@media (max-width: 600px) {
  .soma-commerce-page .tutor-checkout-course-content {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .soma-commerce-page .tutor-checkout-course-content > .tutor-d-flex { width: 100%; }
  .soma-commerce-page .tutor-checkout-course-thumb-title {
    width: 100%; grid-template-columns: 56px minmax(0, 1fr);
    align-items: start; gap: 12px;
  }
  .soma-commerce-page .tutor-checkout-course-thumb-title img {
    width: 56px; height: auto; flex: 0 0 56px;
  }
  .soma-commerce-page .tutor-checkout-course-title { width: auto; }
  .soma-commerce-page .tutor-checkout-course-content > .tutor-text-right {
    width: 100%; text-align: right;
  }
}

/* The floating back-to-top control sits bottom-right and can land on top of
   Pay Now, which is the one button on the site that must never be blocked.
   It is not needed on a two-screen checkout, so it goes on phones. */
@media (max-width: 600px) {
  .soma-commerce-page #ast-scroll-top,
  .soma-commerce-page .ast-scroll-to-top-right { display: none !important; }
}

/* The tax note under the price in the course sidebar. Quiet enough not to
   compete with the figure, present enough that nobody meets the 18% for the
   first time at checkout. */
.soma-price-note {
  margin-top: 6px;
  font-family: var(--soma-font-body);
  font-size: var(--soma-t-label);
  line-height: 1.5;
  color: var(--soma-text, #545454);
}

/* The terms line under Pay Now. Small, centred, and out of the way of the
   button it follows. */
.soma-commerce-page .soma-checkout-legal {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--soma-font-body);
  font-size: var(--soma-t-label);
  line-height: 1.5;
  color: var(--soma-text, #545454);
}
.soma-commerce-page .soma-checkout-legal a {
  color: var(--soma-secondary, #0D7C68);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The access-window chip above the course title in the cart and at checkout.
   It sits in Tutor's badge row, so it has to read as a label rather than as a
   button — no fill, just a hairline and the ink colour. */
.soma-commerce-page .soma-access-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--soma-line, #E4E1DE);
  border-radius: 2px;
  font-family: var(--soma-font-body);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--soma-text, #545454);
  white-space: nowrap;
}


/* A Field with no Certified Programme yet. Stated, not sold: the same size and
   weight as the count line it replaces, set in the muted text colour so it
   reads as a status rather than a badge. */
.soma-path__counts--soon {
  color: var(--soma-text, #545454);
  opacity: .8;
  font-style: italic;
}

/* --- Audit fixes, 31 Aug 2026 ------------------------------------------- */

/* Stars: Tutor's marketplace orange leaves the palette; signal amber joins it.
   Tutor draws stars as icon fonts coloured by its own warning variable. */
.tutor-ratings .tutor-icon-star-bold,
.tutor-ratings .tutor-icon-star-half-bold,
.tutor-ratings .tutor-icon-star-line,
.tutor-review-summary-average-rating,
.tutor-ratings-stars { color: #B98A2F; }

/* Where the ratings came from, quietly, under the reviews heading. */
.soma-reviews__provenance { margin: -12px 0 20px; font-size: 14px; color: var(--soma-ink-3, #7c7e8c); }

/* Refund reassurance under the enrolment box. */
.soma-refund-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--soma-ink-2, #545454); }
.soma-refund-note a { color: var(--soma-teal, #0D7C68); }

/* Sticky enrolment bar on long programme pages. */
.soma-sticky-enrol { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--soma-indigo, #131527); color: #EDEBE6;
  box-shadow: 0 -8px 24px rgba(19,21,39,.18); }
.soma-sticky-enrol__title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.soma-sticky-enrol__price { font-size: 14.5px; white-space: nowrap; }
.soma-sticky-enrol__price small { opacity: .65; font-size: 11.5px; }
.soma-sticky-enrol .soma-btn { flex: none; }
@media (max-width: 640px) { .soma-sticky-enrol__title { display: none; } .soma-sticky-enrol { justify-content: space-between; } }
@media (prefers-reduced-motion: no-preference) { .soma-sticky-enrol { animation: soma-bar-rise .25s ease-out; } }
@keyframes soma-bar-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.soma-sticky-enrol[hidden] { display: none !important; }