/* mct-icon.css 
icon only, custom svg*/

/* .mct-icon div:has(>.wp-block-woocommerce-mini-cart) {
  margin-right: 16px;
} */

.mct-icon .wp-block-woocommerce-mini-cart {

  z-index: 1;
  height: 3rem;
  width: 3rem;
}

.mct-icon .wc-block-mini-cart button{
    width: 100%;
    height: 100%;
}

.mct-icon .wp-block-woocommerce-mini-cart svg {
  display: none !important;
}

.mct-icon .wc-block-mini-cart__quantity-badge span{
    transform: translate(20px, -10px);
    color: var(--contrast-none) !important;
    background-color: var(--contrast-lg) !important;
    
}

 @media (min-width: 1023.1px){
  /* to align with 10px padding in the left of each <a> */
  /* 8px on the left of svg due to 14px width and 30px button. On the left is 10px, so you would get 2px extra needed.
  the badge is 16.25px width, move to right for 10px, giving it a 6.25px extra to the right. 
  so to keep both side consistent, the margin would be 2px plus 6.25px, covering the badge extra width as well.*/
/*   .wp-block-group:has(> .wc-block-mini-cart) {
  margin-right: 8.25px !important; 
} */

/* 8px padding x-axis on the svg, plus custom svg width */
/*     .header-basic .wc-block-mini-cart {  
    width: 30px !important;   
  }

.header-basic .wc-block-mini-cart__quantity-badge span{
    transform: translate(10px, -10px);    
} */
}