Adding custom styles to component - Shopify BuyButton.js SDK

[kiahr]

I am currently attempting to add custom styles to the Toggle and Cart components using the method outlined in the github docs, however none of the custom style attributes are working.

Example here: https://lia.w38.site/products/children-winter-cardigans-lilac

This is my whole javascript doc:

let App = function(productId = null, productPrice = null) {

  // Launch the shopify library
  if (window.ShopifyBuy && window.ShopifyBuy.UI) {
    ShopifyBuyInit();
  }

  // Initialize the buy button
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'domain.myshopify.com',
      storefrontAccessToken: 'XXXXXXXXXXXXX',
    });

    // Set up the button
    ShopifyBuy.UI.onReady(client).then(function(ui) {

      // Configurations
      var Config = {

        // Product button
        "product": {
          "iframe": false,
          "variantId": "all",
          "width": "auto",
          "contents": {
            "img": false,
            "imgWithCarousel": false,
            "title": false,
            "variantTitle": false,
            "price": true,
            "description": false,
            "buttonWithQuantity": false,
            "quantity": false
          },
          "text": {
            button: 'Add to Cart',
            outOfStock: 'Out of stock',
            unavailable: 'Unavailable',
          },
        },

        // Cart Config
        "cart": {
          "iframe": false,
          "popup": false,
          "contents": {
            "button": true,
            "img": false
          },
          "styles": {
            "button": {
               ":hover": {
               "background-color": "#a34e4e"
          },
           "background-color": "#b55757",
           ":focus": {
           "background-color": "#a34e4e"
          },
           "border-radius": "0px"
          }
       },
          "text": {
            "title": 'Carrito',
            "empty": 'Your cart is empty.',
            "button": 'Checkout',
            "total": 'Total',
            "notice": 'Shipping and discount codes are added at checkout.',
            "noteDescription": 'Special instructions for seller',
          }
        },

        // Cart toggle button
        "toggle": {

          // Don't use iframes
          "iframe": false,
          
          // Icon?
          "icon": false,
          
          //Count of items in cart
          "count": true,
          
          //Title
          "title": false,
          
          // What items do we need?
          "order": [
            'count',
            'title'
          ],
          
          "text": {
              "title": 'shopping cart',
          },
          
              "styles": {
               "toggle": {
                "background-color": "#b55757",
                ":hover": {
                "background-color": "#a34e4e"
                },
                ":focus": {
                "background-color": "#a34e4e"
            }
      }
    },

        },

        // Cart Product config
        "lineItem": {
          "contents": {
            "image": true
          },
        },
      };

      // set the button price

      if (productId !== null) {

        // Instantiate the components
        ui.createComponent('product', {

          id: [productId],
          node: document.getElementById('buy'),
          moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',

          // Components Options
          options: {
            "product": Config.product,
            "cart": Config.cart,
            "lineItem": Config.lineItem,
            "toggle": Config.toggle
          }
        });
      }
    });
  }
};

If anybody has any idea of what I might be doing wrong that would be super helpful.

Thank you!