<header><span class="logo">E-com</span></header>
<section class="main">
  <section class="info">
    <h4>Shipping Address:</h4>
    <textarea class="shipping"></textarea>
    <button class="add-shipping">Add</button>
    <div class="payment">
      <h4>Payment:</h4>
      <div class="payment-method">
        <a
          ><img
            src="https://developers.google.com/pay/api/images/brand-guidelines/card-buy-button-black.svg"
        /></a>
        <a
          ><img
            src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-large.png"
        /></a>
        <a
          ><img
            src="https://m.media-amazon.com/images/G/01/EPSDocumentation/AmazonPay/Buttons/USbuttons/live-en_us-amazonpay-gold-medium-button_T2.png"
        /></a>
      </div>
    </div>
  </section>
  <section class="cart">
    <div class="cart-item">
      <img
        class="product-image"
        src="https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcSKkRaJUvrAHtaT7uKjG0kLSjZxZq5h4lwNjCgU-YBZeZtoyLbRang6WSpbjPp3olJGEll2JDG2jw&usqp=CAc"
      />
      <div class="product-main">
        <div class="flex">
          <h4>Lotus Orange T-shirt</h4>
          <span class="price">$27.00</span>
        </div>

        <div class="flex coupon">
          <input placeholder="Enter your coupon code" />
          <button class="apply">Apply</button>
        </div>
        <div class="flex total">
          <h5>Sub Total:</h5>
          <span class="price">$27.00</span>
        </div>
        <div class="flex">
          <h5>Total:</h5>
          <span class="price">$27.00</span>
        </div>
      </div>
    </div>
    <button class="checkout">Checkout</button>
  </section>
</section>

body {
  font-family: Verdana;
}

* {
  transition: background 1s, color 1s;
}

h5,
h4 {
  margin: 20px 0 10px;
}

header{
  font-size: 20px;
  padding: 20px 30px;
  border-bottom: 1px solid #efefef;
}

header .logo {
    color: var(--brandColor);
}

.main {
  display: flex;
  padding: 10px 30px;
  background: var(--bodyBackgroundColor);
}

.info {
  flex: 1;
  height: 100vh;
  width: 32%;
}

.cart {
  width: 60%;
  padding-left: 20px;
  flex: 1;
}

.shipping {
  border: 1px solid var(--brandColor);
  resize: none;
  width: 70%;
  height: 80px;
  border-radius: 4px;
}

.add-shipping {
  border-radius: 4px;
  padding: 10px 30px;
  border: 1px solid var(--brandColor);
  background: var(--brandColor);
  color: #fff;
  box-shadow: none;
  margin-top: 10px;
  display: block;
  vertical-align: top;
}

.payment {
  margin-top: 30px;
}

.payment-method {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.payment-method a {
  flex: 3;
  cursor: pointer;
  margin-bottom: 10px;
}

.payment-method img {
  max-width: 200px;
  display: inline-block;
}

.cart {
  text-align: center;
}

.cart-item {
  border: 1px solid var(--brandColor);
  min-height: 100px;
  display: flex;
  padding: 12px;
  border-radius: 4px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.product-image {
  max-width: 30%;
  margin-right: 20px;  
  margin-bottom: 10px;
}

.product-main {
  flex: 1;
  text-align: left;
}

.product-main h4 {
  margin: 0;
}

.flex {
  display: flex;
  align-items: center;
}

.price {
  flex: 1;
  text-align: right;
  margin-left: 4px;
}

.apply {
  border: 1px solid var(--secondaryColor);
  color: var(--secondaryColor);
  background: #fff;
  padding: 6px 4px;
  font-weight:bold;
}

.coupon {
  margin-top: 10px;
}

.coupon input {
  border: 1px solid var(--secondaryColor);
  border-right: 0px;
  height: 25px;
}

.checkout {
  border-radius: 4px;
  min-width: 300px;
  padding: 15px 30px;
  border: 1px solid #ddd;
  background: var(--brandColor);
  color: #fff;
  box-shadow: none;
  margin-top: 30px;
}

const getMerchantConfig = (merchantId) => {
  const merchantConfigs = [
    {
      id: 'merchant1',
      brandColor: '#800080',
      secondaryColor: '#FFA500',
      bodyBackgroundColor: '#F2E6F2',
    },
    {
      id: 'merchant2',
      brandColor: '#FF69B4',
      secondaryColor: '#808080',
      bodyBackgroundColor: '#FFF0F8',
    },
    {
      id: 'merchant3',
      brandColor: '#FF0000',
      secondaryColor: '#4B0082',
      bodyBackgroundColor: '#FFE6E6',
    },
  ];
  return new Promise((resolve, reject) => {
    const merchant = merchantConfigs.find((c) => c.id === merchantId);
    if (merchant) {
      resolve(merchant);
    } else {
      reject('Merchant not found');
    }
  });
};
const setTheme = async () => {
  const merchant = await getMerchantConfig('merchant1');
  const root = document.querySelector(':root');
  root.style.setProperty('--brandColor', merchant.brandColor);
  root.style.setProperty('--secondaryColor', merchant.secondaryColor);
  root.style.setProperty('--bodyBackgroundColor', merchant.bodyBackgroundColor);
};

setTheme();