/* =WooCommerce Bootstrap Integration Styles
-------------------------------------------------------------- */

/* General product list grid */
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

ul.products li.product {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
}

/* Product Card */
.product-card .card-body {
  padding: 1rem;
}

.product-card .card-footer {
  padding: 0.75rem;
  display: flex;
  justify-content: center;
}

/* Images */
.product-card img {
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: .5rem;
}

/* Price */
.product-card .price {
  font-weight: 600;
  color: var(--bs-primary);
}

/* Add to Cart Button */
.product-card .button,
.product-card .add_to_cart_button {
  @apply btn btn-primary; /* tailwind if using, otherwise below line */
  display: inline-block;
  padding: .375rem .75rem;
  font-size: .875rem;
  border-radius: .25rem;
  background-color: var(--bs-primary);
  color: #fff;
  text-decoration: none;
}
.product-card .button:hover {
  background-color: var(--bs-primary-hover, #0b5ed7);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: .5rem;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: .375rem .75rem;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  display: inline-block;
  text-decoration: none;
}

/* Single Product Page */
.woocommerce div.product {
  margin-bottom: 3rem;
}
.woocommerce div.product div.images {
  margin-bottom: 1.5rem;
}
.woocommerce div.product .summary {
  padding-left: 1.5rem;
}
.woocommerce div.product .product_title {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
.woocommerce div.product .price {
  font-size: 1.25rem;
  color: var(--bs-primary);
  margin-bottom: 1rem;
}
.woocommerce div.product form.cart .button {
  background-color: var(--bs-primary);
  color: #fff;
  border-radius: .25rem;
  padding: .5rem 1rem;
}
.woocommerce div.product form.cart .button:hover {
  background-color: var(--bs-primary-hover, #0b5ed7);
}

/* Tabs */
.woocommerce-tabs {
  margin-top: 2rem;
}
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 1rem;
}
.woocommerce-tabs ul.tabs li {
  list-style: none;
}
.woocommerce-tabs ul.tabs li a {
  padding: .5rem 1rem;
  display: block;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: .25rem .25rem 0 0;
}
.woocommerce-tabs ul.tabs li.active a {
  border-color: #dee2e6 #dee2e6 #fff;
  background-color: #fff;
}

/* Cart Page */
.woocommerce-cart table.shop_table {
  width: 100%;
  margin-bottom: 2rem;
  border: 1px solid #dee2e6;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  padding: .75rem;
  border: 1px solid #dee2e6;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 1.25rem;
  margin-top: 1rem;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  @apply btn btn-success; /* or use below CSS */
  display: inline-block;
  padding: .5rem 1rem;
  background-color: #198754;
  color: #fff;
  border-radius: .25rem;
}

/* Checkout Page */
.woocommerce-checkout form.checkout .form-row {
  margin-bottom: 1rem;
}
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

/* Responsive tweaks */
@media (min-width: 768px) {
  ul.products li.product { width: calc(50% - 0.75rem); }
}
@media (min-width: 992px) {
  ul.products li.product { width: calc(25% - 0.75rem); }
}

.woocommerce-checkout form.checkout .form-row {
  margin-bottom: 1rem;
}
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}