/* 
    Logo Font Color: #2B021F
    Main Color: var(--brand-primary)
    Light Grey Borders and Lines: var(--light-grey)
    Grey: var(--grey)
    Off White: var(--light-white)
    Button: var(--accent)
    Button Hover: var(--brand-secondary)
*/

/* 
:root {
  --secondary-teal: var(--brand-secondary);
  --secondary-midnight-green: var(--brand-secondary-darker);
  --secondary-teal-lighter: var(--brand-secondary-light);
  --global-color-24: var(--brand-primary);
  --global-color-22: var(--brand-primary);
  --accent-darker: var(--brand-accent);
  --accent-darker-darker: var(--brand-accent-darker);
  --global-color-21: var(--brand-accent);
  --global-color-17: var(--brand-secondary-lighter);
  --accent-lightest: var(--brand-secondary-lighter);
  --accent-lightest-two: var(--brand-secondary-lightest);
  --accent-darkest: var(--contrast);
} */
 :root {
  --accent: var(--brand-primary);
}

.inside-article a.NewButtonStyle, .paging-navigation a.NewButtonStyle, .comments-area a.NewButtonStyle, .page-header a.NewButtonStyle {
  color: var(--base-3);
}


.main-navigation {
  border-bottom: 1px solid var(--light-grey);
}

.main-navigation ul ul.sub-menu {
  box-shadow: 0px -2px 0px 0px var(--light-grey);
  border: 1px solid var(--light-grey);
}

.main-navigation ul ul.sub-menu > li {
  border-bottom: 1px solid var(--light-grey);
}

.main-navigation ul ul.sub-menu > li:last-child {
  border-bottom: none;
}

#primary-menu > ul > li:first-child > ul.sub-menu {
  width: 300px;
}
#primary-menu > ul > li:last-child > ul.sub-menu {
  width: 250px;
}

#content {
  padding-top: 30px;
}

body.y4l-no-top-padding #content {
  padding-top: 0px;
}

a, .wp-theme-generatepress .bwf-adv-heading a {
  text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
}

.gb-button {
  cursor: pointer;
}

.inside-article .gbp-button--primary, .inside-article .gbp-button--primary:hover, .inside-article .gbp-yflo-btn-floating, .inside-article .gbp-yflo-btn-floating:hover {
  color: var(--base-3);
  text-decoration: none;
}

.btn-primary a, .btn-primary button {
  border-radius: 25px;
}

body .woofunnels-container .bwf-advance-btn .yfl-funnel-primary-button .bwf-btn-inner-text {
  font-weight: 600 !important;
  letter-spacing: 0.25px;
}

.footer-disclaimer {
  color: #c1c1c1;
}


/* 
    Swiper
*/
.swiper-container .swiper-button-prev, .swiper-container .swiper-button-next {
  color: var(--brand-primary);
}
.swiper-container {
  width: 100%;
  overflow: visible;
}
.swiper-container .swiper-button-prev {
  left: 10px;
}
.swiper-container .swiper-button-next {
  right: 10px;
}
.swiper-container:after, .swiper-container:before {
  content: " ";
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  z-index: 3;
}
.swiper-container:before {
  background: linear-gradient( 270deg, transparent, rgba(255,255,255,.6) 20px, rgba(255,255,255,.6) );
  right: 97%;
}
.swiper-container:after {
  background: linear-gradient( 90deg, transparent, rgba(255,255,255,.6) 20px, rgba(255,255,255,.6) );
  left: 97%;
}

/* 
    Flickity
*/
.yfl-carousel {
  /* height: 300px; */
}
.yfl-carousel .carousel-cell {
  /* max-height: 300px; */
  width: calc(50% - 1.5rem * 1/2);
  margin-right: 1.5rem;
}
.yfl-carousel .flickity-page-dots {
    width: 100%;
    bottom: -1.5rem;
    padding: 0;
    margin: 0;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.yfl-carousel .flickity-page-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0;
    background: var(--contrast);
}

/* Navigation */
.yfl-carousel .flickity-button {
    height: 2.5rem;
    width: 2.5rem;
    color: var(--contrast);
}


.yfl-carousel-single .carousel-cell {
  /* max-height: 300px; */
  width: calc(100% - 1.5rem);
  margin-right: 1.5rem;
}

@media screen and (max-width: 768px) {
  
  .yfl-carousel .carousel-cell {
    width: calc(100% - 1.5rem);
    margin-right: 1.5rem;
  }
  
}




/* 
    Misc from Kleo Child
*/
.btn.btn-boxed-icon.with-icon i {
  border-radius: 4px 0 0 4px;
  background-color: #372549;
}

.woocommerce #content div.product form.cart div.quantity, .woocommerce div.product form.cart div.quantity, .woocommerce-page #content div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity {
  display: none;
}

.quiz input.quiz-submit.complete, .lesson input.quiz-submit.complete {
  border: none;
}


/* 
    Woo - From Kleo Child
*/
.wc-proceed-to-checkout .checkout-button {
  border: 1px solid var(--brand-primary) !important;
  background-color: var(--brand-primary) !important;
  font-size: 15px !important;
  padding: 14px 10px !important;
}
.wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--brand-secondary) !important;
}

@media screen and (max-width: 600px) {
  .wc-proceed-to-checkout .checkout-button {
    text-align: center;
    width: 100%;
  }
}

p#billing_email_field {
  float: left;
  width: 100%;
}

.woocommerce ul.payment_methods li.payment_method_paypal .about_paypal {
  display: none;
}
.woocommerce #payment div.payment_box, .woocommerce-page #payment div.payment_box {
  background-color: #ffffff;
  padding: 1em 4%;
}
.woocommerce #payment div.payment_box p {
  margin-top: 0;
  margin-bottom: 0;
}

/*
.woocommerce form .form-row .input-checkbox, .woocommerce-page form .form-row .input-checkbox {
  margin-top: 8px;
}
*/

.woocommerce form .woocommerce-billing-fields .form-row label.checkbox {
  padding-left: 10px;
  font-size: 13px;
}

.woocommerce #payment #place_order {
  width: 100%;
  margin-top: 10px;
  background-color: var(--brand-primary);
  padding: 14px 20px;
  font-size: 16px;
  line-height: 1.33;
}
.woocommerce #payment #place_order:hover {
  background-color: var(--brand-secondary) !important;
}

.woocommerce .order-review-wrap a {
  color: var(--brand-primary);
}
.woocommerce .order-review-wrap a:hover {
  color: var(--brand-secondary);
}

.woocommerce .woocommerce-additional-fields {
  display: none;
}

/* .woocommerce .woocommerce-account-fields {
  margin-bottom: 20px;
} */

.woocommerce .checkout-steps {
  padding-top: 0;
  float: left;
}

.woocommerce .norton-secured-seal {
  float: right;
  margin-bottom: 12px;
}
.woocommerce .norton-secured-seal img {
  max-height: 45px;
}

body.woocommerce-checkout .woocommerce-info, .woocommerce form.woocommerce-checkout {
  clear: both;
}

.woocommerce #order_review .woocommerce-info {
  display: none;
}

body.woocommerce-checkout #footer {
  display: none;
}

.payment_method_stripe .woocommerce-SavedPaymentMethods.wc-saved-payment-methods {
  list-style: none;
}

@media screen and (max-width: 690px) {
  
  .woocommerce .norton-secured-seal {
    clear: both;
    float: left;
  }
  
  .woocommerce .checkout-steps {
    padding-bottom: 1em;
  }
  
}




/* 
    Helper
*/
.rounded-video iframe {
  border: 1px solid transparent !important;
  border-radius: 20px;
}

.rounded-image, .rounded-image > figure img {
  border: 1px solid transparent !important;
  border-radius: 20px;
}

.right-to-left, .wpb_right-to-left {
  animation: none !important;
}


/* 
    Star Rating
*/
.star-rating {
  text-align: center;
  font-size: 20px;
}
.star-rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  color: var(--brand-secondary);
}



/* 
    Gravity Forms
*/
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_page_footer input.button, .gform_wrapper .gform_page_footer input[type=submit] {
  background-color: var(--brand-primary);
  color: #FAFAFA;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 22px;
}
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_page_footer input.button:hover, .gform_wrapper .gform_page_footer input[type=submit]:hover {
  background-color: var(--brand-primary);
  color: #FAFAFA;
}
.gform_wrapper .gfield_required {
  color: var(--brand-accent);
}


/* 
    Cookie Consent
*/
@media (max-width: 985px) {
    .cli-style-v2 .cli-bar-message {
        font-size: 12px;
    }
    #cookie-law-info-bar[data-cli-style="cli-style-v2"] {
        padding: 15px;
    }
}


/* 
    Footer
*/
#footer-widgets {
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}

#footer-widgets .widget-title {
  color: var(--brand-primary);
  text-transform: uppercase;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.25px;
}

ul.home-social {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}
ul.home-social li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.home-social li a {
  color: var(--brand-primary);
}
ul.home-social li a .fa-inverse {
  color: var(--light-white);
}
ul.home-social li a:hover {
  color: var(--brand-secondary);
}
ul.home-social li a:hover i.fa-inverse {
  color: var(--light-white);
}



#footer-widgets .widget_nav_menu h2 {
  margin-bottom: 12px;
}

#footer-widgets .widget_nav_menu ul {
  border-top: 1px solid var(--light-grey);
}

#footer-widgets .widget_nav_menu li {
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--light-grey);
}

#footer-widgets .widget_nav_menu li > a {
  color: var(--brand-primary);
  text-decoration: none;
}

#footer-widgets .widget_nav_menu li > a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

#footer-widgets .widget_nav_menu li.current_page_item > a {
  color: var(--brand-secondary);
  text-decoration: none;
}


/* 
    Lesson Styles
*/

.yfl-lesson-header {
  padding: 16px 0;
  border-bottom: 1px solid var(--light-grey);
}

.yfl-lesson-header-inside {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}

.yfl-lesson-header h1 {
  font-size: 24px;
  margin-bottom: 0;
}



/* 
    Sensei Styles
*/

.meter > span.value {
  background: var(--brand-primary);
}

nav#post-entries {
  display: flex;
  justify-content: space-between;
  margin: 26px 0;
}

.sensei-breadcrumb {
  background: none;
}

.course-container a.button, .course-container a.button:visited, .course-container a.comment-reply-link, .course-container #commentform #submit, .course-container .submit, .course-container input[type=submit], .course-container input.button, .course-container button.button, .course a.button, .course a.button:visited, .course a.comment-reply-link, .course #commentform #submit, .course .submit, .course input[type=submit], .course input.button, .course button.button, .lesson a.button, .lesson a.button:visited, .lesson a.comment-reply-link, .lesson #commentform #submit, .lesson .submit, .lesson input[type=submit], .lesson input.button, .lesson button.button, .quiz:not(.quiz-blocks):not(.sensei-course-theme) a.button, .quiz:not(.quiz-blocks):not(.sensei-course-theme) a.button:visited, .quiz:not(.quiz-blocks):not(.sensei-course-theme) a.comment-reply-link, .quiz:not(.quiz-blocks):not(.sensei-course-theme) #commentform #submit, .quiz:not(.quiz-blocks):not(.sensei-course-theme) .submit, .quiz:not(.quiz-blocks):not(.sensei-course-theme) input[type=submit], .quiz:not(.quiz-blocks):not(.sensei-course-theme) input.button, .quiz:not(.quiz-blocks):not(.sensei-course-theme) button.button {
  padding: 10px 20px;
  border-radius: 4px;
  width: fit-content;
  background-color: var(--brand-primary);
  padding: 14px 28px;
  font-size: 1rem;
}

.course-container a.button:hover, .course-container a.comment-reply-link:hover, .course-container #commentform #submit:hover, .course-container .submit:hover, .course-container input[type=submit]:hover, .course-container input.button:hover, .course-container button.button:hover, .course a.button:hover, .course a.comment-reply-link:hover, .course #commentform #submit:hover, .course .submit:hover, .course input[type=submit]:hover, .course input.button:hover, .course button.button:hover, .lesson a.button:hover, .lesson a.comment-reply-link:hover, .lesson #commentform #submit:hover, .lesson .submit:hover, .lesson input[type=submit]:hover, .lesson input.button:hover, .lesson button.button:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) a.button:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) a.comment-reply-link:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) #commentform #submit:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) .submit:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) input[type=submit]:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) input.button:hover, .quiz:not(.quiz-blocks):not(.sensei-course-theme) button.button:hover {  
  background-color: var(--brand-secondary);
}

.editor-styles-wrapper .wp-block-sensei-lms-learner-courses__filter, #user-course-status-toggle {
  border-bottom-color: var(--grey);
}

.editor-styles-wrapper .wp-block-sensei-lms-learner-courses__filter__item.active, .editor-styles-wrapper .wp-block-sensei-lms-learner-courses__filter a.active, #user-course-status-toggle__item.active, #user-course-status-toggle a.active {
  border-bottom-color: var(--grey);
}

.sensei-progress-bar__bar div {
  background-color: var(--brand-primary);
}

.course .course, .course-container .course, .course-container .course {
  margin: 1rem 0;
}

.course:not(body) .sensei-course-meta, .course-container .sensei-course-meta, .course-container .course .sensei-course-meta{
  margin-bottom: 1rem;
}

.course-container li.course {
  padding: 0 0 2em;
}

.course-container li.course p.course-excerpt {
    margin-top: 0px !important;
    margin-right: 2rem;
}

.course-container li.course p.course-excerpt img {
    max-height: 180px;
    width: auto;
    text-align: left;
    margin: 10px 0;
}

.sensei-pagination .page-numbers li {
  padding: 0 7px;
}

.sensei-pagination ul.page-numbers {
  margin: 0 0 1.5em 0;
}



/* 
    Woo Single
*/
.woocommerce #accordion-woo .panel-title a {
  font-size: 16px;
  color: #372549;
}

.woocommerce div.product div.images img {
  border-radius: 22px;
}

.woocommerce button.button.alt.single_add_to_cart_button {
  border-radius: 22px;
}


/* 
    Woo Shortcodes
*/
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {
  color: var(--brand-secondary);
}

li.product figcaption .shop-actions>a.button {
  color: #5e5e5e;
  padding: 10px;
  font-size: 12px;
  border: none;
}
li.product figcaption .shop-actions>a.button.product_type_simple:before, li.product figcaption .shop-actions>a.button.product_type_variable:before {
  font-size: 14px;
}
li.product figcaption .shop-actions>a.button:hover {
  color: var(--brand-primary);
  border: none;
}
li.product figcaption .shop-actions .quick-view:hover {
  color: var(--brand-secondary);
}

p.product.woocommerce.add_to_cart_inline {
  border: none !important;
  text-align: center;
}
.add_to_cart_inline span.woocommerce-Price-amount.amount {
  display: none;
}
li.product figcaption .shop-actions {
  display: none;
}



/* 
  Woo Misc  
*/
li.product figcaption .shop-actions .quick-view.kleo-loading {
  background: none !important;
}
li.product figcaption .shop-actions > a.button.loading:before {
  content: " ";
  background: none !important;
}
.woocommerce-page input.button.loading:before {
  content: "";
  background: none !important;
}
.processing .blockOverlay {
  background-image: none !important;
}
li.product figcaption .shop-actions > a.button.product_type_simple:before {
  display: none;
}
.woocommerce #content input.button.loading:before,
.woocommerce #respond input#submit.loading:before,
.woocommerce a.button.loading:before,
.woocommerce button.button.loading:before,
.woocommerce input.button.loading:before,
.woocommerce-page #content input.button.loading:before,
.woocommerce-page #respond input#submit.loading:before,
.woocommerce-page a.button.loading:before,
.woocommerce-page button.button.loading:before,
.woocommerce-page input.button.loading:before {
  content: "";
  background: none !important;
}

.woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-error, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-message {
  font-size: 14px;
  margin-bottom: 1em !important;
  clear: both;
}
.woocommerce-info a {
  color: var(--brand-primary);
}
.woocommerce-info a:hover {
  color: var(--brand-secondary);
}
.checkout_coupon {
  clear: both;
}




/* 
    Yoga Shred Landing Page
*/
.page-yoga-shred-training .tp-caption {
  text-align: center !important;
}

.page-yoga-shred-training #page h3, .page-yoga-shred-training-new #page h3 {
  margin-bottom: 0px;
}
.page-yoga-shred-training #page h6, .page-yoga-shred-training-new #page h6 {
  color: var(--brand-primary);
  margin-top: 2px;
}

.page-yoga-shred-training .row-dark h2 {
  color: var(--brand-primary)!important;
}

ul.sadie-circle {
  list-style-type: none;
  padding: 0;
  margin: 0;  
}
ul.sadie-circle li {
  background: url('/wp-content/themes/generatepress-yogaforlife/images/Sadie-Logo-Circle-x30.png') no-repeat left 2px;
  padding-left: 44px;
  margin-bottom: 16px;
}
ul.sadie-circle li:last-of-type {
  height: 40px;
}

.kleo-carousel-testimonials li strong.testimonial-name {
  display: block;
}

.kleo-carousel-testimonials li .testimonial-image {
  display: none;
}

.kleo-carousel-testimonials li .testimonial-content p {
  line-height: 1.4em;
}

.main-color .carousel-pager a.selected {
  background-color: var(--brand-primary);
}

.main-color .btn-primary {
  color: #fafafa;
  border-radius: 4px !important;
  border-top-color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
}
.main-color .btn-primary:hover {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
  color: #fafafa;
}

#what-is-row p {
  font-size: 18px;
}

.floater.getstarted.on {
  right: 20px;
  opacity: 1;
}

.floater.getstarted {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: var(--brand-primary);
  color: #fafafa;
  padding: 14px 40px;
  position: fixed;
  bottom: 50px;
  right: -60px;
  z-index: 100;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.floater.getstarted:hover {
  background-color: var(--brand-primary);
  color: #fafafa;
}

.page-yoga-shred-training .tp-parallax-wrap {
  top: 10% !important;
}

#ystt-slide-text h2, #ystt-slide-text h4, #ystt-slide-text h5 {
  text-align: center;
  color: #06070E !important;
  text-shadow: 2px 2px 4px #FF396C;
  font-family: 'Alfa Slab One', sans-serif;
  font-weight: 400;
}
#ystt-slide-text h2 {
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 56px;
  line-height: 1.1em;
}
#ystt-slide-text h4 {
  margin-top: 0;
  margin-bottom: 4px;
  font-style: italic;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 39px;
  line-height: 1em;
}
#ystt-slide-text h5 {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 40px;
  line-height: 1.2em;
}
@media screen and (max-width: 650px) {
  
  #ystt-slide-text h2 {
    font-size: 54px;
    line-height: 1.1em;
  }
  #ystt-slide-text h4 {
    font-style: italic;
    font-size: 30px;
    line-height: 1em;
  }
  #ystt-slide-text h5 {
    font-size: 32px;
    line-height: 1.2em;
  }
  
}
@media screen and (max-width: 500px) {
  
  #ystt-slide-text h2 {
    font-size: 36px;
    max-width: 350px;
    margin: 8px auto 0 auto;
  }
  #ystt-slide-text h4 {
    font-style: italic;
    font-size: 22px;
    line-height: 1em;
  }
  #ystt-slide-text h5 {
    font-size: 24px;
    line-height: 1.2em;
    max-width: 350px;
    margin: 8px auto 0 auto;
  }
  
}

/* 
    iPad Pro Portrait
*/
@media screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px) {
  
  .page-yoga-shred-training .tp-parallax-wrap {
    top: 18% !important;
  }
  
}
/* 
    iPad Pro Landscape
*/
@media screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px) {
  
  .page-yoga-shred-training .tp-parallax-wrap {
    top: 15% !important;
  }
  
}





/* 
    Sensei - General
*/
.course-container a.button, .course-container a.button:visited, .course-container a.comment-reply-link, .course-container #commentform #submit, .course-container .submit, .course-container input[type=submit], .course-container input.button, .course-container button.button, .course a.button, .course a.button:visited, .course a.comment-reply-link, .course #commentform #submit, .course .submit, .course input[type=submit], .course input.button, .course button.button, .lesson a.button, .lesson a.button:visited, .lesson a.comment-reply-link, .lesson #commentform #submit, .lesson .submit, .lesson input[type=submit], .lesson input.button, .lesson button.button, .quiz a.button, .quiz a.button:visited, .quiz a.comment-reply-link, .quiz #commentform #submit, .quiz .submit, .quiz input[type=submit], .quiz input.button, .quiz button.button, .wp-block-sensei-lms-button-complete-lesson button {
  border: 1px solid var(--brand-primary);
  background-color: var(--brand-primary);
  color: #FAFAFA;
}
.course-container a.button:hover, .course-container a.button:visited:hover, .course-container a.comment-reply-link:hover, .course-container #commentform #submit:hover, .course-container .submit:hover, .course-container input[type=submit]:hover, .course-container input.button:hover, .course-container button.button:hover, .course a.button:hover, .course a.button:visited:hover, .course a.comment-reply-link:hover, .course #commentform #submit:hover, .course .submit:hover, .course input[type=submit]:hover, .course input.button:hover, .course button.button:hover, .lesson a.button:hover, .lesson a.button:visited:hover, .lesson a.comment-reply-link:hover, .lesson #commentform #submit:hover, .lesson .submit:hover, .lesson input[type=submit]:hover, .lesson input.button:hover, .lesson button.button:hover, .quiz a.button:hover, .quiz a.button:visited:hover, .quiz a.comment-reply-link:hover, .quiz #commentform #submit:hover, .quiz .submit:hover, .quiz input[type=submit]:hover, .quiz input.button:hover, .quiz button.button:hover, .wp-block-sensei-lms-button-complete-lesson button:hover {
  border: 1px solid var(--brand-secondary);
  background-color: var(--brand-secondary);
  color: #FAFAFA;
}


.inside-article .wp-block-file__button {
  border: 1px solid var(--brand-primary);
  background-color: var(--brand-primary);
  color: #FAFAFA;
}
.inside-article .wp-block-file__button:hover {
  border: 1px solid var(--brand-secondary);
  background-color: var(--brand-secondary);
  color: #FAFAFA;
}


/* #sensei-user-courses ul.course-container li h3 a:after {
  content:"\00a0\00a0\00a0 Enter Course Here\00bb";
  color: #FF396C;
  font-size: 14px;
} */

.sensei .nav-next, .sensei .nav-prev {
  float: none;
}
.sensei-breadcrumb {
  display: none;
}

.meter > span {
  background-color: var(--brand-primary);
}
.meter.red > span {
  background: var(--brand-secondary);
}

#page .course header h2, #page .course-container header h2 {
  margin-bottom: 12px;
}

#page .course header.lesson-title h2 {
  font-size: 29px;
  line-height: 1.2em;
  font-weight: 400;
}

a.sadie-back-to-course {
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px 0 25px;
  background: transparent;
  color: #777;
  display: inline-block;
}

a.sadie-back-to-course:before{
  content: "\2190";
}   

.lesson .lesson-meta {
  clear: both;
  margin-bottom: 0;
}
.course-lessons>article {
  margin-bottom: 1.25em;
}

.course-lessons .lesson a:hover {
  text-decoration: underline;
}


/* 
    Sensei - Modules
*/
body.sensei.module-archive header.archive-header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;
}
body.sensei.module-archive header.archive-header h1 {
  margin-bottom: 12px;
}
body.sensei.module-archive article.lesson {
  margin-bottom: 24px;
}
body.sensei.module-archive article.lesson .lesson-meta {
  display: none;
}
body.sensei.module-archive .lesson-content h2 {
  margin-bottom: 0;
}
body.sensei.module-archive .lesson-content h2 a {
  color: var(--brand-primary);
  text-decoration: underline;
}
body.sensei.module-archive .lesson-content h2 a:hover {
  color: var(--brand-secondary);
}
body.sensei.module-archive .lesson-content .lesson-excerpt {
  margin-top: 0.75em;
}


/* 
    Sensei - My Courses
*/
#user-course-status-toggle a {
  color: var(--contrast);
  padding: 10px 16px;
}
#user-course-status-toggle a.active {
  color: var(--brand-primary);
}
#sensei-user-courses .course .course-title {
  color: var(--brand-primary);
}
#sensei-user-courses .course .course-title a:hover {
  color: var(--brand-secondary);
}
.course-container > li.course:last-child {
  border-bottom: none;
}



/* 
    Sensei Course Lessons
*/
.course-lessons .lesson .entry p {
  margin-top: 0;
}


/* 
    Sensei Login
*/
.sensei-login-submit input, form.register input[type="submit"] {
  background-color: var(--brand-primary);
  color: #FAFAFA;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 22px;
}
.sensei-login-submit input:hover, form.register input[type="submit"]:hover {
  background-color: var(--brand-secondary);
  color: #FAFAFA;
}



/* 
    TBT30 Landing Page
*/
.sadie-main-purchase {
  margin-top: 0px;
}

.sadie-main-price {
  height: 68px;
  float: left;
}

.sadie-main-button {
  float: right;
}

.sadie-main-button .btn-primary.sadie-lp-buy {
  padding: 16px 68px;
  margin-top: 8px;
  font-size: 20px;
}

.sadie-main-price h4 {
  margin: 0;
  color: #8a8a8a !important;
  margin-bottom: 4px;
}

.sadie-main-price h2 {
  display: inline-block;
  margin-top: 0px;
  font-size: 38px;
}


.sadie-main-price .price.strikethrough {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  font-size: 24px;
}

.sadie-main-price .price.strikethrough:before {
    content: "";
    position: absolute;
    top: 48%;
    right: 0;
    left: 0;
    width: 110%;
    border-top: 1px solid #A4A4A4;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

ul.sadie-top-ul {
  padding-left: 35px;
}

ul.sadie-top-ul li {
  margin-bottom: 6px;
}

ul.lp-receive li {
  margin-bottom: 8px;
}

.lp-side-testimonial {
  margin-bottom: 20px;
}
.lp-side-testimonial .star-rating {
  font-size: 1.1em;
  margin-bottom: 6px;
  float: none;
  margin: 7px auto;
}
.woocommerce .main-color .lp-side-testimonial .star-rating span:before {
  color: gold;
}
.lp-side-testimonial .sadie-quote {
  display: block;
  text-align: center;
  font-style: italic;
}
.lp-side-testimonial .sadie-author {
  display: block;
  text-align: center;
  font-size: smaller;
  margin-top: 4px;
}
.lp-side-testimonial .sadie-author-credits {
  display: block;
  text-align: center;
  font-size: 12px;
  font-style: italic;
}

.lp-final-callout {
  width: 80%;
  margin: 0 auto;
}


.tbt30-sadie-img {
  width: 400px;
}

@media screen and (max-width: 1199px) {
  .sadie-main-button .btn-primary.sadie-lp-buy {
    padding: 16px 52px;
  }
}


@media screen and (max-width: 991px)  {
  .main-color .sadie-bottom-icon-holder {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
    
  .sadie-main-button .btn-primary.sadie-lp-buy {
    padding: 16px 70px;
  }
  
  .tbt30-sadie-img {
    width: 330px;
  }
}


@media screen and (max-width: 991px) and (min-width: 768px) {
  .sadie-main-button {
    float: left;
  }
  .sadie-main-button .btn-primary.sadie-lp-buy {
    margin-top: 18px;
  }
}

@media screen and (max-width: 767px) {
  
  .sadie-main-price, .sadie-main-button {
    width: 100%;
    text-align: center;
  }
  .sadie-main-button {
    margin-top: 12px;
  }
  .sadie-main-button .btn-primary.sadie-lp-buy {
    width: 100%;
  }
  
  .sadie-lp-title-section {
    padding-top: 16px;
    padding-bottom: 8px;
  }
  .sadie-lp-title-section h1 {
    font-size: 28px;
    line-height: 1.1em;
  }
  .sadie-lp-title-section h3 {
    font-size: 20px;
  }
  
  .sadie-lp-video-buy-section p {
    margin: 0.65em 0;
  }
  .sadie-lp-video-buy-section .wpb_raw_code {
    margin-bottom: 20px;
  }
  .sadie-lp-top-tagline {
    margin-bottom: 10px;
  }
  .sadie-lp-video-buy-section .vc_separator {
    margin-top: 0 !important;
  }
  
}


@media screen and (max-width: 699px) {
  .tbt30-sadie-img {
    width: 400px;
    display: block;
    margin: 0 auto !important;
    float: none !important;
  }
}







/* 
    Slide In Opt In
*/
#sadie_lead_form {
  background:#3c3c3c;
  color:#fff;
  background:rgba(60,60,60);
  height:275px;
  width:375px;
  position: fixed;
  bottom:20px;
  right:-395px;
  animation-duration:3s;
  animation-name:slideUp;
  animation-delay:2s;
  animation-fill-mode: forwards;
  z-index:-1;
  padding:10px;
  text-align: center;
  border: 1px solid #545454;
  border-radius: 4px;
}
@keyframes slideUp {
  from {
    right:-395px;
    opacity:0;
  }
  to {
    right:20px;
    z-index:1;
    opacity:1;
  }
}

#sadie_lead_form .customclose {
  cursor:pointer;
}
#sadie_lead_form .customclose:before, #sadie_lead_form .customclose:after {
  content:"";
  height:20px;
  width:20px;
  border-top:1px solid #000;
  position:absolute;
  top:16px;
  right:1px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#sadie_lead_form .customclose:before {
  right:15px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sadie_lead_form .customclose:hover {
  opacity: 0.3;
}

#sadie_lead_form h4 {
  font-weight: 600;
  letter-spacing: 0.5px;
}

#sadie_lead_form #mce-success-response {
  color: #F3C878 !important;
  text-align: center !important;
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#sadie_lead_form #mc_embed_signup .button {
  background-color: transparent;
  border: 2px solid #f3c878;
  color: #fff;
}
#sadie_lead_form #mc_embed_signup .button:hover {
  background-color: #f3c878;
  border: 2px solid #f3c878;
  color: #333;
}


#sadie_lead_form #mc_embed_signup .mc-field-group input::-webkit-input-placeholder {
  text-align: center;
}
#sadie_lead_form #mc_embed_signup .mc-field-group input:-moz-placeholder {
  text-align: center;
}
#sadie_lead_form #mc_embed_signup .mc-field-group input::-moz-placeholder {
  text-align: center;
}
#sadie_lead_form #mc_embed_signup .mc-field-group input:-ms-input-placeholder {
  text-align: center;
}



/* 
    Notification Bar
*/
#dabar {
  background: var(--brand-primary);
  color: #fff;
  font-size: 17px;
  line-height: 20px;
  top: 0;
  left: 0;
  width: 100% !important;
  padding: 14px 2px;
  text-align: center;
  position: static;
  z-index: 99999;
  height: 48px;
}

#dabar a {
  color: #fff; 
  text-decoration: underline;
  cursor: pointer;
}
#dabar a:hover {
  color: #eaeaea;
}



/* 
    Main Purchase Price / Button V2 w/ Add to Cart
*/

.sadie-main-purchase.purchase-v2 {
  text-align: center;
}

.sadie-main-purchase.purchase-v2 .sadie-main-price {
  float: none;
}

.sadie-main-purchase.purchase-v2 .sadie-main-price h2, .sadie-main-purchase.purchase-v2 .sadie-main-price h3 {
  display: inline-block;
}

.sadie-main-purchase.purchase-v2 .sadie-main-button {
  float: none;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  
  .sadie-main-purchase.purchase-v2 .sadie-main-price {
    margin-top: 20px;
  }
  
}



.rounded-video iframe {
  border: 1px solid transparent !important;
  border-radius: 20px;
}



/* 
    WooCommerce Blocks
*/

.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button, .wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
  background-color: var(--brand-primary);
  color: var(--light-white);
  font-size: 1.25em;
}
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover, .wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover {
  background-color: var(--brand-secondary);
  color: var(--light-white);
  text-decoration: none;
}

body.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button, .woocommerce-page .woocommerce .woocommerce-EditAccountForm a.button {
  background-color: var(--brand-primary);
  color: var(--light-white);
}
body.woocommerce-page .woocommerce .woocommerce-MyAccount-content a.button:hover, .woocommerce-page .woocommerce .woocommerce-EditAccountForm a.button:hover {
  background-color: var(--brand-secondary);
  color: var(--light-white);
}

/* 
    "Already have an account?" section of checkout
*/
.wc-block-checkout__contact-fields span.wc-block-components-checkout-step__heading-content {
  font-size: .9em;
}



/* 
    Landing Page 2023
*/

.y4l-teal-typography h1, .y4l-teal-typography h3 {
  color: var(--brand-secondary);
}

.y4l-teal-typography h2, .y4l-teal-typography h4, .y4l-teal-typography h5, .y4l-teal-typography h6 {
  color: var(--contrast);
}

.secondary-row-container h1, .secondary-row-container h2, .secondary-row-container h3, .secondary-row-container h4, .secondary-row-container h5, .secondary-row-container h6 {
  color: #ebe9e7;
}


/* 
    Floating Action Button
*/
a.yfl-floating-action-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  box-shadow: 2px 2px 3px #999;
  z-index: 999;
}


/* 
    Misc Block Styles
*/
.wp-block-details summary+* {
  margin-top: 0.5em;
}
.list-align-left li {
  text-align: left;
  margin-top: .25em;
}

.wp-block-details p {
  margin-bottom: 10px;
}

#wc-column-container .product {
  padding-bottom: 0;
}

@media screen and (max-width: 769px) {
  
  .wp-block-woocommerce-cart-cross-sells-block {
    display: none;
  }  
  
}



/* 
    Flux Checkout
*/
div.mfp-content form.woocommerce-form.woocommerce-form-login.login {
  padding: 1%;
  margin: 0 auto;
}

.flux-footer a.flux-step__back {
  display: none;
}

p#activecampaign_for_woocommerce_accepts_marketing_field {
  padding-left: 32px;
}

.woocommerce #payment .flux-footer #place_order {
  width: 80%;
  padding: 16px 60px;
  font-size: 135%;
}

.flux-checkout #payment .payment_methods li.wc_payment_method>input[type=radio]:first-child:checked+label {
  background-color: transparent;
}

.flux-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 2em;
}


/* 
    Reset Course Progress
*/
/* Add this CSS to your stylesheet */
.sadie-reset-course-btn {
    position: relative;
    animation: ease-out .3s linear;
    margin: 10px 20px;
    display: inline-block;
    padding: 2px 8px;
    background-color: #dcdcdc;
    border-radius: 4px;
}

.sadie-reset-course-btn:focus {
  text-decoration: none;
}

.sadie-reset-course-btn .yfl-checkmark,
.sadie-reset-course-btn .yfl-exclamation {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.sadie-reset-course-btn.loading,
.sadie-reset-course-btn.success,
.sadie-reset-course-btn.fail {
  padding-right: 30px;
}

.sadie-reset-course-btn.loading:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    right: 6px;
    top: 50%;
    width: 0px;
    height: 0px;
    margin-top: -2px;
    border: 2px solid rgba(255,255,255,0.5);
    border-left-color: #B9B9B9;
    border-top-color: #B9B9B9;
    animation: spin .6s infinite linear, grow .3s forwards ease-out;
}

.sadie-reset-course-btn.success .yfl-checkmark,
.sadie-reset-course-btn.fail .yfl-exclamation {
    display: inline-block;
}

@keyframes spin { 
    to {
        transform: rotate(359deg);
    }
}
@keyframes grow { 
    to {
        width: 14px;
        height: 14px;
        margin-top: -8px;
        right: 13px;
    }
}

.yfl-checkmark {
    color: rgb(97, 175, 97);
    font-size: 16px;
}

.yfl-exclamation {
    color: rgb(234, 198, 45);
    font-size: 16px;
}

/* Inline error note the reset script inserts after the button on failure. */
.yfl-reset-error {
    display: inline-block;
    font-size: 13px;
    font-style: italic;
    color: #b3541e;
}


/* 
    Spring Special Overrides
*/
@media screen and (min-width: 1400px) {
  
  .gb-container.spring-special-hero {
    padding: 11rem 40px;
  }
  
}


/* 
    Woo FunnelKit Overrides
*/
table#wfacp_mini_cart_reviews_wfacp_order_summary_widget {
  border-left: none;
  border-top: none;
}

table.shop_table.wfacp_order_sum.gutenberg.wfacp_mini_cart_items {
  border-left: none;
  border-top: none;
}

#funnelkitLoginAction {
  background-color: var(--brand-accent-lightest);
  color: var(--contrast);
}

.yfl-products-by-category ul.wc-block-product-template {
  margin-left: 0;
}

.yfl-products-by-category {
  
}

.yfl-child-no-mb > .wp-block-columns {
  margin-bottom: 0;
}



.yfl-price {
  font-weight: 500;
  font-size: 20px;
  color: var(--brand-accent);
}
.yfl-price.yfl-parent-price-color {
  color: unset;
}
.yfl-price .yfl-regular-price-dark {
  color: var(--contrast);
}

/* #wfacp-e-form .wfacp_main_form.woocommerce .wfacp-form-control-wrapper.woocommerce-invalid {
  margin-bottom: 0;
} */



/* 
    Black Friday
*/
.af-sale-ticker {
  position: sticky;
  top: 0;
  z-index: 9999;
  overflow: hidden;
  height: 36px;
  background: #000; /* black background */
  font: 700 15px/36px Roboto, system-ui, sans-serif;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.yfl-bf-page-header .af-sale-ticker {
  position: relative;
  top: -7px;
}

.af-sale-track {
  display: inline-block;
  padding-left: 100%;
  animation: af-marquee 14s linear infinite;
  will-change: transform;
  color: #b39a74; /* gold text always */
  text-decoration: none;
}

.af-sale-track span {
  display: inline-block;
  padding-right: 2em; /* even spacing between SALE words */
}

.af-sale-track:hover {
  color: #b39a74; /* no hover color change */
}

@keyframes af-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .af-sale-track { animation: none; }
}

.yfl-bg-border {
  border-bottom: 3px solid #222;
  background-color: var(--brand-secondary) !important;
}
.yfl-bg-border p {
  color: #222 !important;
  font-size: 20px;
  font-weight: 500;
}


/* .wp-block-generateblocks-pro-carousel-items > .wp-block-generateblocks-pro-carousel-item.wp-block, .gb-carousel > .gb-carousel-items > .gb-carousel-item {
  max-width: fit-content !important;
} */

.gb-carousel-item, .gb-carousel-items {
  height: fit-content !important;
}

/**
  * Age Fiercely Homepage
***/
/* Age Fiercely card polish: borders, hover lift, vertical balance, circular photos */
.af-card{
  border:1px solid var(--border-subtle);
  display:flex;
  flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.af-card.af-card--filled,
.af-card.af-card--filled:hover{ border-color:transparent; }
.af-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -22px rgba(66,75,90,.30);
  border-color: var(--brand-secondary-light);
}
/* push the CTA to the bottom so cards with differing content stay balanced */
.af-card-body{ flex:1 1 auto; }
.af-card-body > :last-child{ margin-top:auto; }
.af-pcard > :last-child{ margin-top:auto; }
/* Programs: GB drops the image dimensions, so the round photo renders as a
   full-width oval. Force a 92px circle with a soft gold ring. */
.af-photo{ flex:0 0 auto; }
.af-photo .gb-block-image{ width:92px; height:92px; margin:0; flex:0 0 auto; line-height:0; }
.af-photo img{
  width:92px; height:92px;
  object-fit:cover; object-position:center 32%;
  border-radius:50%;
  border:1px solid var(--brand-secondary-light);
  display:block;
}
/* Hero pills: equal width on desktop regardless of label length (Face/Body/Skincare).
   Left at natural width on mobile so three pills don't overflow a narrow row. */
@media (min-width:769px){
  .af-hero-actions .gb-button{ min-width:140px; }
}
/* Hero scrim: diagonal fade over the photo. Done in CSS (not GB's gradient
   feature) so the per-stop opacity survives a block-editor re-save. */
.af-hero{ position:relative; }
.af-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(105deg, rgba(38,44,56,0.82) 0%, rgba(38,44,56,0) 80%);
}
.af-hero > *{ position:relative; z-index:1; }
/* Ghost/outlined button (e.g. "Read Sadie's story"). Compound selectors beat
   GB's single-class .gb-button-xxxx rules so the outline + hover stick. */
.gb-button.af-ghost{
  background:transparent;
  color:var(--brand-primary);
  border:1px solid var(--brand-secondary-light);
}
.gb-button.af-ghost:hover{
  background:transparent;
  border-color:var(--brand-secondary-darker);
  color:var(--brand-secondary-darker);
}
/* Italic copy: GB drops typography.fontStyle on render, so italics ride a class. */
.gb-headline.af-italic{ font-style:italic; }
/* Founder pull-quote: italic + gold left border + balanced vertical padding
   (comp .founder .pullquote). GB can't express a per-side border on a headline. */
.gb-headline.af-pullquote{
  font-style:italic;
  border-left:2px solid var(--brand-secondary-darker);
  padding-top:22px; padding-bottom:22px;
}
/* Hero headline: clamp to the comp's responsive size and add the soft drop shadow.
   clamp() + text-shadow aren't expressible as GB block attributes. */
.af-hero h1{
  font-size:clamp(40px, 6.5vw, 84px);
  text-shadow:0 2px 24px rgba(0,0,0,0.25);
}
/* Card CTAs stretch full-width inside the card body, matching the comp where the
   button is a direct flex-column child (default align-items:stretch). */
.af-card-cta{ display:flex; }
.af-card-cta .gb-button{ flex:1 1 auto; }
/* Button transitions + hover shadows. GeneratePress only transitions color +
   background (0.1s, and NOT border-color), so the ghost border snaps while the
   text fades. Restore the comp's smooth, shadow-on-hover .btn treatment here. */
.gb-button.af-btn{
  transition: transform .25s ease, background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .25s ease;
}
.gb-button.af-btn--tan:hover{ box-shadow:0 8px 24px -10px rgba(154,130,96,.55); }
.gb-button.af-btn--bundle:hover{ box-shadow:0 8px 24px -10px rgba(66,75,90,.5); }
/* Buttons on the slate reviews band (.af-btn--gold). GenerateBlocks emits a
   per-button hover (a.gb-button-XXXX:hover{background:--brand-secondary-light;
   color:--brand-primary}) that muddies gold -> grey-tan with slate text — a
   weak, low-contrast shift on the slate band. Override with the comp's
   reviews-band pattern: lighten to gold-soft, near-black text for a strong
   contrast pop, gold glow, and a tactile lift. (specificity 0,3,0 beats GB's
   0,2,1; covers :focus so keyboard users get the same strong treatment.) */
/* Champagne — cream fill, gold text, thin gold hairline, lift */
.gb-button.af-btn--gold:hover,
.gb-button.af-btn--gold:focus{
  background-color:#FBF6EE;
  color:#9A8260;
  box-shadow:inset 0 0 0 1px rgba(154,130,96,.4), 0 12px 28px -14px rgba(14,18,24,.5);
  transform:translateY(-2px);
}
.gb-button.af-btn--white:hover{ box-shadow:0 10px 28px -10px rgba(0,0,0,.35); }
/* Hero pills hover to brick with a brick shadow (comp .hero-actions .btn--tan:hover),
   overriding the GB tan-deep hover via the higher-specificity scoped selector. */
.af-hero-actions .gb-button.af-btn--tan:hover{
  background-color: var(--brand-accent-brick);
  box-shadow:0 10px 28px -10px rgba(135,3,3,.5);
}


/*
    My Courses progress bar -- my-courses-redesign-20260823.md §5.3.
    Deliberately NOT page-scoped: .sadie-progress is only ever emitted by
    sadie_course_progress_bar(), which already scopes itself to the My Courses page.
    Scoping again on a body class would only add a second way for this to silently
    not apply.
*/
.sadie-progress {
    display: block;
    width: 100%;
    max-width: 340px;
    height: 8px;
    margin: 10px 0 4px;
    background-color: #e6e0d6;
    border-radius: 999px;
    overflow: hidden;
}

.sadie-progress__fill {
    display: block;
    height: 100%;
    background-color: #870303;
    border-radius: inherit;
    transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .sadie-progress__fill { transition: none; }
}

/* ==========================================================================
   My Courses card grid -- my-courses-redesign-20260823.md §5.5 / §5.6
   Scoped to .sadie-my-courses, a body class emitted by sadie_my_courses_body_class().
   NOT .page-my-course -- that class does not exist on this site; WordPress emits
   page-my-courses-3 (slug-derived) and page-id-9, neither of which is safe to key off.
   ========================================================================== */

/* Filter row: All / Active / Completed. Was a stacked block on mobile. */
.sadie-my-courses #user-course-status-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.sadie-my-courses #user-course-status-toggle a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #d8cfc0;
    border-radius: 999px;
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
    color: #6b5c47;
    background: transparent;
}

.sadie-my-courses #user-course-status-toggle a.active {
    background: #870303;
    border-color: #870303;
    color: #fff;
}

/* The grid itself. Sensei ships a legacy float grid (.course-container li { float:left })
   and a columns-N class; both are neutralised here rather than worked around. */
.sadie-my-courses .course-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sadie-my-courses .course-container > li.course {
    float: none;
    clear: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #e9e2d6;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Two wrapper sections sit between the card and its contents; make them pass height
   through so the CTA can pin to the bottom of the card. */
.sadie-my-courses .course-container > li.course > .course-content,
.sadie-my-courses .course-container .course-content > .entry {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.sadie-my-courses .course-container .course-content > .entry {
    padding: 0 0 16px;
}

/* Source order inside .entry is title -> meta -> [price] -> image -> [excerpt] -> CTA.
   Reorder visually rather than re-hooking the PHP. The image anchor is left at the
   default order:0 deliberately -- if :has() is ever unavailable it still lands first. */
.sadie-my-courses .entry > a:has(.sadie-course-thumb) { order: 1; }
.sadie-my-courses .entry > .course-title             { order: 2; }
.sadie-my-courses .entry > .sensei-course-meta       { order: 3; }
.sadie-my-courses .entry > .course-excerpt           { order: 4; }
.sadie-my-courses .entry > .sadie-course-cta         { order: 5; }
.sadie-my-courses .entry > .entry-actions             { order: 6; }

/* §5.9, added 2026-08-25. .entry-actions is Sensei's own per-card block: a "complete
   course" form on every card, plus a "View Certificate" button once the course is done.
   It is a child of .entry, so the reorder above left it at the default order:0 and it
   rendered ABOVE the thumbnail and title -- an empty 16px line box on every card, and a
   full certificate button at the top of the card for the 2,869 prod learners with a
   completed course (sensei-certificates 2.5.4 is active). order:6 puts it under the CTA.
   Found by rendering the real page for a real learner against a local DB replica; the
   staging fixture has no completed course, which is why it survived the staging pass.

   The form carries only hidden inputs when there is nothing to show, so the block is
   hidden unless it holds a real control -- otherwise every card keeps a 16px dead strip.
   :has() is already load-bearing in this file (the thumbnail order rule above). */
.sadie-my-courses .entry > .entry-actions {
    margin: 0 16px;
}

.sadie-my-courses .entry > .entry-actions:not(:has(a, button, input[type="submit"])) {
    display: none;
}

/* Thumbnail box -- one fixed shape whether the course has an image, borrows a lesson's,
   or has none at all. aspect-ratio keeps rows even even if an attachment was uploaded
   before the course_archive_thumbnail regeneration in §5.2. */
.sadie-my-courses .entry > a:has(.sadie-course-thumb) {
    display: block;
    margin: 0 0 14px;
    line-height: 0;
}

.sadie-my-courses .sadie-course-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4efe6;
}

.sadie-my-courses .sadie-course-thumb img {
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.sadie-my-courses .sadie-course-thumb--empty {
    background:
        repeating-linear-gradient(
            135deg,
            #f4efe6 0 14px,
            #efe7da 14px 28px
        );
}

/* Card typography. The stock title is a full-size serif heading, far too large in a
   280px card. */
.sadie-my-courses .entry > .course-title {
    margin: 0 16px 6px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.sadie-my-courses .entry > .course-title a { text-decoration: none; }

.sadie-my-courses .entry > .sensei-course-meta {
    margin: 0 16px 10px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6b5c47;
}

.sadie-my-courses .entry > .sensei-course-meta .course-lesson-count,
.sadie-my-courses .entry > .sensei-course-meta .course-lesson-progress {
    display: inline-block;
    margin-right: 10px;
}

.sadie-my-courses .entry > .course-excerpt {
    margin: 0 16px 14px;
    font-size: .875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA pinned to the bottom edge of the card so every card's button lines up. */
.sadie-my-courses .entry > .sadie-course-cta {
    margin: auto 16px 0;
    align-self: flex-start;
}

/* Reset Progress: demoted from a grey pill to a quiet text link, and it lives outside
   .entry as a direct child of the card (§5.4). */
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn {
    /* 4px block padding keeps the demoted text link at a >=24px tall hit target
       (WCAG 2.2 SC 2.5.8). As a standalone control it does not get the inline-text
       exception, and at padding:0 it measured 20px. */
    margin: 6px 16px 12px;
    padding: 4px 0;
    align-self: flex-start;
    background: none;
    border-radius: 0;
    font-size: .8125rem;
    color: #8a7c68;
    text-decoration: underline;
}

.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn:hover,
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn:focus {
    color: #870303;
}

/* Pagination. Sensei's nav renders flush against the last card row: prod's only
   pagination rules (style-overrides.css:550) leave margin-top at 0, which read as a
   fifth, broken card once the grid above gained real gaps and card borders.
   Scoped like the rest of this block, so /courses-overview/ keeps its old spacing.
   Seen by ~75 learners at 18 per page -- deliberately one declaration, not a redesign. */
.sadie-my-courses .sensei-pagination {
    margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Reset Progress feedback states -- my-courses-redesign-20260823.md §5.8.

   These states were styled for the grey pill this control used to be
   (style-overrides.css:1507-1560). Two of those rules stopped working when
   §5.4/§5.5 demoted it to a plain text link on a white card:

   1. `.sadie-reset-course-btn.loading { padding-right: 30px }` (0,2,0) reserved the
      strip the absolutely positioned spinner sits in. The demotion rule above sets
      `padding: 4px 0` at (0,4,1), so the shorthand wins and the reservation is gone
      -- the spinner renders on top of the "Resetting…" label. The spinner's final
      `right` comes from the `grow` keyframes and animations outrank normal
      declarations, so it cannot be moved; the strip has to be re-reserved instead.
   2. The spinner's track is rgba(255,255,255,.5), picked to read against #dcdcdc.
      On the white card it is white-on-white, and its #B9B9B9 arc is 2.1:1.
   -------------------------------------------------------------------------- */
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn.loading {
    padding-right: 30px;
}

.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn.loading:after {
    border-color: #d8cfc0;
    border-left-color: #870303;
    border-top-color: #870303;
}

/* The two outcome glyphs overlapped the label for the same reason. They come out of
   absolute positioning entirely rather than getting a reservation of their own, so
   nothing has to stay in sync with a keyframe and a button that has been used does
   not keep 30px of dead trailing space forever -- success/fail persist until the
   next attempt by design. Both are already display:inline-block when shown, which
   makes them atomic inlines, so the link's underline stops at the glyph. */
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn .yfl-checkmark,
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn .yfl-exclamation {
    position: static;
    transform: none;
    margin-left: 6px;
    font-size: 1em;
}

/* Each glyph is a non-text graphic carrying the outcome on its own, so it owes 3:1
   against the card (WCAG 1.4.11). The inherited pair fail that on white: the green is
   2.8:1 and the amber #eac62d is 1.6:1. These are 5.1:1 and 5.0:1, and the fail colour
   is the one .yfl-reset-error already uses for its sentence. */
.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn .yfl-checkmark {
    color: #2f7d32;
}

.sadie-my-courses .course-container > li.course > .sadie-reset-course-btn .yfl-exclamation {
    color: #b3541e;
}

/* The failure sentence is inserted after the button, which since §5.4 makes it a flex
   item of the card. `display:inline-block` blockifies there, so it stretched the full
   card width with none of the 16px gutter the rest of the card has, running into the
   rounded corner. Matched as a child of the card: if a stale page cache still has the
   button inside .sensei-course-meta the note lands there instead and keeps the old
   inline treatment, which is a worse but not broken result. */
.sadie-my-courses .course-container > li.course > .yfl-reset-error {
    margin: 0 16px 12px;
    font-size: .8125rem;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .sadie-my-courses .course-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ==========================================================================
   Public course archive card grid -- /courses-overview/
   my-courses-redesign-20260823.md §5.10, added 2026-08-25.

   Companion to the §5.5 My Courses grid. Same card anatomy, three differences:
   a price block (ul.course-products) that My Courses never renders, a filter row
   with a sort control, and no progress bars.

   SCOPING. My Courses keys off the .sadie-my-courses body class. That is not
   available here: on this page the main query is rewritten from a page request
   into a course archive before body_class() runs, so is_page() is false and the
   emitted page-id- class names a post that does not exist (observed on prod and
   the local replica, 2026-08-25). Two anchors are used instead:

     .course-container > li.course.sadie-card   cards -- class stamped inside the
                                                loop via sensei_course_loop_content_class
     body:has(.course-container > li.sadie-card) page furniture outside the grid

   Both derive from the loop itself, where the course is unambiguous. :has() is
   already load-bearing in this file (the §5.5 thumbnail order rule).

   SPECIFICITY. Prod carries unscoped archive rules that these must outrank --
   .course-container li.course (0,2,1) at :534 and, worst,
   .course-container li.course p.course-excerpt (0,3,2) at :538, which also sets
   margin-top with !important. Hence the .course.sadie-card double class rather
   than the shorter .sadie-card: it buys a class without needing !important.
   ========================================================================== */

/* --- Filter row: pills left, sort right, one control bar. ----------------- */
body:has(.course-container > li.sadie-card) .sensei-archive-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
}

/* Source order is form-then-filters; show the pills first. */
body:has(.course-container > li.sadie-card) .sensei-archive-controls .sensei-course-filters { order: 1; }
body:has(.course-container > li.sadie-card) .sensei-archive-controls .sensei-ordering      { order: 2; margin: 0; }

body:has(.course-container > li.sadie-card) ul.sensei-course-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

body:has(.course-container > li.sadie-card) ul.sensei-course-filters li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}

/* Matches the §5.5 My Courses pills exactly -- same control, same page family. */
body:has(.course-container > li.sadie-card) ul.sensei-course-filters a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #d8cfc0;
    border-radius: 999px;
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
    color: #6b5c47;
    background: transparent;
}

body:has(.course-container > li.sadie-card) ul.sensei-course-filters a.active {
    background: #870303;
    border-color: #870303;
    color: #fff;
}

body:has(.course-container > li.sadie-card) .sensei-ordering select.orderby {
    padding: 5px 10px;
    border: 1px solid #d8cfc0;
    border-radius: 6px;
    font-size: .875rem;
    color: #6b5c47;
    background: #fff;
}

/* --- The grid. Neutralises Sensei's legacy float/columns-N layout. -------- */
.course-container:has(> li.sadie-card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-container > li.course.sadie-card {
    float: none;
    clear: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #e9e2d6;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* :987 removes the bottom border on the last child of the old stacked list. */
.course-container > li.course.sadie-card:last-child {
    border-bottom: 1px solid #e9e2d6;
}

/* Pass height through the two wrapper sections so the CTA can pin to the bottom. */
.course-container > li.course.sadie-card > .course-content,
.course-container > li.course.sadie-card .course-content > .entry {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.course-container > li.course.sadie-card .course-content > .entry {
    padding: 0 0 16px;
}

/* --- Source order is title -> meta -> price -> image -> [excerpt] -> CTA. --
   Every direct child of .entry needs an order. An unassigned one defaults to 0
   and renders ABOVE the thumbnail -- that is exactly how "View Certificate"
   ended up above the card title on My Courses (§5.9). ul.course-products is the
   one this page adds, so it is assigned explicitly rather than left to default.

   The full census, measured against the rendered page rather than read off the
   template (2026-08-25): a:has(.sadie-course-thumb), .course-title,
   .sensei-course-meta, ul.course-products, p.course-excerpt, p.sensei-free-lessons,
   a.sadie-course-cta -- plus .entry-actions when logged in. p.sensei-free-lessons
   ("Preview this course - (2 preview lessons)", on 4 of 12 cards) was the one missed
   on the first pass, and it duly rendered above the thumbnail. It cannot appear on
   My Courses -- Sensei only emits it for courses the viewer is not enrolled in. */
.course-container > li.course.sadie-card .entry > a:has(.sadie-course-thumb) { order: 1; }
.course-container > li.course.sadie-card .entry > .course-title              { order: 2; }
.course-container > li.course.sadie-card .entry > .sensei-course-meta        { order: 3; }
.course-container > li.course.sadie-card .entry > .course-products           { order: 4; }
.course-container > li.course.sadie-card .entry > .course-excerpt            { order: 5; }
.course-container > li.course.sadie-card .entry > .sensei-free-lessons       { order: 6; }
.course-container > li.course.sadie-card .entry > .sadie-course-cta          { order: 7; }
.course-container > li.course.sadie-card .entry > .entry-actions             { order: 8; }

/* Sensei emits ul.course-products on every card, empty when the course has no
   product. Empty, it is still a flex item and still reserves a line box -- the
   same 16px dead strip .entry-actions left on My Courses. Hide it unless it has
   a row. */
.course-container > li.course.sadie-card .entry > ul.course-products:not(:has(li)) {
    display: none;
}

.course-container > li.course.sadie-card .entry > .entry-actions:not(:has(a, button, input[type="submit"])) {
    display: none;
}

/* --- Thumbnail: one fixed shape, image or striped fallback tile. ---------- */
.course-container > li.course.sadie-card .entry > a:has(.sadie-course-thumb) {
    display: block;
    margin: 0 0 14px;
    line-height: 0;
}

.course-container > li.course.sadie-card .sadie-course-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4efe6;
}

/* Sensei ships the archive image with class="woo-image thumbnail alignleft",
   so the float has to come off explicitly here -- My Courses never had it. */
.course-container > li.course.sadie-card .sadie-course-thumb img {
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    max-height: none;
    object-fit: cover;
}

.course-container > li.course.sadie-card .sadie-course-thumb--empty {
    background:
        repeating-linear-gradient(
            135deg,
            #f4efe6 0 14px,
            #efe7da 14px 28px
        );
}

/* --- Card typography. ---------------------------------------------------- */
.course-container > li.course.sadie-card .entry > .course-title {
    margin: 0 16px 6px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.course-container > li.course.sadie-card .entry > .course-title a { text-decoration: none; }

.course-container > li.course.sadie-card .entry > .sensei-course-meta {
    margin: 0 16px 10px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6b5c47;
}

.course-container > li.course.sadie-card .entry > .sensei-course-meta .course-lesson-count {
    display: inline-block;
    margin-right: 10px;
}

/* Price. Sensei renders "<title> - <price>"; the title repeats the card heading,
   so only the amount is shown. */
.course-container > li.course.sadie-card .entry > ul.course-products {
    margin: 0 16px 10px;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    line-height: 1.4;
    color: #4a4034;
}

.course-container > li.course.sadie-card .entry > ul.course-products li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}

/* Sensei renders "<product title> - <price>" with the separator as a bare text node
   between two spans. Hiding the title alone leaves a stray "- $47.00". A text node
   cannot be selected, so the row is zeroed and only the price is given a size back. */
.course-container > li.course.sadie-card .entry > ul.course-products li.course-product {
    font-size: 0;
}

.course-container > li.course.sadie-card .entry > ul.course-products .course-product-title {
    display: none;
}

.course-container > li.course.sadie-card .entry > ul.course-products .course-product-price {
    font-size: .9375rem;
    font-weight: 600;
}

/* Outranks .course-container li.course p.course-excerpt (0,3,2) at :538, which
   sets margin-right: 2rem and would otherwise break the 16px gutter. */
.course-container > li.course.sadie-card .entry > p.course-excerpt {
    margin: 0 16px 14px;
    font-size: .875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Preview this course - (2 preview lessons)". Sits just above the CTA. */
.course-container > li.course.sadie-card .entry > p.sensei-free-lessons {
    margin: 0 16px 10px;
    font-size: .8125rem;
    line-height: 1.45;
    color: #6b5c47;
}

/* --- CTA pinned to the card's bottom edge so buttons line up across a row. - */
.course-container > li.course.sadie-card .entry > .sadie-course-cta {
    margin: auto 16px 0;
    align-self: flex-start;
}

/* --- Reset Progress. An enrolled student browsing this archive gets the link
   here too: the shortcode is gated on enrolment, not on the page. Since §5.4 it
   is a direct child of the card, so without these it renders as prod's old grey
   pill, full-bleed against the card's rounded corner. Mirrors §5.5/§5.8. ----- */
.course-container > li.course.sadie-card > .sadie-reset-course-btn {
    margin: 6px 16px 12px;
    padding: 4px 0;
    align-self: flex-start;
    background: none;
    border-radius: 0;
    font-size: .8125rem;
    color: #8a7c68;
    text-decoration: underline;
}

.course-container > li.course.sadie-card > .sadie-reset-course-btn:hover,
.course-container > li.course.sadie-card > .sadie-reset-course-btn:focus {
    color: #870303;
}

/* Re-reserve the strip the spinner sits in; its final `right` comes from the
   `grow` keyframes and animations outrank normal declarations, so it cannot be
   moved -- see §5.8. */
.course-container > li.course.sadie-card > .sadie-reset-course-btn.loading {
    padding-right: 30px;
}

.course-container > li.course.sadie-card > .sadie-reset-course-btn.loading:after {
    border-color: #d8cfc0;
    border-left-color: #870303;
    border-top-color: #870303;
}

.course-container > li.course.sadie-card > .sadie-reset-course-btn .yfl-checkmark,
.course-container > li.course.sadie-card > .sadie-reset-course-btn .yfl-exclamation {
    position: static;
    transform: none;
    margin-left: 6px;
    font-size: 1em;
}

.course-container > li.course.sadie-card > .sadie-reset-course-btn .yfl-checkmark   { color: #2f7d32; }
.course-container > li.course.sadie-card > .sadie-reset-course-btn .yfl-exclamation { color: #b3541e; }

.course-container > li.course.sadie-card > .yfl-reset-error {
    margin: 0 16px 12px;
    font-size: .8125rem;
    line-height: 1.45;
}

/* --- Pagination. Prod's rules (:550, :554) leave margin-top at 0, which reads
   as a broken extra card row once the grid above has real gaps and borders. --- */
body:has(.course-container > li.sadie-card) .sensei-pagination {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .course-container:has(> li.sadie-card) {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body:has(.course-container > li.sadie-card) .sensei-archive-controls {
        justify-content: flex-start;
    }
}