@charset "UTF-8";
/*
 * Theme Name: My Timber Starter Theme
 * Description: Starter Theme to use with Timber
 * Author: Upstatement and YOU!
*/

@media print {
  #header, #footer, .account-user, #my-account-nav, nav.account-nav, .my-account-header { display: none !important; }
  .absolute-footer, html { background-color: #fff !important; }
  mark { background-color: #fff !important; }
.cert-container {
max-width: 100%;
margin: 0;
border: 0px dashed #ddd;
padding: 50px;
}
}


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

.button {
  border-radius: 5px !important;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-carousel .flickity-page-dots {
  left: 10%;
  right: 10%;
}
#video-carousel .flickity-page-dots .dot {
  width: 24px;
  height: 24px;
  counter-increment: dot;
}
#video-carousel .flickity-page-dots .dot::before {
  display: block;
  text-align: center;
  content: counter(dot);
  line-height: 18px;
  font-size: 16px;
  color: #111;
  font-weight: 700;
  font-family: "Libre Baskerville", sans-serif;
}
#video-carousel .flickity-page-dots .dot.is-selected::before {
  color: #fff;
}
#video-carousel .flickity-slider > div.carousel-cell {
  width: 100% !important;
  margin-right: 10px;
  background: #EEE;
  border-radius: 5px;
  margin-bottom: 60px;
  overflow: hidden;
}
#video-carousel h3 {
  font-size: 16px;
  padding: 20px 20px 10px;
  margin: 0;
}
#video-carousel h2 {
  padding: 10px 20px 20px;
  font-size: 20px;
  margin: 0;
  min-height: 72px;
}

.sponsor-wrapper h2 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.sponsor-panel {
  display: none;
}
.sponsor-panel.active {
  display: block;
}

.tab-button {
  border-radius: 4px;
  background: #f8f8f8;
}
.tab-button.active {
  background: #A1D067;
  color: white;
}

.clear-filters {
  background: #330067;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
.clear-filters:hover {
  background: #222222;
  color: white;
}

.widget li.chosen a::before {
  background-color: transparent;
  border: 0px solid rgba(0, 0, 0, 0.1);
  content: "✓" !important;
  color: #66CA01 !important;
}

.badge-container {
  margin: 0 !important;
  opacity: 0.75 !important;
}
.badge-container .badge-inner {
  padding: 10px;
}

.woocommerce-conference-title {
  font-weight: 700;
  font-size: 18px;
}

.cpd-information {
  background: #A1D067;
  width: 17px;
  height: 16px;
  display: inline-block;
  text-align: center;
  line-height: 10px;
  padding: 3px;
  border-radius: 50%;
  font-weight: 700;
  color: white;
  font-size: 14px;
  margin-left: 5px;
  position: relative;
}
.cpd-information::before {
  content: "Including reading notes and completion of assessment";
  display: none;
  opacity: 0;
  position: absolute;
  color: white;
  width: 150px;
  margin: 0 -70px 0;
  background: black;
  border-radius: 4px;
  padding: 5px;
  line-height: 12px;
  font-size: 10px;
  height: 47px;
  top: -55px;
  transition: all 0.5s ease-in-out;
}
.cpd-information::after {
  content: "";
  display: none;
  opacity: 0;
  position: absolute;
  width: 10px;
  background: black;
  border-radius: 2px;
  height: 10px;
  top: -15px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  transition: all 0.5s ease-in-out;
}
.cpd-information:hover::before {
  display: block;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.cpd-information:hover::after {
  display: block;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.sponsor-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  gap: 50px;
}
.sponsor-container .sponsor-block {
  -webkit-flex-basis: 25%;
          flex-basis: 25%;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  max-width: 200px;
  text-align: center;
  max-height: 160px;
}
.sponsor-container .sponsor-block img {
  max-width: 200px;
  max-height: 160px;
}

.woof_products_top_panel {
  display: none !important;
}

.woocommerce-ordering {
  display: none !important;
}

dt.variation-Name, dt.variation-Notes, dt.variation-Venue {
  margin-top: 10px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}
dt.variation-Name:first-child {
  margin-top: 0;
  border-top: 0 solid #ccc;
  padding-top: 0;
}

.variation {
  text-transform: revert;
}
.variation dt {
  display: block;
  font-weight: 700;
}

.cart_item .product-thumbnail a {
  display: none;
}

td.product-thumbnail {
  min-width: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
}

.cart .title {
  max-width: 100px;
}

#order_comments-description {
  display: block !important;
}

#terms_conditions-description {
  display: block !important;
}

/* Hide default WC price and meta — we render these in the sidebar box */
.single-product .product-summary .price-wrapper,
.single-product .product-summary .woocommerce-product-details__short-description,
.single-product .product-summary .product_meta {
  display: none !important;
}

/* ── Product page sidebar ─────────────────────────────────────────────────── */

.prc-product-sidebar {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.prc-sidebar-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.prc-sidebar-box__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 .9rem;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Details list */
.prc-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.prc-details-list__item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  color: #334155;
  line-height: 1.45;
}

.prc-details-list__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  color: #66ca01;
}

.prc-details-list__icon svg,
.prc-details-list__icon img {
  width: 18px;
  height: 18px;
  display: block;
}

.prc-access-note img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  margin-top: .1rem;
}

.prc-sidebar-btn img {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.prc-details-list__text a {
  color: #66ca01;
  text-decoration: underline;
}

/* Sidebar buttons */
.prc-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1.25rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
  box-sizing: border-box;
}

.prc-sidebar-btn--book {
  background: #5D9D1B;
  color: #fff !important;
  border: none;
}

.prc-sidebar-btn--book:hover {
  background: #4e8716;
  color: #fff !important;
}

.prc-sidebar-btn--primary {
  background: #66ca01;
  color: #fff !important;
  border: none;
}

.prc-sidebar-btn--primary:hover {
  background: #58b000;
  color: #fff !important;
}

.prc-sidebar-btn--outline {
  background: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #cbd5e1;
}

.prc-sidebar-btn--outline:hover {
  background: #e2e8f0;
  color: #334155 !important;
}

/* Access box */
.prc-access-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  color: #475569;
  margin: 0 0 .5rem;
  line-height: 1.5;
}

.prc-access-note svg {
  flex-shrink: 0;
  margin-top: .1rem;
  color: #66ca01;
}

.prc-access-note--sub {
  padding-left: 1.6rem;
  margin: 0;
}

.prc-access-note strong {
  display: inline;
  font-size: inherit !important;
  font-weight: 700;
  color: #0f172a;
  background: rgba(0, 0, 0, 0.07) !important;
  padding: 0.1em 0.45em !important;
  border-radius: 5px !important;
  border: none !important;
}
.product-summary .cart {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 10px;
  background-color: #f8f8f8;
}
.product-summary .cart label[for=for-self] {
  font-weight: unset;
  font-size: unset;
  line-height: unset;
  margin-bottom: 20px;
}
.product-summary .cart button {
  margin-bottom: 0;
}
.product-summary .cart .quantity {
  margin-bottom: 0;
}
.product-summary .cart #team-fields-container #self-toggle {
  margin: 0;
}
.product-summary .cart #team-fields-container .team-member-repeater {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 0 30px;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
.product-summary .cart #team-fields-container .team-member-repeater.hide {
  display: none;
}
.product-summary .cart #team-fields-container .team-member-repeater > label {
  display: none;
}
.product-summary .cart #team-fields-container .team-member-repeater > h3 {
  -webkit-flex: 1 1 100%;
          flex: 1 1 100%;
}
.product-summary .cart #team-fields-container .team-member-repeater > * {
  -webkit-flex: 1 1 320px;
          flex: 1 1 320px;
}

.conference-message {
  background: #f9f9f9;
  display: block;
  padding: 10px 15px;
  margin-bottom: 20px;
  border-radius: 6px;
  border-color: #320067;
  border-width: 1px;
  border-style: solid;
  color: red;
  font-weight: 600;
}

.meal-radios {
  display: -webkit-flex;
  display: flex;
}

.wc-pao-addon-lunch, .wc-pao-addon-parking  {
  display: none !important;
}

.meal-radios label {
  margin-right: 25px;
}

.sponsors-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 30px;
}
.sponsors-container .sponsor-block {
  -webkit-flex-basis: 160px;
          flex-basis: 160px;
}
.sponsors-container .sponsor-block .sponsor-logo {
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sponsors-container .sponsor-block .sponsor-logo::after {
  padding-bottom: 100%;
  display: block;
  content: "";
}
.sponsors-container .sponsor-block h3 {
  text-align: center;
}

.invalid {
  border-color: red !important;
}
.invalid.incorrect + span:after {
  content: "Email Addresses is not valid";
}
.invalid.duplicate + span:after {
  content: "Each delegate must have a unique Email Address";
}
.invalid.mismatch + span:after {
  content: "Email Addresses do not match";
}

#meal-options {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 0 30px;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}
#meal-options div {
  -webkit-flex: 1 1 180px;
          flex: 1 1 180px;
}

.answer {
  background: #eee;
  display: block !important;
  padding: 20px !important;
  border-radius: 5px;
  line-height: 25px;
}

input[type=radio]:checked + label.answer, input[type=checkbox]:checked + label.answer {
  background: #333;
  color: white;
}


input[type=radio].answer, input[type=checkbox].answer {
  display: none !important;
}

.watupro-question-choice {
  margin: 0 !important;
}

.question-content {
  font-family: "Libre Baskerville", sans-serif;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2;
}

.single-product div.watu-question {
  margin-top: 6px !important;
}

.watu-question {
  border-bottom: 1px solid #eee;
  padding-bottom: 50px !important;
  margin-bottom: 50px;
  padding-top: 0 !important;
}
.watu-question:last-child {
  border-bottom: 0px solid #eee;
  padding-bottom: 0px !important;
  margin-bottom: 0px;
}

.watupro-exam-description {
  display: none;
}

.single-product .quiz-form label {
  max-width: 100%;
}

.hide, .product-gallery, #preorder_date_field {
  display: none !important;
}

.product-addon-totals li:not(.wc-pao-subtotal-line) {
  display: none !important;
}

.product-summary .woocommerce-Price-currencySymbol {
  font-size: unset !important;
  vertical-align: unset !important;
  margin-top: 0 !important;
}

div.product-addon-totals {
  margin: 0;
  padding: 0;
  border-top: 0 solid #eee;
  border-bottom: 0 solid #eee;
}

div.product-addon-totals .wc-pao-subtotal-line {
  border-top: 0px solid #eee;
  padding: 10px 0;
  margin-top: 0;
}

div.product-addon-totals .wc-pao-subtotal-line {
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  margin-left: 0;
}

.wc-pao-addon .form-row {
  margin-bottom: 0;
}

.price-wrapper {
  display: none !important;
}

.woocommerce-MyAccount-content .widefat tr th:nth-child(3) {
  display: none;
}
.woocommerce-MyAccount-content .widefat tr td:nth-child(3) {
  display: none;
}

.woocommerce-MyAccount-content a {
  color: #330067;
  text-decoration: underline;
}

.woocommerce-orders-table__cell-order-items br + a {
  border-top: 1px solid #eee;
  display: block;
  margin-top: 10px;
  padding-top: 10px;
}

/* --- Sidebar CTAs --- */

.cta_header h3 {
    margin: 0px;
    color: white;
    text-align: center;
}
.cta_header {
    background-color: #39006C;
    padding: 10px;
}
.cta_body p {
    margin: 0px;
    text-align: center;
}
.cta_content {
    padding: 10px;
    text-align: center;
    border: 5px solid #39006C;
}
.tcs {
    font-size: 10px;
    color: gray;
}

dl.variation dt {
float: none !important;
}

.logged-in .nav>li.logged-out-hide {
  display: unset;
}

.nav>li.logged-out-hide {
  display: none;
}

.product-info .breadcrumbs {
font-size: 1.25em !important;
border-bottom: 2px solid #66ca01;
margin-bottom: 20px !important;
padding-bottom: 15px;
}

.woocommerce-info.message-wrapper {
font-weight: bold;
color: #66ca01;
}

#watupro_quiz h2 p {
display: inline-block;
}

#watupro_quiz a {
color: #66ca01;
background: transparent !important;
margin-bottom: 20px;
}

#watupro_quiz .watupro-gtitle {
display: none;
}

#watupro_quiz #startOutput {
display: none;
}

.cert-container {
max-width: 600px;
margin: 0 auto;
border: 1px dashed #ddd;
padding: 50px;
position: relative;
}

.cert-container .section {
position: absolute;
left: 0;
top: 0;
}

.woocommerce-edit-address .woocommerce-MyAccount-content h3 {
display: none;
}

#place_order {
margin-bottom: 100px;
}

.cross-sells .products .product {
  width:  50% !important;
  max-width:  50% !important;
  flex-basis:  50% !important;
}

@media only screen and (min-width: 600px){
  .desktop-hide{
    display: none;
  }
}

@media only screen and (max-width: 600px){
  .mobile-hide{
    display: none;
  }
}

/*honeypot*/

.acf-twitter {
  visibility: hidden;
}

/* Was `display: none !important` — checked every bundle product on the
   site and none of them use the tr.bundled_table_item table-style display
   this was presumably written to prefer instead. That made this rule hide
   the only display method any bundle actually has, leaving the "what's
   included" list blank on every bundle product page (client feedback). */
.bundled_product_summary {
}

/* Client doesn't want images in the bundled-items list, just the title +
   short description. Hide the image column and let details take the full
   width instead of leaving empty space where the image used to sit. */
.bundled_product_summary .bundled_product_images {
  display: none;
}

/* WooCommerce Product Bundles' own stylesheet has a more specific rule
   (div.bundled_product_summary:not(.thumbnail_hidden) .details) that floats
   this right at 80% width, reserving a ~20% gap on the left where the (now
   hidden) image column used to sit — !important is needed to beat it. */
.bundled_product_summary .details {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
}

/* The per-item quantity field is intentionally `type="hidden"` (bundles
   here always include exactly one of each item), but its wrapping .quantity
   div was still rendering as a bordered empty box with nothing in it —
   and so was ITS OWN wrapper (.cart[data-bundled_item_id]), which is a
   generic WooCommerce "cart" div, not the outer bundle_form itself. */
.bundled_product_summary .quantity_hidden {
  display: none;
}

.bundled_product_summary .cart[data-bundled_item_id] {
  display: none;
}

.bundle_form #buymore {
  display: none !important;
}

tr.bundled_table_item td.product-quantity {
  display: none;
}

tr.bundled_table_item td.product-name {
  font-size: .85em !important;
  padding: 0 0 5px 0 !important;
}

/* cart + checkout review tables */
.woocommerce .product-name .variation {
  display: grid;
  grid-template-columns: max-content 1fr; /* label | value */
  column-gap: 8px;
  row-gap: 2px;
}

.woocommerce .product-name .variation dt,
.woocommerce .product-name .variation dd {
  margin: 0;      /* remove default spacing */
  display: contents; /* let grid place label/value cleanly */
}

/* (fallback if your theme dislikes display: contents) */
/*
.woocommerce .product-name .variation dt { grid-column: 1; }
.woocommerce .product-name .variation dd { grid-column: 2; }
*/


/* ── Booking Modal ────────────────────────────────────────────────────────── */

.prc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.prc-modal:not([hidden]) {
  display: flex;
}

.prc-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.prc-modal-container {
  position: relative;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  width: 92%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}

/* Header row injected inside form.cart — title left, close right */
.prc-modal-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.prc-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

/* Full-bleed purple band across the header row, edge-to-edge of the visible
   modal card (client feedback — previously only the title text itself had
   a small rounded purple pill, leaving white margin around it unlike the
   speaker bio modal's full-width header). Negative margins cancel the
   surrounding form.cart/.bundle_data box's own 1em padding so this reaches
   the card's real edges; border-radius matches that box's own 10px corners
   so the two blend into one shape. */
#prc-booking-modal .prc-modal-form-header {
  margin: -1em -1em 1.25rem;
  /* Shorter bar (client feedback: bar was taller than the title needed) —
     was .9rem 1em. */
  padding: .55rem 1em;
  background: #320067;
  border-radius: 10px 10px 0 0;
}

/* The band above now supplies the purple background — clear the title's
   own smaller pill instead of leaving it painted on top. */
#prc-booking-modal .prc-modal-title {
  background: none;
  color: #fff;
  padding: 0;
  border-radius: 0;
  /* A more specific WooCommerce/theme heading rule (h3 inside the product
     summary) was winning over the plain .prc-modal-title{margin:0} above
     and adding a 15px bottom margin — that pushed the title's own margin
     box (which align-items:center centres) upward relative to the close
     button's, throwing the × out of line with the text (client feedback).
     !important here, scoped to this one modal instance, settles it. */
  margin: 0 !important;
}

.prc-modal-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0.1rem 0.3rem;
  margin-left: auto;
  /* Flatsome's global button reset gives every <button> a 60px min-height —
     that inflated box (not the × glyph's own alignment) was what threw the
     cross out of line with the title text (client feedback). align-items:
     center on the header row was already centring correctly; the button's
     own box just needed to stop being artificially tall. */
  min-height: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
}

.prc-modal-close:hover {
  color: #333;
}

/* Close button sits directly on the header's own purple band now — a plain
   white icon reads clearly there instead of the default grey. */
#prc-booking-modal .prc-modal-close {
  color: #fff;
}

#prc-booking-modal .prc-modal-close:hover {
  color: rgba(255, 255, 255, .75);
}

/* Add to Cart button — was WooCommerce's default translucent ".button.alt"
   purple, left-aligned; now solid and centred to match the header band
   above it (client feedback), consistent with the site's other full-width
   purple CTAs (e.g. .pcd-add-slot right above it in this same modal). */
#prc-booking-modal .single_add_to_cart_button.button.alt {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #320067 !important;
  opacity: 1 !important;
  color: #fff !important;
  border: none;
}

#prc-booking-modal .single_add_to_cart_button.button.alt:hover {
  background-color: #4a0099 !important;
}

body.prc-modal-open {
  overflow: hidden;
}

/* form.cart is rendered inside #prc-booking-modal by PHP (remove_action prevents
   it appearing in the normal summary flow), so no CSS hide rule needed here. */

/* ── Two-column product summary layout ───────────────────────────────────────
   Left: title + product tabs (main content)
   Right: prc-product-sidebar (Details box, Book Now, Access — sticky)
   Applies only on screens wide enough to show both columns comfortably.
   The modal (#prc-booking-modal) is position:fixed so it never affects flow.
---------------------------------------------------------------------------- */
@media (min-width: 850px) {
  .single-product .entry-summary {
    display: grid !important;
    grid-template-columns: 1fr 320px;
    column-gap: 2.5rem;
    align-items: start;
  }

  /* Everything defaults to the left column */
  .single-product .entry-summary > * {
    grid-column: 1;
    min-width: 0; /* prevent grid blowout */
  }

  /* Sidebar sits in the right column, spanning all rows, sticky on scroll */
  .single-product .entry-summary > .prc-product-sidebar {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: 1.5rem;
  }
}

/* mini-cart widget only */
.widget_shopping_cart .variation .variation-Includes {
  display: none !important;
}

/* Per-item Notes field on the Cart page (relocated here from the product
   page's native WooCommerce Add-ons form, per client feedback). Rendered
   via woocommerce_after_cart_item_name, which this theme's cart template
   fires BEFORE the delegate list (a wc_get_formatted_cart_item_data() dl,
   added via the woocommerce_get_item_data filter) — the reverse of what
   reads naturally and, being a tall textarea, threw the price row below it
   out of line with the Qty column (client feedback). Turning the cell into
   a flex column and explicitly ordering the delegate list ahead of Notes
   fixes both without touching either's own render hook. */
/* Default table td vertical-align is "middle" — fine when every cell is one
   line tall, but the product-name cell is much taller than Price/Qty/
   Subtotal once it's carrying a delegate list + Notes box, so those three
   cells were centering partway down instead of lining up with the product
   title at the top of the row (client feedback). */
.woocommerce-cart-form table.cart td {
  vertical-align: top;
}

.woocommerce-cart-form td.product-name {
  display: flex;
  flex-direction: column;
}
.woocommerce-cart-form td.product-name > dl.variation {
  order: 1;
}
.woocommerce-cart-form td.product-name > .mobile-product-price {
  order: 2;
}
.woocommerce-cart-form td.product-name .pcd-cart-notes {
  order: 3;
}

.pcd-cart-notes {
  margin-top: 0.5em;
  max-width: 420px;
}
.pcd-cart-notes label {
  display: block;
  font-size: 0.75em;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25em;
}
.pcd-cart-notes-field {
  width: 100%;
  min-height: 0;
  height: 2.75em;
  resize: vertical;
  padding: 0.35em 0.6em;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  font-size: 0.85em;
  font-family: inherit;
}
.pcd-cart-notes-field:focus {
  outline: none;
  border-color: #5D9D1B;
  box-shadow: 0 0 0 3px rgba(93, 157, 27, 0.15);
}

/* Per-delegate remove link on a multi-delegate cart line (client feedback —
   previously the only way to drop one delegate was removing the whole
   line). Only rendered by PCD_Product_Page::display_cart_item_data() when
   a line has more than one delegate. */
.pcd-delegate-remove {
  display: inline-block;
  margin-left: 0.4em;
  color: #b91c1c;
  text-decoration: none;
  font-weight: 700;
}
.pcd-delegate-remove:hover {
  color: #7f1d1d;
  text-decoration: none;
}

/* Bundle product page: plain description (no heading) followed by one
   accordion item per bundled course, each with its own "Details and
   Programme" / "Speakers" tab switcher nested inside it. Spacing matches
   the Key Subjects / Programme accordion on individual product pages
   (.prc-programme-accordion's gap: .625rem). */
.prc-bundle-description {
  margin-top: 1rem;
  color: #334155;
  line-height: 1.6;
}

/* WooCommerce Subscriptions always echoes a "first payment date" paragraph
   in the product summary, even on non-subscription products like these
   bundles — it just renders empty (<p class="first-payment-date"><small>
   </small></p>) but still takes up its own line-height + margin, leaving a
   much bigger gap under the savings pill than between any other paragraph
   on the page (client feedback). Hide it whenever it has nothing in it. */
.first-payment-date:has(> small:empty) {
  display: none;
}
.prc-bundle-course-accordion {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-top: 1.5rem;
}

/* Bundle course accordions only: white background, purple border highlight
   on the active (open) item — overrides both the base grey [open] state in
   product-content.css and the site-wide wireframe green [open] state. The
   extra .single-product class here isn't for scoping (it's already implied)
   — it's purely to out-rank body.prc-wireframe-test's selector specificity,
   since !important vs !important is decided by specificity, not source order. */
.single-product .prc-bundle-course-accordion .prc-accordion-item[open] {
  background: #fff !important;
  border-color: #320067 !important;
}

.prc-bundle-course-tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1rem;
}
.prc-bundle-course-tabs button {
  background: none;
  border: none;
  padding: 0 0 .6rem;
  font-size: .875rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.prc-bundle-course-tabs button.is-active {
  color: #0f172a;
  border-bottom-color: #66ca01;
}

/* Nested programme accordion (rendered by PCW_Product_Content::render_details_tab()
   inside the "Details and Programme" panel of a bundle course) — flatten it:
   no border/radius of its own, since it's already inside the course's own
   bordered accordion item. Specificity here (.prc-bundle-course-panel +
   .prc-programme-accordion + .prc-accordion-item) is high enough to beat the
   general purple-border [open] rule above regardless of source order. */
.prc-bundle-course-panel .prc-programme-accordion .prc-accordion-item {
  border: none !important;
  border-radius: 0 !important;
}
.prc-bundle-course-panel .prc-programme-accordion .prc-accordion-item__header,
.prc-bundle-course-panel .prc-programme-accordion .prc-accordion-item__body {
  padding: 0 !important;
}

/* With each item's own card border removed above, there's nothing marking
   where one Key Subject ends and the next begins besides the flex gap —
   add a subtle line back in, skipping the first item (nothing to divide
   it from). */
.prc-bundle-course-panel .prc-programme-accordion .prc-accordion-item:not(:first-child) {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: .625rem !important;
}

/* When a product has no parsed post_content (render_details_tab() falls
   back to the legacy Date/Time/Speaker(s)/CPD row list), .prc-details-legacy
   is always the sole/first thing rendered in its tab panel — its own
   border-top then duplicates the line already drawn by the tab bar's
   border-bottom directly above it (.prc-wf-tabs on individual product
   pages, .prc-bundle-course-tabs inside a bundle's per-course accordion),
   giving two horizontal rules back to back with nothing between them. */
.product-page-sections .prc-details-legacy,
.prc-bundle-course-panel .prc-details-legacy {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* The bundled-items listing inside the booking modal (WC Product Bundles'
   own "layout_default" markup) is redundant now that each course has its
   own accordion + Details/Speakers tabs on the page itself. The hidden
   bundle_quantity_N input WC Bundles needs on submit lives inside this same
   markup but is type="hidden", so it still posts correctly while its
   ancestor is display:none. */
#prc-booking-modal .bundled_product_summary {
  display: none;
}

/* Flatsome core (flatsome-shop.css) draws `.product-section{border-top:1px
   solid #ececec}` as a divider between stacked sections — correct for its
   original "sections" display mode, where every tab's content shows at
   once, one below another. Our .prc-wf-tabs JS repurposes that same markup
   into a single-panel tabbed view instead, so this section's own border-top
   just duplicates the line the tab bar's border-bottom already drew right
   above it, with nothing but blank margin in between. */
.product-page-sections .product-section {
  border-top: none;
}

/* ── Login page: "LOG IN" button ─────────────────────────────────────────── */
/* Theme My Login's default .tml-button renders as a bare unstyled <button> —
   match it to the "Register Now" button (.button.secondary.expand) right
   next to it on the same /login-or-register/ page. */
.tml-login .tml-button {
  display: block;
  width: 100%;
  text-align: center;
  background: #5a3d76;
  color: #fff !important;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 200ms ease;
  box-sizing: border-box;
}

.tml-login .tml-button:hover {
  background: #5C9C1C;
}

/* Remove the bullet before "Click here to reset your password" — the
   register-link <li> is already hidden (.tml-login .tml-register-link,
   above), leaving just this one bulleted list item under the button. */
.tml-login .tml-links,
.tml-login .tml-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tml-login .tml-links {
  text-align: center;
  margin-top: 1em;
}

/* ── Details/Programme content: divider between sections ────────────────── */
/* Each h3/h4 (see the pale-green/grey ".product-container h3/h4" rule above
   in the Customizer's Additional CSS) marks the start of a new section —
   add a subtle top border on every section after the first, using the
   general-sibling combinator so it works regardless of h3/h4 mix. Scoped to
   .product-page-sections (the tab-content wrapper), NOT .product-container
   — the sidebar's "Details"/"Speakers"/"Access" box titles are also h3s
   but carry .prc-sidebar-box__title and live outside this wrapper. */
.product-page-sections h3 ~ h3,
.product-page-sections h3 ~ h4,
.product-page-sections h4 ~ h3,
.product-page-sections h4 ~ h4 {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid #e2e8f0;
}

/* ── Category (archive) pages: narrower container ─────────────────────────
   Site Width is set globally to 1280px (client wanted less white space
   around the edges elsewhere on the site), but on category pages
   specifically that read as everything — cards, icons, the filter sidebar
   text — being oversized compared to the live site the client is used to
   (client feedback — confirmed they're happy with this narrower width on
   category pages specifically). Scoped to .tax-product_cat only (the body
   class WooCommerce adds specifically for product-category archives —
   confirmed absent on single-product, shop, and all other page types), so
   this doesn't touch the Site Width setting anywhere else on the site.
   1080px matches Flatsome's own un-customised default, i.e. the live
   site's current width. */
.tax-product_cat .container-width,
.tax-product_cat .full-width .ubermenu-nav,
.tax-product_cat .container,
.tax-product_cat .row {
  max-width: 1080px;
}

/* ── Category (archive) pages: remove empty title bar ──────────────────────
   Flatsome's .category-page-title wrapper (title h1, breadcrumb, result
   count, catalog ordering) always renders and takes up ~60px even when
   every one of its children is disabled/hidden here: the title is off by
   theme_mod default, breadcrumbs are unhooked in functions.php, and result
   count/ordering are hidden via .woocommerce-ordering{display:none} etc.
   above — confirmed empty (innerText "") on the live category pages, so
   this was just a blank gap at the top (client feedback: "narrow space at
   top of product category page"). */
.tax-product_cat .category-page-title {
  display: none;
}

/* ── Assessment "View Results" button ──────────────────────────────────────
   WatuPRO renders this as a bare <input type="button">/<input type="submit">
   with no button styling of its own, and its stock CSS (watupro/style.css)
   centres it in a full-width flex row with margin on every side (client
   feedback: "needs to be a button and remove white space around it").
   Scoped to .prc-assessment-section (the wrapper around the inline
   ?assessment=true quiz — see prc_inline_assessment() in functions.php) so
   this doesn't touch WatuPRO buttons used anywhere else on the site. */
.prc-assessment-section .watupro_buttons.flex {
  justify-content: flex-start;
  margin: 0 !important;
}
.prc-assessment-section .watupro_buttons.flex div {
  margin: 0 !important;
}
.prc-assessment-section .watupro-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  background: #5D9D1B;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.prc-assessment-section .watupro-submit-button:hover {
  background: #4e8716;
}

/* Booking modal above the Simple Banner promo bar (z-index 99999) — on phones
   the two-line banner covered the modal's title bar and close button. */
body.prc-modal-open .simple-banner {
  z-index: 1;
}

/* Checkout Register / Login table (woocommerce/checkout/form-login.php):
   stack the two columns on small screens instead of squeezing both. */
@media (max-width: 849px) {
  .woocommerce-checkout .guest-message + table,
  .woocommerce-checkout .guest-message + table tbody,
  .woocommerce-checkout .guest-message + table tr,
  .woocommerce-checkout .guest-message + table td {
    display: block;
    width: 100% !important;
  }
}