/* ==========================================================================
   LCCH International — brand CSS hooks.

   Elementor's Custom CSS box is a Pro feature and this site runs Elementor
   free, so the handful of rules that cannot be expressed through widget
   controls live here instead. Every colour is read from Elementor's own
   Global Colors variables, so rebranding from Site Settings still flows
   through this file untouched.

   Move into the Astra child theme at go-live.
   ========================================================================== */

/* Accent word inside the hero H1 (a single heading widget, so the coloured
   word has to be a span rather than a separate widget — one H1 per page). */
.lc-accent { color: var(--e-global-color-lctqdeep); }

/* Card hover: lift + shadow, matching the static build. Elementor containers
   ignore the CSS Classes field, so cards are targeted by element ID prefix. */
[id^="lccard-"] {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[id^="lccard-"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(51, 71, 77, .05), 0 22px 55px rgba(51, 71, 77, .13);
  border-color: var(--e-global-color-lctqdeep) !important;
}

/* Media images: gentle zoom inside a rounded frame. */
.lc-zoom .elementor-widget-container { overflow: hidden; border-radius: 22px; }
.lc-zoom img { transition: transform .45s ease; }
.lc-zoom:hover img { transform: scale(1.045); }

/* --- Footer ------------------------------------------------------------- */
/* Text Editor links inherit the global link colour, which is a dark teal and
   unreadable on charcoal. */
/* :not(.elementor-button) matters. This is an ID selector (specificity 101) and
   would otherwise outrank Elementor's class-based button rules (40), repainting
   button labels pale grey — which is invisible on the white Enrol Now button. */
#lc-footer a:not(.elementor-button):not(.elementor-social-icon) {
  color: var(--e-global-color-lccrumb);
  text-decoration: none;
  transition: color .16s ease;
}
#lc-footer a:not(.elementor-button):not(.elementor-social-icon):hover {
  color: var(--e-global-color-lcinkeye);
}
#lc-footer .elementor-widget-text-editor p { margin: 0 0 11px; }
#lc-footer .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Accreditation marks are white line art; give them a little breathing room. */
#lc-footer .elementor-widget-image img { opacity: .92; transition: opacity .16s ease; }
#lc-footer .elementor-widget-image img:hover { opacity: 1; }

/* --- Header ------------------------------------------------------------- */
/* Sticky header needs a solid backdrop as content scrolls beneath it. */
.xtb-header-sticky {
  background: var(--e-global-color-lcwhite);
  border-bottom: 1px solid var(--e-global-color-lcline);
}

/* The Xpro menu exposes no submenu border, radius or shadow controls, and it
   applies the submenu background colour to each <a> rather than to the panel
   itself — so the <ul> keeps the plugin's dark default and shows through as a
   dark frame around the links. Both are corrected here. */
#lc-nav .xpro-elementor-dropdown-menu {
  background: var(--e-global-color-lcwhite);
  border: 1px solid var(--e-global-color-lcline);
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(51, 71, 77, .05), 0 22px 55px rgba(51, 71, 77, .16);
  overflow: hidden;
  padding: 8px;
  min-width: 268px;
}

/* Mobile / tablet menu panel defaults to #f5f5f5 with plugin styling. */
#lc-nav .xpro-elementor-horizontal-menu-responsive-tablet,
#lc-nav .xpro-elementor-horizontal-menu-responsive-mobile {
  background-color: var(--e-global-color-lcwhite) !important;
}
#lc-nav .xpro-elementor-horizontal-navbar-nav > li > a { color: var(--e-global-color-lcchar); }
#lc-nav .xpro-elementor-dropdown-item {
  border-radius: 8px;
  padding: 11px 14px;
  transition: background-color .16s ease, color .16s ease;
}
#lc-nav .xpro-elementor-dropdown-item:hover {
  background: var(--e-global-color-lctqtint);
}

/* --- Skip link ----------------------------------------------------------- */
.lcchi-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 14px 22px;
  border-radius: 0 0 9px 0;
  background: var(--e-global-color-lcchar);
  color: #fff;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.lcchi-skip:focus { left: 0; color: #fff; }

/* --- Syllabus tag lists -------------------------------------------------- */
/* Long reference lists inside Accordion content. A wrapping flex row keeps
   them scannable without resorting to CSS columns. */
.lc-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lc-taglist li {
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--e-global-color-lcwhite);
  border: 1px solid var(--e-global-color-lcline);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--e-global-color-lcchsoft);
}

/* --- WooCommerce product gallery ----------------------------------------- */
/* The flexslider gallery does not initialise inside the Xpro product-images
   widget, so slider support is removed in PHP and WooCommerce outputs a plain
   list of images. That list is laid out here: first image is the hero, the
   rest become a thumbnail row. Deterministic, and it needs no JavaScript.

   WooCommerce also ships the gallery at opacity:0 expecting the slider to fade
   it in, so it has to be forced visible. */
.woocommerce-product-gallery {
  opacity: 1 !important;
  position: relative;
}

.xpro-product-image-wrapper .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image {
  margin: 0;
  padding: 0;
  list-style: none;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image a { display: block; }

/* Hero image. !important is deliberate: the Xpro widget emits its own height
   rules at higher specificity (.elementor-64 .elementor-element-xxxx ...) and
   those selectors assume flexslider markup that no longer exists. */
.xpro-product-image-wrapper .woocommerce-product-gallery__image:first-child {
  flex: 0 0 100%;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image:first-child img {
  width: 100% !important;
  height: 520px !important;
  max-height: none !important;
  margin-top: 0 !important;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 22px;
  display: block;
}

/* Remaining images become an even thumbnail row */
.xpro-product-image-wrapper .woocommerce-product-gallery__image:not(:first-child) {
  flex: 1 1 0;
  min-width: 0;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image:not(:first-child) img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 12px;
  display: block;
  opacity: .8;
  transition: opacity .18s ease, transform .3s ease;
}
.xpro-product-image-wrapper .woocommerce-product-gallery__image:not(:first-child) img:hover {
  opacity: 1;
  transform: scale(1.03);
}

@media (max-width: 1024px) {
  .xpro-product-image-wrapper .woocommerce-product-gallery__image:first-child img { height: 420px !important; }
  .xpro-product-image-wrapper .woocommerce-product-gallery__image:not(:first-child) img { height: 120px !important; }
}
@media (max-width: 767px) {
  .xpro-product-image-wrapper .woocommerce-product-gallery__image:first-child img { height: 300px !important; }
  .xpro-product-image-wrapper .woocommerce-product-gallery__image:not(:first-child) img { height: 88px !important; }
}

/* Zoom trigger: a fixed-size button in the corner. Without an explicit size a
   50% radius on a full-width element renders as a huge ellipse. */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--e-global-color-lcwhite);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(51, 71, 77, .18);
  text-decoration: none;
  line-height: 1;
}

/* --- WooCommerce add to cart --------------------------------------------- */
#lc-booking .quantity input[type="number"] {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  border-radius: 9px;
}
#lc-booking .stock { font-weight: 600; }
#lc-booking form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
#lc-booking form.cart .quantity { flex: 0 0 90px; }
#lc-booking form.cart button { flex: 1 1 auto; }

/* --- Intake lists --------------------------------------------------------- */
/* Output of [lcchi_intakes]. Several cohorts of the same course usually run at
   once, so a course card lists whichever are currently bookable rather than a
   single "next start" line that goes stale. */
.lcchi-intakes { margin: 0 0 4px; }
.lcchi-intakes-label {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--e-global-color-lcmuted);
  margin-bottom: 10px;
}
.lcchi-intake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 13px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--e-global-color-lcline);
  border-radius: 9px;
  background: var(--e-global-color-lctqtint);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.lcchi-intake:last-child { margin-bottom: 0; }
.lcchi-intake:hover {
  border-color: var(--e-global-color-lctqdeep);
  background: var(--e-global-color-lctqtnt2);
  transform: translateY(-1px);
}
.lcchi-intake-when {
  flex: 1 1 auto;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--e-global-color-lcchar);
}
.lcchi-intake-where {
  flex: 0 0 100%;
  order: 3;
  font-size: 14px;
  color: var(--e-global-color-lcmuted);
}
.lcchi-intake-price {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--e-global-color-lcchar);
}
.lcchi-intake-price .amount,
.lcchi-intake-price bdi { color: inherit; }
.lcchi-intake-go {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--e-global-color-lcwhite);
  background: var(--e-global-color-lctqdeep);
  padding: 7px 14px;
  border-radius: 100px;
}
.lcchi-intake:hover .lcchi-intake-go { background: var(--e-global-color-lctcdeep); }

.lcchi-intakes-empty {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px dashed var(--e-global-color-lcline);
  border-radius: 9px;
  font-size: 15px;
  color: var(--e-global-color-lcmuted);
}

/* --- Product template ----------------------------------------------------- */
/* The schedule section is empty for products with no multi-weekend run (a
   half-day Open Day, say). :has() collapses the whole band rather than leaving
   a stripe of padding behind. */
#lcchi-dates:not(:has(.lcchi-product-schedule)) { display: none !important; }

.lcchi-schedule-heading {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.95rem);
  letter-spacing: -.022em;
  color: var(--e-global-color-lcchar);
  text-align: center;
  margin: 0 0 26px;
}
.lcchi-schedule-note {
  margin: 18px 0 0;
  text-align: center;
  color: var(--e-global-color-lcmuted);
}

/* The short description sits in the dark hero, the long one on white. */
.lcchi-short-desc p { margin: 0 0 .8em; }
.lcchi-short-desc p:last-child { margin-bottom: 0; }
.lcchi-long-desc h3 {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.28rem, 1.08rem + .75vw, 1.62rem);
  color: var(--e-global-color-lcchar);
  margin: 1.8em 0 .6em;
}
.lcchi-long-desc h3:first-child { margin-top: 0; }
.lcchi-long-desc ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.lcchi-long-desc li { margin-bottom: .5em; }

/* --- Product specification panel ------------------------------------------ */
/* Output of [lcchi_product_spec]. Values come from the product itself, so the
   panel is correct for every course rather than repeating the first one. */
.lcchi-spec { display: flex; flex-direction: column; }
.lcchi-spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.lcchi-spec-row:last-child { border-bottom: 0; }
.lcchi-spec-label {
  flex: 0 0 44%;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--e-global-color-lcinkeye);
  line-height: 1.5;
}
.lcchi-spec-value {
  flex: 1 1 56%;
  min-width: 0;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--e-global-color-lcwhite);
}
.lcchi-spec-value .amount,
.lcchi-spec-value bdi { color: var(--e-global-color-lcwhite); }
.lcchi-spec-fee { font-size: 1.35em; }
.lcchi-spec-vat { opacity: .7; font-size: .8em; font-weight: 500; }

@media (max-width: 480px) {
  .lcchi-spec-label { flex: 0 0 100%; margin-bottom: 4px; }
  .lcchi-spec-value { flex: 0 0 100%; }
}

/* --- Course schedule table ------------------------------------------------ */
/* Output of [lcchi_schedule]. Wrapper scrolls rather than letting a long date
   string force the page sideways on mobile. */
.lcchi-schedule-wrap {
  overflow-x: auto;
  background: var(--e-global-color-lcwhite);
  border: 1px solid var(--e-global-color-lcline);
  border-radius: 14px;
}
.lcchi-schedule {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  margin: 0;
}
.lcchi-schedule th,
.lcchi-schedule td {
  padding: 15px 22px;
  text-align: left;
  border-bottom: 1px solid var(--e-global-color-lcline);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  color: var(--e-global-color-lcchsoft);
  vertical-align: top;
}
.lcchi-schedule thead th {
  background: var(--e-global-color-lctqtint);
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--e-global-color-lcchar);
  white-space: nowrap;
}
.lcchi-schedule tbody th {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  color: var(--e-global-color-lcchar);
  white-space: nowrap;
  width: 30%;
}
.lcchi-schedule tbody tr:last-child th,
.lcchi-schedule tbody tr:last-child td { border-bottom: 0; }
.lcchi-schedule tbody tr:hover th,
.lcchi-schedule tbody tr:hover td { background: var(--e-global-color-lctqtint); }

/* The examination row is the one students look for, so mark it. */
.lcchi-schedule tr.is-exam th,
.lcchi-schedule tr.is-exam td {
  background: rgba(216, 107, 63, .08);
  color: var(--e-global-color-lctcdeep);
  font-weight: 600;
}
.lcchi-schedule tr.is-exam:hover th,
.lcchi-schedule tr.is-exam:hover td { background: rgba(216, 107, 63, .13); }

.lcchi-schedule-empty {
  padding: 22px;
  border: 1px dashed var(--e-global-color-lcline);
  border-radius: 14px;
  color: var(--e-global-color-lcmuted);
  text-align: center;
}

/* Inline date list from [lcchi_dates] */
.lcchi-datelist { margin: 0; padding: 0; list-style: none; }
.lcchi-datelist li {
  padding: 8px 0;
  border-bottom: 1px solid var(--e-global-color-lcline);
}
.lcchi-datelist li:last-child { border-bottom: 0; }

@media (max-width: 600px) {
  .lcchi-schedule th, .lcchi-schedule td { padding: 13px 16px; font-size: 15px; }
}

/* --- Motion ------------------------------------------------------------- */
.elementor-button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }

@media (prefers-reduced-motion: reduce) {
  [id^="lccard-"], .lc-zoom img, .elementor-button { transition: none !important; }
  [id^="lccard-"]:hover, .lc-zoom:hover img { transform: none !important; }
}

/* --- SUMO payment plans -------------------------------------------------
   The enrol panel on a course page sits on the charcoal hero (lcchsoft,
   #4C6169), so everything in here is designed for a DARK ground - an earlier
   pass styled it for white and the cards punched a hole in the section.

   Surfaces are layered rgba rather than fixed hexes so they stay correct if
   the panel colour is ever changed from Site Settings: a black wash sinks the
   card into the panel, and a brand wash tints it. Text uses the on-dark Global
   Colors. Measured against #4C6169 the result is 5.9:1 to 8.7:1 - all AA.

   Layout is flexbox only. Nothing here touches display on the modal, which
   SUMO's own script toggles.
   --------------------------------------------------------------------- */
#_sumo_pp_payment_type_fields { margin: 0 0 22px; }

#_sumo_pp_payment_type_fields > p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}

#_sumo_pp_payment_type_fields > p label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background-color: rgba(0, 0, 0, .20);
  color: var(--e-global-color-lcinktxt);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
#_sumo_pp_payment_type_fields > p label:hover {
  border-color: var(--e-global-color-lcinkeye);
  color: var(--e-global-color-lcwhite);
}
/* Second background layer tints the sunk card without replacing it. */
#_sumo_pp_payment_type_fields > p label:has(input:checked) {
  border-color: var(--e-global-color-lcinkeye);
  background-image: linear-gradient(rgba(64, 181, 166, .20), rgba(64, 181, 166, .20));
  color: var(--e-global-color-lcwhite);
}
#_sumo_pp_payment_type_fields input.sumo-pp-payment-type {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--e-global-color-lcinkeye);
}

/* The chosen-plan panel */
#_sumo_pp_plans_to_choose {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background-color: rgba(0, 0, 0, .20);
}
table._sumo_pp_payment_plans,
table._sumo_pp_payment_plans > tbody > tr,
table._sumo_pp_payment_plans > tbody > tr > td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
table._sumo_pp_payment_plans strong { color: var(--e-global-color-lcwhite); }

table._sumo_pp_payment_plans input[name="_sumo_pp_chosen_payment_plan"] {
  accent-color: var(--e-global-color-lcinkeye);
  margin-right: 8px;
}

._sumo_pp_initial_payable,
._sumo_pp_total_payable {
  margin: 10px 0 0;
  color: var(--e-global-color-lcinktxt);
}
._sumo_pp_initial_payable .amount,
._sumo_pp_total_payable .amount,
._sumo_pp_initial_payable .woocommerce-Price-currencySymbol,
._sumo_pp_total_payable .woocommerce-Price-currencySymbol {
  font-weight: 700;
  color: var(--e-global-color-lcinkeye);
}
._sumo_pp_plan_description {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: var(--e-global-color-lcinkled);
  font-size: 15px;
  line-height: 1.6;
}
._sumo_pp_plan_view_more p { margin: 12px 0 0; }
._sumo_pp_plan_view_more a.view-plan-more {
  color: var(--e-global-color-lcinkeye);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
._sumo_pp_plan_view_more a.view-plan-more:hover { color: var(--e-global-color-lcwhite); }

/* Payment schedule modal. This is an overlay above the page rather than part
   of the dark panel, so it stays a light card. */
._sumo_pp_modal-wrapper {
  border-radius: 16px;
  background: var(--e-global-color-lcwhite);
  box-shadow: 0 24px 60px rgba(51, 71, 77, .38);
}
.close-sumo-pp-modal { cursor: pointer; }
table._sumo_pp_modal-info {
  width: 100%;
  border-collapse: collapse;
}
table._sumo_pp_modal-info th,
table._sumo_pp_modal-info td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--e-global-color-lcline);
  text-align: left;
}
table._sumo_pp_modal-info th {
  background: var(--e-global-color-lctqtint);
  color: var(--e-global-color-lcchar);
  font-weight: 600;
}
table._sumo_pp_modal-info tbody tr:first-child td {
  font-weight: 600;
  color: var(--e-global-color-lctqdeep);
}
table._sumo_pp_modal-info tbody tr:last-child td { border-bottom: 0; }

/* Balance / first-payment notes that SUMO prints against prices */
.woocommerce-Price-amount + small,
.summary small { line-height: 1.5; }

@media (max-width: 600px) {
  #_sumo_pp_payment_type_fields > p label { flex: 1 1 100%; }
  #_sumo_pp_plans_to_choose { padding: 16px; }
}

/* Courses are sold individually, so WooCommerce leaves an empty .quantity
   wrapper holding nothing but a hidden input. Take it out of the flow. */
.single-product form.cart .quantity:has(input[type="hidden"]) { display: none; }

/* Early Bird notice on course product pages.
   Terracotta text cannot be used here - on the charcoal panel even the
   lightest brand tone only reaches 2.5:1. So the offer is carried by a clay
   wash and border, and the words themselves stay on-dark text at 6:1. */
.lcchi-earlybird {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 13px 18px;
  border: 1px solid rgba(240, 167, 132, .45);
  border-radius: 12px;
  background-color: rgba(0, 0, 0, .20);
  background-image: linear-gradient(rgba(216, 107, 63, .18), rgba(216, 107, 63, .18));
  color: var(--e-global-color-lcinktxt);
  font-size: 15px;
  line-height: 1.5;
}
.lcchi-earlybird strong { color: var(--e-global-color-lcwhite); }

/* Course fee breakdown on the individual course pages. */
.lcchi-fees { width: 100%; border-collapse: collapse; }
.lcchi-fees th, .lcchi-fees td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--e-global-color-lcline);
  text-align: left;
  vertical-align: top;
}
.lcchi-fees th {
  width: 38%;
  color: var(--e-global-color-lcchar);
  font-weight: 600;
}
.lcchi-fees td { color: var(--e-global-color-lcchsoft); }
.lcchi-fees tbody tr:first-child th,
.lcchi-fees tbody tr:first-child td {
  background: var(--e-global-color-lctqtint);
  color: var(--e-global-color-lctqdeep);
}
.lcchi-fees tbody tr:last-child th,
.lcchi-fees tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .lcchi-fees th, .lcchi-fees td { padding: 12px 14px; font-size: 15px; }
  .lcchi-fees th { width: 45%; }
}


/* =========================================================================
   LCCHI WOO SURFACES

   The shop, the category archives, the basket, the checkout and the account
   pages are built by WooCommerce, not by Elementor, so none of the brand
   reaches them through the page builder and they render in stock Astra blue.
   These rules carry the palette across by hand. Colours are literal rather
   than Elementor global variables, because the kit stylesheet is not
   guaranteed to be present on a page Elementor had no hand in.
   ========================================================================= */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	background-color: #BC5730;
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	padding: 13px 26px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce ul.products li.product a.button:hover {
	background-color: #A94B26;
	color: #FFFFFF;
}

.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 2px solid #1F6E62;
	outline-offset: 2px;
}

/* Secondary actions - update basket, apply coupon - should not shout as loudly
   as the one button that takes the money. */
.woocommerce .button[name="update_cart"],
.woocommerce .button[name="apply_coupon"] {
	background-color: transparent;
	color: #1F6E62;
	box-shadow: inset 0 0 0 1px #C7D8DA;
}

.woocommerce .button[name="update_cart"]:hover,
.woocommerce .button[name="apply_coupon"]:hover {
	background-color: #F1F8F7;
	color: #1F6E62;
}

.woocommerce .button[disabled],
.woocommerce .button:disabled {
	background-color: #C7D8DA;
	color: #FFFFFF;
	opacity: 1;
}

/* --- Archives: the shop and the course category listings ---------------- */
/* lcchi-woo-archive-marker */

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
	color: #33474D;
	font-weight: 500;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
	color: #5C6B70;
	font-size: .92rem;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: #1F6E62;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .orderby {
	border: 1px solid #E1E9EA;
	border-radius: 8px;
	padding: 9px 14px;
	color: #33474D;
	background-color: #FFFFFF;
}

.woocommerce ul.products li.product {
	background: #FFFFFF;
	border: 1px solid #E1E9EA;
	border-radius: 12px;
	overflow: hidden;
	padding: 0 0 20px;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a img {
	margin: 0 0 16px;
	border-radius: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	color: #33474D;
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 600;
	padding: 0 20px;
	margin: 0 0 8px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	color: #1F6E62;
}

/* The category label WooCommerce prints above the title. */
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .ast-woo-product-category {
	color: #5C6B70;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0 20px;
	margin: 0 0 6px;
}

.woocommerce ul.products li.product .price {
	color: #1F6E62;
	font-weight: 600;
	font-size: 1.1rem;
	padding: 0 20px;
	margin: 0 0 16px;
}

.woocommerce ul.products li.product .price del {
	color: #8DA2A8;
	font-weight: 400;
}

/* Push the button to the bottom so cards with longer titles still line up. */
.woocommerce ul.products li.product a.button {
	margin: auto 20px 0;
	align-self: flex-start;
}

.woocommerce span.onsale {
	background-color: #1F6E62;
	color: #FFFFFF;
	border-radius: 999px;
	font-weight: 600;
}

/* --- Notices ------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 4px solid #1F6E62;
	background-color: #F1F8F7;
	color: #33474D;
	border-radius: 8px;
}

.woocommerce-error {
	border-left-color: #A94B26;
	background-color: #FAEDE7;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: #1F6E62;
}

.woocommerce-error::before {
	color: #A94B26;
}

/* --- Basket, checkout and account --------------------------------------- */
/* lcchi-woo-checkout-marker */

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
	border: 1px solid #E1E9EA;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background-color: #F6F9F9;
	color: #33474D;
	font-weight: 600;
	border-bottom: 1px solid #E1E9EA;
}

.woocommerce table.shop_table td {
	border-top: 1px solid #E1E9EA;
	color: #4A5C62;
}

.woocommerce table.shop_table .product-name a {
	color: #33474D;
	font-weight: 600;
}

.woocommerce table.shop_table .product-name a:hover {
	color: #1F6E62;
}

.woocommerce table.shop_table .amount,
.woocommerce .order-total .amount {
	color: #1F6E62;
	font-weight: 600;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-account h2 {
	color: #33474D;
	font-weight: 500;
}

.woocommerce #order_review,
.woocommerce .cart_totals,
.woocommerce-checkout #customer_details {
	color: #4A5C62;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	color: #33474D;
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"] {
	border: 1px solid #E1E9EA;
	border-radius: 8px;
	padding: 12px 14px;
	color: #33474D;
	background-color: #FFFFFF;
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: #40B5A6;
	outline: 2px solid rgba(64, 181, 166, .25);
	outline-offset: 0;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid #E1E9EA;
	border-radius: 12px;
	background-color: #F6F9F9;
}

.woocommerce .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid #E1E9EA;
}

.woocommerce .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 2px;
	color: #4A5C62;
	text-decoration: none;
	font-weight: 500;
}

.woocommerce .woocommerce-MyAccount-navigation li a:hover,
.woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	color: #1F6E62;
	font-weight: 600;
}

/* Astra paints plain links in its own blue on pages the builder never saw. */
.woocommerce-cart a:not(.button),
.woocommerce-checkout a:not(.button),
.woocommerce-account a:not(.button),
.post-type-archive-product a:not(.button),
.tax-product_cat a:not(.button) {
	color: #1F6E62;
}

.woocommerce-cart a:not(.button):hover,
.woocommerce-checkout a:not(.button):hover,
.woocommerce-account a:not(.button):hover {
	color: #BC5730;
}

/* --- Archive container -------------------------------------------------- */
/* lcchi-woo-container-marker */

/* The single product page is built by an Xpro template and wants the full
   width. The category archives are not built by anything, so without a
   container Astra lets the stock product grid run off the side of the page.
   Scoped to the archives alone so the product template keeps its full bleed. */
.tax-product_cat .ast-woocommerce-container,
.post-type-archive-product .ast-woocommerce-container {
	box-sizing: border-box;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 56px;
}

.tax-product_cat .woocommerce-products-header__title,
.post-type-archive-product .woocommerce-products-header__title {
	margin-bottom: 8px;
}

.tax-product_cat .woocommerce-ordering,
.post-type-archive-product .woocommerce-ordering {
	margin-bottom: 28px;
}

/* --- Header button group ------------------------------------------------ */
/* lcchi-header-buttons-marker */

/* The Student Login and Enquire buttons sit in a nested container that was
   given a width of 0, so the two of them overflowed and printed on top of the
   last menu item. With the width removed the container falls back to the
   Elementor default of 100%, which would squash the menu instead, so pin it to
   its content width here. */
#lc-header .elementor-element.elementor-element-2c057ca {
	--width: auto;
	flex: 0 0 auto;
}

#lc-header .elementor-element.elementor-element-ca2c541 {
	flex: 0 0 auto;
}

/* lcchi-header-fit-marker */
/* Revealing the two buttons took roughly 280px off the menu, so seven top level
   items plus two buttons no longer fit on one line. Percentage columns do not
   survive the range of desktop widths - at 1280 the menu printed over the logo -
   so the logo column is pinned to the width of the logo and the nav takes what
   is left. Below 1400 the menu tightens; below 1200 Student Login steps aside,
   because at that width something has to. The hamburger takes over at 1024,
   which is Xpro own breakpoint for this widget. */
@media (min-width: 1025px) {
	#lc-header > .e-con-inner {
		max-width: 1400px;
	}

	#lc-header .elementor-element.elementor-element-61b8655 {
		--width: auto;
		flex: 0 0 auto;
	}

	#lc-header .elementor-element.elementor-element-eb57694 {
		--width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	#lc-nav .xpro-elementor-horizontal-navbar-nav {
		flex-wrap: nowrap;
	}
}

@media (min-width: 1025px) and (max-width: 1399px) {
	#lc-nav .xpro-elementor-horizontal-navbar-nav > li > a {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 13px;
	}

	#lc-header .elementor-element.elementor-element-eb57694 {
		--gap: 0px 14px;
		--column-gap: 14px;
	}

	#lc-header .elementor-element.elementor-element-2c057ca .elementor-button {
		font-size: 11px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Narrow desktop: give the header a second row.

   Seven top level items plus Student Login and Enquire need roughly 1060px of
   the header row. Below about 1280 there is not enough and the menu printed over the
   logo. Folding the widget into Xpro own slide-out panel at this width looked
   right but would not open - its close state is pinned by the plugin in a way
   that outranks anything written here - and a hamburger that does nothing is
   worse than the overlap it fixes.

   So the row simply wraps instead: logo on top, menu and buttons beneath it.
   That gives the menu the full container width, which it fits inside with room
   to spare, and it needs nothing from Xpro. Below 1025 Xpro takes over with its
   own hamburger, which does work there. */
@media (min-width: 1025px) and (max-width: 1279px) {
	#lc-header > .e-con-inner {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	#lc-header .elementor-element.elementor-element-61b8655 {
		--width: auto;
		flex: 0 0 auto;
	}

	#lc-header .elementor-element.elementor-element-eb57694 {
		--width: 100%;
		flex: 1 0 100%;
		justify-content: flex-end;
	}

	#lc-nav .xpro-elementor-horizontal-navbar-nav > li > a {
		padding-left: 9px;
		padding-right: 9px;
	}
}