.elementor-2111 .elementor-element.elementor-element-1c548a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-2111 .elementor-element.elementor-element-04a316f{text-align:center;}.elementor-2111 .elementor-element.elementor-element-04a316f .elementor-heading-title{font-family:"Impact", Sans-serif;font-size:52px;}.elementor-2111 .elementor-element.elementor-element-e5f0eac{--display:flex;--padding-top:0px;--padding-bottom:80px;--padding-left:32px;--padding-right:032px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-2111 .elementor-element.elementor-element-04a316f .elementor-heading-title{font-size:38px;}}/* Start custom CSS for shortcode, class: .elementor-element-ecc697e *//* --------- 1) One centered container (prevents right-shift) --------- */
.woocommerce-account .woocommerce{
  max-width: 1200px;        /* adjust if you want wider/narrower */
  margin: 0 auto;
  padding: 0 16px;          /* page gutters */
  background: transparent;
}

/* Nav + content take full row inside container (no leftover sidebar space) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content{
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box;
}

/* --------- 2) Nav bar: smooth mobile scroll + red underline (no layout jank) --------- */
/* My Account nav: add breathing room below the tabs */
.woocommerce-account .woocommerce-MyAccount-navigation{
  margin-bottom: 20px !important;
}

.woocommerce-MyAccount-navigation ul{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  align-items: center;
  justify-content: center;             /* centered tabs */
  border-bottom: 1px solid #1f1f1f;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

/* Items don’t stretch; snap nicely */
.woocommerce-MyAccount-navigation li{
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

/* Pills to match the grid */
.woocommerce-MyAccount-navigation li a{
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

/* Underline via ::after (no height shift) */
.woocommerce-MyAccount-navigation li a::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px; background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease, background .18s ease;
}

.woocommerce-MyAccount-navigation li a:hover::after,
.woocommerce-MyAccount-navigation li a:focus::after{
  background: #9e9e9e; transform: scaleX(1);
}

.woocommerce-MyAccount-navigation li.is-active a::after{
  background: #e11d2e; transform: scaleX(1); /* brand red */
}

/* Mobile padding tweak */
@media (max-width: 480px){
  .woocommerce-MyAccount-navigation li a{ padding: 10px 12px; }
}

/* --------- 3) Keep course titles white to match grid --------- */
.ld-course-title,
.woocommerce-MyAccount-content .ldacc-title a,
.woocommerce-MyAccount-content .ldml-course-title a{
  color: #fff !important;
}
/* --- My Account tabs: mobile visibility fix --- */
@media (max-width: 768px){
  /* make sure no parent clips the scroller */
  .woocommerce-account .woocommerce-MyAccount-navigation{ overflow: visible !important; }

  /* show the actual ends, and left-align so the row doesn't get “balanced” off-screen */
  .woocommerce-MyAccount-navigation ul{
    justify-content: flex-start;              /* was center */
    -webkit-mask-image: none !important;      /* remove edge fade that hid last items */
            mask-image: none !important;
    padding-inline: 8px 24px;                 /* extra room on the right */
  }

  /* add a small spacer so the last pill isn't hard against the edge */
  .woocommerce-MyAccount-navigation ul::after{
    content: ""; flex: 0 0 16px;
  }
}

/* keep your existing hover/active styles; no changes needed *//* End custom CSS */
/* Start custom CSS */.afwc-affiliate-details-card-wrapper .afwc-affiliate-details-card {
    background-color: black !important;
}
#afwc_kpi_section_wrapper .afwc-kpi-row .afwc-kpi-box .afwc-kpi-number{
    color: white !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Impact';
	font-display: auto;
	src: url('https://hair-mastery.com/wp-content/uploads/2025/06/unicode.impact.ttf') format('truetype');
}
/* End Custom Fonts CSS */