/* ==== Woo Product Field Styles ==== */
.yeekit-woo-product-field {
  width: 100%;
  margin: 12px 0;
}
.yeekit-woo-product-field .select2-search__field {
  border: none !important;
}
.yeekit-woo-product-field .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  margin: 5px 5px 0px 5px !important;
}
.yeekit-woo-product-field .select2-selection__rendered {
  display: block !important;
}
.yeekit-woo-product-field .select2-container--default .select2-search--inline .select2-search__field {
  padding: 5px !important;
  margin: 0px !important;
}
.yeekit-woo-product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.yeekit-woo-product-list li {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.25s ease;
  overflow: hidden;
}
.yeekit-woo-product-list li:hover ,.yeekit-woo-product-list li.active{
  border-color: #2271b1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.yeekit-woo-product-list li.selected {
  border-color: #2271b1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.yeekit-woo-product-list label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  height: 100%;
  position: relative;
}
.yeekit-woo-product-list input[type="radio"],
.yeekit-woo-product-list input[type="checkbox"] {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  accent-color: #2271b1;
  /* màu chủ đạo giống WooCommerce */
  transform: scale(1.1);
  z-index: 2;
}
.yeekit-woo-product-list img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #f5f5f5;
}
.yeekit-woo-product-name {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.yeekit-woo-product-price {
  color: #2271b1;
  font-size: 14px;
}
.yeekit-woo-product-list li.selected,
.yeekit-woo-product-list input:checked+img,
.yeekit-woo-product-list input:checked~.yeekit-woo-product-name {
  border-color: #2271b1;
}
@media (max-width: 1024px) {
  .yeekit-woo-product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .yeekit-woo-product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile nhỏ (1 sản phẩm mỗi hàng) */
@media (max-width: 480px) {
  .yeekit-woo-product-list {
    grid-template-columns: repeat(1, 1fr);
  }
}