:root {
  --color-primary: #111827;
  --color-primary-hover: #1f2937;
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-surface: #f9fafb;
  --color-background: #ffffff;
  --color-border: #e5e7eb;
  --font-heading: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

:root {
  --color-primary: #1b4b66;
  --color-primary-hover: #163c52;
  --color-secondary: #2dd4bf;
  --color-secondary-hover: #20b8a5;
  --color-accent: #2dd4bf;
  --color-accent-hover: #20b8a5;
  --color-text: #1f2937;
  --color-surface: #f7faf9;
  --font-heading: Poppins, system-ui, sans-serif;
}

/* Custom CSS for Vital Approved Training
 * Add your custom styles here.
 * Theme tokens are available as CSS variables within .wpc-theme-vital_training scope:
 *   - var(--color-primary), var(--color-secondary), var(--color-text), etc.
 *   - var(--font-heading), var(--font-body)
 *   - var(--space-sm), var(--space-md), var(--space-lg), etc.
 *   - var(--radius-sm), var(--radius-md), var(--radius-lg)
 * Use the short format above — they resolve inside the theme scope automatically.
 */

/* ==========================================================================
   WooCommerce reskin — Shop, Basket, Checkout, My Account
   CSS-only theming (no template overrides) so cart/checkout functionality,
   AJAX, and payment gateways are left completely untouched.
   ========================================================================== */

/* Buttons — add to cart, view product, checkout, place order, pay, etc. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce .w-btn,
.w-btn-wrapper .add_to_cart_button {
  background: var(--color-primary) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .w-btn:hover,
.w-btn-wrapper .add_to_cart_button:hover {
  background: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

/* Shop product grid (theme grid builder cards) */
.layout_shop_modern .w-grid-item-h,
.w-grid-item-h {
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-body) !important;
}

.usg_post_title_1,
.woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

.usg_post_title_1 a {
  color: var(--color-text) !important;
}

.woocommerce-Price-amount,
.usg_product_field_3 {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.star-rating span::before {
  color: var(--color-secondary) !important;
}

.onsale {
  background: var(--color-secondary) !important;
  color: #ffffff !important;
}

/* Shop filter / order sidebar */
.w-filter-list-title,
.w-filter-item-title {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

.w-filter-item-value-label {
  color: var(--color-text-muted) !important;
  font-family: var(--font-body) !important;
}

/* Cart table */
.woocommerce table.shop_table {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
}

.woocommerce table.shop_table th {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--color-border) !important;
}

.woocommerce td.product-name a,
.woocommerce .product-name a {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

.woocommerce .cart-subtotal .amount,
.woocommerce .order-total .amount {
  color: var(--color-primary) !important;
}

/* Cart / checkout coupon + quantity inputs */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart .coupon .input-text {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

.woocommerce .quantity .qty:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}

/* Checkout headings + review order */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

.woocommerce-checkout-review-order-table {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-message {
  border-top-color: var(--color-primary) !important;
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-message::before {
  color: var(--color-primary) !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

/* My account */
.woocommerce-MyAccount-navigation ul {
  font-family: var(--font-body) !important;
}

.woocommerce-MyAccount-navigation-link a {
  color: var(--color-text) !important;
}

.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

.woocommerce-MyAccount-content table.shop_table th {
  background: var(--color-surface) !important;
}

.woocommerce a:not(.button) {
  color: var(--color-primary);
}

.woocommerce a:not(.button):hover {
  color: var(--color-primary-hover);
}