.woocommerce .products ul,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.woocommerce ul.products li.product {
  margin: 0;
  width: auto;
}
.woocommerce ul.products li.product a img {
  margin: 0;
}
.woocommerce ul.products li.product .price {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}
.woocommerce ul.products li.product .button {
  margin-top: 8px;
}

.woocommerce div.product .product_title {
  font-size: 20px;
  font-weight: 700;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--accent);
  font-size: 28px;
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--accent);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 24px;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 14px;
  font-weight: 600;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  font-size: 14px;
  padding: 12px;
}

.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: 16px;
  font-weight: 600;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
  margin-bottom: 12px;
}

/* Fix WooCommerce button styling to match theme */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px;
  font-family: var(--font-main);
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent);
  color: #fff;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--accent-hover);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--accent);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--accent);
}

.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--accent);
}
.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--accent);
}

.woocommerce-notices-wrapper .woocommerce-error {
  background: #fef9f9;
  border-top-color: var(--accent);
}

@media (max-width: 900px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}