/* =========================================================================
   JahSing 3 — WooCommerce storefront skin

   Loaded (via inc/woocommerce.php) only on shop / product / cart / checkout /
   my-account pages, after style.css. Maps WooCommerce's markup onto the Kanata
   AI design tokens and the components already defined in style.css
   (.btn, .card, .notice, .pill, .wrap …).

   Everything is scoped under .j3-wc (added to <body> by inc/woocommerce.php) or
   body.woocommerce so button/table resets never leak onto marketing pages.
   All colours are tokens, so the dark-mode overrides in style.css cascade for
   free — only the Stripe iframe and select2 need explicit dark tweaks (bottom).

   WooCommerce's own stylesheets are dequeued, so this file owns the whole
   surface. It assumes the CLASSIC (shortcode) cart / checkout / account pages;
   the block cart/checkout (.wc-block-*) is intentionally left unstyled.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Page shell

   Cart / Checkout / My Account are shortcode Pages rendered by page.php, which
   wraps content in `.wrap--narrow` + `.prose`. Widen those for the storefront.
   ---------------------------------------------------------------------- */
.j3-wc .wrap--narrow { max-width: var(--wrap); }
.j3-wc .prose { max-width: none; }

.j3-wc .woocommerce,
.j3-wc .woocommerce-page {
  color: var(--text);
}

.j3-wc .woocommerce h1,
.j3-wc .woocommerce h2,
.j3-wc .woocommerce h3 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.j3-wc .woocommerce-products-header__title,
.j3-wc .product_title {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  margin: 0 0 0.5em;
}

/* Breadcrumb — styled like the site's .eyebrow */
.j3-wc .woocommerce-breadcrumb,
.j3-wc .wc-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.j3-wc .woocommerce-breadcrumb a { color: var(--text-muted); }
.j3-wc .woocommerce-breadcrumb a:hover { color: var(--accent); }
.j3-wc .wc-breadcrumb__sep { opacity: 0.5; margin: 0 2px; }

/* Result count / ordering select on the shop archive */
.j3-wc .woocommerce-result-count {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 6px;
}
.j3-wc .woocommerce-ordering { margin-bottom: 24px; }

/* -------------------------------------------------------------------------
   Buttons — reuse the .btn system
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce a.button,
.j3-wc .woocommerce button.button,
.j3-wc .woocommerce input.button,
.j3-wc .woocommerce #respond input#submit,
.j3-wc .woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1rem;
  line-height: 1.2;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text-strong);
  border: 1.5px solid var(--surface-border);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
.j3-wc .woocommerce a.button:hover,
.j3-wc .woocommerce button.button:hover,
.j3-wc .woocommerce input.button:hover,
.j3-wc .woocommerce #respond input#submit:hover,
.j3-wc .woocommerce .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-strong);
}
.j3-wc .woocommerce a.button:active,
.j3-wc .woocommerce button.button:active,
.j3-wc .woocommerce input.button:active,
.j3-wc .woocommerce .button:active { transform: translateY(0); }

/* Primary / call-to-action buttons */
.j3-wc .woocommerce a.button.alt,
.j3-wc .woocommerce button.button.alt,
.j3-wc .woocommerce input.button.alt,
.j3-wc .woocommerce .single_add_to_cart_button,
.j3-wc .woocommerce .checkout-button,
.j3-wc .woocommerce #place_order,
.j3-wc .woocommerce-form-login__submit,
.j3-wc .woocommerce-form-register__submit,
.j3-wc .woocommerce-Button--next {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.j3-wc .woocommerce a.button.alt:hover,
.j3-wc .woocommerce button.button.alt:hover,
.j3-wc .woocommerce input.button.alt:hover,
.j3-wc .woocommerce .single_add_to_cart_button:hover,
.j3-wc .woocommerce .checkout-button:hover,
.j3-wc .woocommerce #place_order:hover,
.j3-wc .woocommerce-form-login__submit:hover,
.j3-wc .woocommerce-form-register__submit:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

/* Secondary buttons (View cart, Update cart, Return to shop) */
.j3-wc .woocommerce .wc-backward,
.j3-wc .woocommerce button[name="update_cart"],
.j3-wc .woocommerce .added_to_cart {
  background: transparent;
}

.j3-wc .woocommerce .button[disabled],
.j3-wc .woocommerce button.button:disabled,
.j3-wc .woocommerce button.button.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.3);
}

/* Full-width buttons where WooCommerce stacks them */
.j3-wc .woocommerce .single_add_to_cart_button,
.j3-wc .woocommerce .checkout-button,
.j3-wc .woocommerce #place_order,
.j3-wc .woocommerce-form-login__submit,
.j3-wc .woocommerce-form-register__submit {
  width: 100%;
}

/* -------------------------------------------------------------------------
   Store messages — reuse .notice
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce-message,
.j3-wc .woocommerce-info,
.j3-wc .woocommerce-error,
.j3-wc .woocommerce-noreviews,
.j3-wc .woocommerce-NoticeGroup > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--text-strong);
  font-size: 0.95rem;
  margin: 0 0 24px;
  list-style: none;
}
.j3-wc .woocommerce-message {
  background: color-mix(in srgb, var(--state-success) 12%, var(--bg-raised));
  border-color: color-mix(in srgb, var(--state-success) 30%, transparent);
  border-left-color: var(--state-success);
}
.j3-wc .woocommerce-info {
  background: color-mix(in srgb, var(--state-thinking) 14%, var(--bg-raised));
  border-color: color-mix(in srgb, var(--state-thinking) 32%, transparent);
  border-left-color: var(--state-thinking);
}
.j3-wc .woocommerce-error {
  border-left-color: var(--accent);
}
.j3-wc .woocommerce-message::before,
.j3-wc .woocommerce-info::before,
.j3-wc .woocommerce-error::before { display: none; }
.j3-wc .woocommerce-message .button,
.j3-wc .woocommerce-info .button {
  margin-left: auto;
  padding: 8px 18px;
  font-size: 0.9rem;
  background: transparent;
}
.j3-wc .woocommerce-error li { margin: 0; padding: 0; border: 0; }

/* -------------------------------------------------------------------------
   Prices
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce .price,
.j3-wc .woocommerce .amount,
.j3-wc .woocommerce-Price-amount {
  font-family: var(--font-mono);
  color: var(--text-strong);
  font-weight: 600;
}
.j3-wc .woocommerce .price del,
.j3-wc .woocommerce del .amount {
  color: var(--text-muted);
  font-weight: 400;
}
.j3-wc .woocommerce .price ins,
.j3-wc .woocommerce ins .amount {
  color: var(--accent);
  text-decoration: none;
}
.j3-wc .woocommerce-Price-currencySymbol { font-weight: 400; }
/* Subscription period suffix ("/ month") */
.j3-wc .woocommerce .subscription-details,
.j3-wc .woocommerce .subscription-price .period {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9em;
}

/* -------------------------------------------------------------------------
   Product grid (shop archive + [products] shortcode) — mirror .grid--3 / .card
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.j3-wc .woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: var(--bg-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: left;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}
.j3-wc .woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--surface-border));
}
/* Highlight the plan carrying a badge ("Best value" / on sale). */
.j3-wc .woocommerce ul.products li.product:has(span.onsale) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.j3-wc .woocommerce ul.products li.product a img {
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.j3-wc .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-strong);
  padding: 0;
  margin: 0 0 6px;
}
.j3-wc .woocommerce ul.products li.product .price {
  display: block;
  margin-bottom: 14px;
  font-size: 1rem;
}
.j3-wc .woocommerce ul.products li.product .button {
  margin-top: 4px;
}
.j3-wc .woocommerce span.onsale {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
}

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

/* -------------------------------------------------------------------------
   Single product
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.j3-wc .woocommerce div.product .woocommerce-product-gallery { margin: 0; }
.j3-wc .woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
}
.j3-wc .woocommerce div.product > .summary,
.j3-wc .woocommerce div.product .entry-summary { margin: 0; }
.j3-wc .woocommerce div.product p.price,
.j3-wc .woocommerce div.product span.price {
  font-size: 1.6rem;
  margin: 8px 0 18px;
}
.j3-wc .woocommerce div.product form.cart { margin: 20px 0; }
.j3-wc .woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-muted);
}
.j3-wc .woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 24px;
}
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  border-bottom: 1px solid var(--surface-border);
}
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display);
  color: var(--text-muted);
  padding: 10px 4px;
  margin-right: 20px;
}
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--text-strong);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.j3-wc .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

@media (max-width: 820px) {
  .j3-wc .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
}

/* -------------------------------------------------------------------------
   Forms & inputs
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.j3-wc .woocommerce form .form-row label {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-strong);
  font-size: 0.92rem;
  margin-bottom: 6px;
  display: block;
}
.j3-wc .woocommerce form .form-row .required { color: var(--accent); border: 0; }

.j3-wc .woocommerce input.input-text,
.j3-wc .woocommerce textarea,
.j3-wc .woocommerce select,
.j3-wc .woocommerce .select2-container--default .select2-selection--single,
.j3-wc .woocommerce .quantity input.qty {
  width: 100%;
  background: var(--bg-raised);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.j3-wc .woocommerce .select2-container--default .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}
.j3-wc .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  bottom: 0;
  height: auto;
  right: 10px;
}
.j3-wc .woocommerce input.input-text:focus,
.j3-wc .woocommerce textarea:focus,
.j3-wc .woocommerce select:focus,
.j3-wc .woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.j3-wc .woocommerce .quantity input.qty {
  width: 4.5rem;
  text-align: center;
  padding-inline: 8px;
}
.j3-wc .select2-dropdown {
  background: var(--bg-raised);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
}
.j3-wc .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Login / register / coupon / reset forms → .card */
.j3-wc .woocommerce .woocommerce-form-login,
.j3-wc .woocommerce .woocommerce-form-register,
.j3-wc .woocommerce .woocommerce-form-coupon,
.j3-wc .woocommerce .woocommerce-ResetPassword,
.j3-wc .woocommerce .woocommerce-EditAccountForm,
.j3-wc .woocommerce form.checkout_coupon,
.j3-wc .woocommerce form.lost_reset_password {
  background: var(--bg-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 26px;
  max-width: var(--wrap-narrow);
}
.j3-wc .woocommerce .woocommerce-form-login-nonce ~ p,
.j3-wc .woocommerce .form-row.woocommerce-form-login__rememberme { color: var(--text-muted); }
.j3-wc .woocommerce .woocommerce-form__label-for-checkbox input,
.j3-wc .woocommerce form .form-row input[type="checkbox"],
.j3-wc .woocommerce form .form-row input[type="radio"] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--accent);
}

/* Login prompt / coupon toggle bar */
.j3-wc .woocommerce-form-login-toggle .woocommerce-info,
.j3-wc .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--bg-sunken);
  border-color: var(--surface-border);
  border-left-color: var(--text-muted);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Tables — cart, order review, account orders
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  margin: 0 0 24px;
}
.j3-wc .woocommerce table.shop_table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
}
.j3-wc .woocommerce table.shop_table td,
.j3-wc .woocommerce table.shop_table th {
  padding: 14px 12px;
  border-top: 1px dashed var(--surface-border);
  vertical-align: middle;
  color: var(--text);
}
.j3-wc .woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
.j3-wc .woocommerce table.shop_table tfoot th,
.j3-wc .woocommerce table.shop_table tfoot td {
  border-top: 1px solid var(--surface-border);
  font-family: var(--font-body);
}
.j3-wc .woocommerce table.shop_table tfoot tr:last-child th,
.j3-wc .woocommerce table.shop_table tfoot tr:last-child td {
  color: var(--text-strong);
  font-weight: 650;
  font-size: 1.05rem;
}
.j3-wc .woocommerce table.shop_table .product-thumbnail img {
  width: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
}
.j3-wc .woocommerce table.shop_table a { color: var(--text-strong); }
.j3-wc .woocommerce table.shop_table a:hover { color: var(--accent); }
.j3-wc .woocommerce .product-remove a.remove {
  color: var(--text-muted) !important;
  font-size: 1.4rem;
  line-height: 1;
}
.j3-wc .woocommerce .product-remove a.remove:hover {
  color: var(--accent) !important;
  background: transparent;
}

/* Cart / checkout collaterals → .card */
.j3-wc .woocommerce .cart_totals,
.j3-wc .woocommerce-checkout #order_review,
.j3-wc .woocommerce .woocommerce-order-details,
.j3-wc .woocommerce .woocommerce-customer-details,
.j3-wc .woocommerce-account .woocommerce-Address address {
  background: var(--bg-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.j3-wc .woocommerce .cart_totals h2,
.j3-wc .woocommerce-checkout #order_review_heading {
  font-size: 1.2rem;
  margin: 0 0 14px;
}

.j3-wc .woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
.j3-wc .woocommerce .cart-collaterals .cart_totals { width: min(420px, 100%); }
.j3-wc .woocommerce form.woocommerce-cart-form { margin-bottom: 24px; }
.j3-wc .woocommerce .actions .coupon { display: flex; gap: 8px; }
.j3-wc .woocommerce .actions .coupon .input-text { width: 12rem; }

/* Checkout layout */
.j3-wc .woocommerce-checkout .col2-set,
.j3-wc .woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  float: none;
}
.j3-wc .woocommerce-checkout .col2-set .col-1,
.j3-wc .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.j3-wc .form-row-first, .j3-wc .form-row-last { width: 100%; float: none; }

/* Payment box → .section--sunken panel */
.j3-wc .woocommerce-checkout #payment,
.j3-wc .woocommerce #payment {
  background: var(--bg-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 4px 20px 20px;
}
.j3-wc .woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--surface-border);
  padding: 16px 0;
}
.j3-wc .woocommerce-checkout #payment div.payment_box {
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.j3-wc .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-raised); }
.j3-wc .woocommerce-checkout #payment .wc-terms-and-conditions { color: var(--text-muted); }
.j3-wc .woocommerce-checkout #payment .place-order { padding-top: 16px; }

/* -------------------------------------------------------------------------
   My Account
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.j3-wc .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.j3-wc .woocommerce-MyAccount-navigation ul li a {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--text);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.j3-wc .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bg-sunken);
  color: var(--text-strong);
}
.j3-wc .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent);
  color: var(--accent-ink);
}
.j3-wc .woocommerce-MyAccount-content {
  min-width: 0;
  color: var(--text);
}
.j3-wc .woocommerce-MyAccount-content a:not(.button) { color: var(--accent); }

@media (max-width: 760px) {
  .j3-wc .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .j3-wc .woocommerce-MyAccount-navigation ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: 6px;
  }
}

/* Order / subscription status pills */
.j3-wc .woocommerce mark.order-status,
.j3-wc .woocommerce .subscription-status {
  background: var(--bg-sunken);
  color: var(--text-strong);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.j3-wc .woocommerce mark.order-status.status-completed,
.j3-wc .woocommerce mark.order-status.status-active,
.j3-wc .woocommerce .subscription-status.active {
  background: color-mix(in srgb, var(--state-success) 18%, var(--bg-raised));
  color: color-mix(in srgb, var(--state-success) 75%, var(--text-strong));
}
.j3-wc .woocommerce mark.order-status.status-on-hold,
.j3-wc .woocommerce mark.order-status.status-pending,
.j3-wc .woocommerce .subscription-status.on-hold {
  background: color-mix(in srgb, var(--state-thinking) 20%, var(--bg-raised));
  color: color-mix(in srgb, var(--state-thinking) 80%, var(--text-strong));
}

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.j3-wc .woocommerce nav.woocommerce-pagination ul li { border: 0; }
.j3-wc .woocommerce nav.woocommerce-pagination ul li a,
.j3-wc .woocommerce nav.woocommerce-pagination ul li span {
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  color: var(--text);
  background: var(--bg-raised);
}
.j3-wc .woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   Star ratings (kept minimal — reviews are usually disabled on the Pro products)
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce .star-rating span::before,
.j3-wc .woocommerce p.stars a::before { color: var(--accent); }

/* -------------------------------------------------------------------------
   Loader — swap WooCommerce's spinner for the "stone settling" dots feel
   ---------------------------------------------------------------------- */
.j3-wc .woocommerce .blockUI.blockOverlay::before {
  border-color: var(--accent);
  border-top-color: transparent;
}

/* -------------------------------------------------------------------------
   Block cart/checkout — intentionally NOT styled. The store uses the classic
   shortcode pages; if someone swaps in the block cart/checkout these selectors
   would need their own token mapping.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Dark-mode: token cascade covers almost everything. Explicit fixes only for
   third-party iframes / widgets that don't inherit our vars.
   ---------------------------------------------------------------------- */
:root[data-theme="dark"] .j3-wc .woocommerce #payment div.payment_box,
:root[data-theme="dark"] .j3-wc .select2-dropdown {
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .j3-wc .woocommerce #add_payment_method #payment,
  :root:not([data-theme="light"]) .j3-wc .woocommerce-checkout #payment {
    background: var(--bg-sunken);
  }
}
/* The Stripe card element renders in its own iframe and can't read our vars —
   the plugin passes a dark-aware appearance config (see jahsing-shop). This
   just keeps the surrounding chrome consistent. */
.j3-wc .woocommerce .wc-stripe-elements-field,
.j3-wc .woocommerce .wc-stripe-iban-element-field {
  background: var(--bg-raised);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}