/* ==========================================================================
   Family Historian 8 theme — WooCommerce-specific styling.
   Only enqueued when the WooCommerce plugin is active (functions.php).
   ========================================================================== */

.woocommerce ul.products li.product .price {
  color: var(--wp--preset--color--navy);
  font-weight: 700;
}

.woocommerce span.onsale {
  background: var(--wp--preset--color--orange);
}

/* Product images are box-packaging shots, not square — WooCommerce's crop
   is disabled per image size in functions.php, so keep the box's actual
   proportions here instead of forcing a fill that would distort it. */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
  aspect-ratio: unset;
  object-fit: contain;
  height: auto;
  width: 100%;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background: var(--wp--preset--color--green);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  border: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background: #7ab332;
  color: #fff;
}

.woocommerce a.added_to_cart,
.woocommerce a.checkout-button {
  background: var(--wp--preset--color--orange);
}

.woocommerce a.added_to_cart:hover,
.woocommerce a.checkout-button:hover {
  background: #cc7420;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wp--preset--color--navy);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wp--preset--color--navy);
  color: #fff;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--wp--preset--color--green);
}

.woocommerce-error {
  border-top-color: var(--wp--preset--color--orange);
}

/* My Account — reclaim the extra width freed up by the page-my-account.html
   template override (wide post-content instead of the default narrow
   content column), and turn the nav from a floated bare link list into a
   set of vertical tabs alongside the content, matching the site's existing
   pill/active styling (see .fh8-tier-toggle). Scoped to .woocommerce-account
   so it doesn't affect the div.woocommerce wrapper used on shop/product
   pages elsewhere. */
.woocommerce-account .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 220px;
  flex: 0 0 220px;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  /* WooCommerce's core CSS puts 18px of bottom padding on each <li>, which
     stacks on top of the ul's own gap above — zero it out since spacing
     between tabs is handled by that gap instead. */
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--wp--preset--color--bg-alt);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--wp--preset--color--navy);
  color: #fff;
}

@media (max-width: 782px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    flex-basis: auto;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Single product: reviews are unused, so the tab nav would only repeat the
   "Description" heading inside the panel. Hide the nav while there is just
   one tab; it reappears if more tabs are ever added. */
.woocommerce-tabs ul.wc-tabs:has(> li:only-child) {
  display: none;
}

/* My Account > "Upgrade from FH5/6" licence form (rjt-8-from-5-6-licence.php).
   The plugin outputs an unstyled comment-form, so style it here. */
.woocommerce-MyAccount-content form.comment-form {
  max-width: 520px;
  margin-top: 1.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
}

.woocommerce-MyAccount-content form.comment-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}

.woocommerce-MyAccount-content form.comment-form p.form-row {
  margin: 0 0 1.1rem;
  padding: 0;
}

.woocommerce-MyAccount-content form.comment-form input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--wp--preset--color--navy);
  background: #fff;
  border: 1px solid #b8bdc9;
  border-radius: 6px;
}

.woocommerce-MyAccount-content form.comment-form input[type="text"]:focus {
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--green);
}

.woocommerce-MyAccount-content form.comment-form br {
  display: none;
}

.woocommerce-MyAccount-content form.comment-form input[type="submit"] {
  padding: 0.7rem 1.75rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--wp--preset--color--green);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.woocommerce-MyAccount-content form.comment-form input[type="submit"]:hover {
  background: #7ab332;
}

.woocommerce-MyAccount-content form.comment-form p[style] {
  margin: 1rem 0 0;
  padding: 0 !important;
  color: #b32d2e;
}

.woocommerce-MyAccount-content form.comment-form p[style]:empty {
  display: none;
}

/* Classic checkout: billing details on the left, order summary on the right
   (sticky) so the product, coupon and total are visible without scrolling
   past the whole address form. Narrow screens keep the default single column. */
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  .woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
    max-width: none;
  }

  .woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 1rem;
  }

  /* Pack the address fields two to a row instead of one per line. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    float: none;
    width: auto;
    margin-bottom: 0.9rem;
  }

  .woocommerce-checkout #billing_address_1_field,
  .woocommerce-checkout #billing_address_2_field,
  .woocommerce-checkout #billing_email_field,
  .woocommerce-checkout .woocommerce-account-fields,
  .woocommerce-checkout .create-account {
    grid-column: 1 / -1;
  }
}

/* Product Collection grids (related products, shop archive): items in a row
   are already the same height, but titles wrap to different line counts and
   some items have no price, so the buttons landed at different heights. Make
   each item a column and pin the button to the bottom so they line up. */
.wp-block-woocommerce-product-template > li {
  display: flex;
  flex-direction: column;
}

.wp-block-woocommerce-product-template > li .wc-block-components-product-button {
  margin-top: auto;
}