/* ==========================================================
   JP CLOTHING & YOGA — WOOCOMMERCE EXTRA CSS
========================================================== */

/* Remove WooCommerce default styles we override */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { float: none; }

/* Star ratings */
.star-rating { color: var(--jp-teal); }
.woocommerce .star-rating span::before { color: var(--jp-teal); }

/* Product quantity input */
.quantity .qty {
  border: 1.5px solid var(--jp-sand) !important;
  border-radius: var(--jp-radius-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--jp-font-body) !important;
  font-size: 0.95rem !important;
  width: 72px !important;
  color: var(--jp-ink) !important;
  text-align: center !important;
}

/* Sale flash */
.woocommerce span.onsale {
  background: var(--jp-teal) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.8 !important;
  top: 12px !important;
  left: 12px !important;
}

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--jp-radius-sm);
  font-size: 0.85rem;
  color: var(--jp-text-mid);
  transition: all 0.2s;
  border-left: 2.5px solid transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  color: var(--jp-teal);
  border-left-color: var(--jp-teal);
  background: var(--jp-teal-pale);
}

/* Coupon */
.coupon input[type="text"] {
  border: 1.5px solid var(--jp-sand) !important;
  border-radius: var(--jp-radius-sm) !important;
  padding: 9px 14px !important;
  font-family: var(--jp-font-body) !important;
}

/* Order table */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jp-teal-dark);
  padding: 12px 16px;
  border-bottom: 2px solid var(--jp-sand);
  text-align: left;
}
.woocommerce-orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--jp-sand);
  font-size: 0.9rem;
}
.woocommerce-orders-table .button {
  padding: 6px 16px !important;
  font-size: 0.72rem !important;
}