/* wc-native.css — bridges WooCommerce's own native markup (ordering dropdown,
   pagination, gateway list) that has no equivalent in the static build, using
   the same design tokens. Never touches any of the copied static CSS files. */

/* Standard accessible-hiding utility — visible to screen readers, not
   visually. Used for the cart's hidden update_cart submit button (the
   design has no visible "Update cart" button; the qty stepper triggers it
   via JS instead — see quantity-stepper.js) and coupon-field labels. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Checkout ------------------------------------------------------------- */

/* review-order.php is untouched (not one of the six overrides — its outer
   <table class="woocommerce-checkout-review-order-table"> class is what
   checkout.js's AJAX fragment replacement targets by exact selector after
   every shipping-method change, so copying the template would mean either
   keeping that exact class anyway or re-implementing the fragment wiring
   ourselves). Restyled as flex rows instead of a table. */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-checkout-review-order-table thead {
  display: none;
}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
  display: block;
}
.woocommerce-checkout-review-order-table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-8);
  font-size: var(--fs-base);
  color: var(--color-text);
}
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  display: block;
  border: none;
  padding: 0;
  font-weight: var(--fw-regular);
  text-align: start;
}
.woocommerce-checkout-review-order-table tr.order-total {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-16);
  border-block-start: var(--border-width) solid var(--color-border);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  font-weight: inherit;
  color: inherit;
}

/* Payment gateway list — checkout/payment.php + payment-method.php are
   untouched (the live gateway list is the entire point — see
   MIGRATION_PLAN.md §3 #10); only restyled to match .payment-option. */
.wc_payment_methods {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.wc_payment_method > input.input-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--color-text);
  cursor: pointer;
}
.wc_payment_method > label img {
  height: var(--space-20);
  width: auto;
  margin-inline-start: var(--space-4);
}
.payment_box {
  margin-top: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.place-order {
  margin-top: var(--space-16);
}
.place-order #place_order {
  display: flex;
  width: 100%;
  height: var(--space-58);
  align-items: center;
  justify-content: center;
  background-color: var(--color-gradient-end);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.place-order #place_order:hover {
  background-color: var(--color-primary-darkest);
}

/* woocommerce_product_loop_start()/_end() always wrap the product loop in
   <ul class="products">, which none of the copied CSS styles (dequeued in
   Phase 2). Left alone that <ul> is a plain block box sitting between
   .grid-products (the CSS Grid container) and the .product-card <article>s,
   so grid-template-columns never reaches the cards — invisible with one
   product per category (Phase 3's test data), real with more than one.
   display:contents removes the <ul>'s own box while keeping the DOM node,
   so the cards become direct grid items again. Scoped to `ul.products`
   (not bare `.products`) because WC core's related.php also puts the
   literal class "products" on its outer <section class="related products">
   — a bare `.products` selector matched that too, silently zeroing out
   its own margin-top/padding-block (display:contents has no box, so no
   margin/padding/background renders on the element carrying it). */
ul.products {
  display: contents;
}

.woocommerce-ordering {
  margin-inline-start: auto;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 200px;
}

.woocommerce-ordering .orderby {
  width: 100%;
  max-width: 100%;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-12);
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-block: var(--space-40);
}

.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.woocommerce-pagination .page-numbers li a.page-numbers,
.woocommerce-pagination .page-numbers li span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-32);
  height: var(--space-32);
  padding-inline: var(--space-12);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.woocommerce-pagination .page-numbers li span.page-numbers.current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* Single product page ------------------------------------------------- */

/* the_content() output inside .product-description__text — the design's
   product-description.css only styles the specific classes .product-
   description__features/__feature, which nothing injects into editor HTML.
   Bridging the generic tags it actually produces to the same tokens keeps
   product-meta.php from having to mutate trusted admin content. */
.product-description__text p {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  text-align: start;
}
.product-description__text ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-20);
  list-style: none;
}
.product-description__text li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-align: start;
}
.product-description__text li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--color-success);
  flex-shrink: 0;
  line-height: 1;
}

/* Related products (single-product page) — core related.php is untouched;
   only the heading text and the loop <ul> class are filterable (see
   inc/single-product.php), so the wrapper <section>/<h2> are bridged here. */
.related.products {
  padding-block: var(--section-y);
  margin-top: var(--space-48);
}
.related.products > h2 {
  text-align: center;
  color: var(--color-heading-alt);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-32);
}
@media (min-width: 768px) {
  .related.products > h2 {
    font-size: var(--fs-title-md);
    margin-bottom: var(--space-40);
  }
}