/**
this file loads up after the frontend.css file, rules in this file will override the ones in frontend.css

eg: this will override the the rule in frontend.css
.item-data {
    width: 150px;
}
*/

.product-accessory-item {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 1fr;
  margin-bottom: 10px;
}

.item-data {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  width: 100%;
  align-items: center;
}

.product-accessory-item .item-select {
  padding-left: 10px;
}

.product-accessory-item .item-image {
  width: 75px;
}

@media (max-width: 600px) {

  .product-accessory-item {
    display: flex;
  }

  .item-data {
    display: block;
  }

  .product-accessory-item .item-image {
    width: unset;
  }

  .product-accessory-item .item-image img {
    max-width: 75%;
  }

  .product-accessory-item .item-data .item-price .woocommerce-Price-amount bdi {
    font-size: 24px;
  }
}