/*
 * assets/css/woo-pages.css
 * Minimal compatibility rules for WooCommerce's OWN pages: single
 * product, cart, checkout, account. Layout, gallery, tabs, buttons and
 * forms all come from WooCommerce. This file only:
 *   1. keeps content clear of the theme's fixed header,
 *   2. makes WooCommerce's text readable on the theme's light and dark
 *      backgrounds, and
 *   3. keeps the page from ever being wider than the screen.
 */

.woo-wrap,
body.woocommerce-cart main.container,
body.woocommerce-checkout main.container,
body.woocommerce-account main.container {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 24px 64px;
  box-sizing: border-box;
  color: var(--color-text);
}

.woo-wrap img,
.woocommerce img {
  max-width: 100%;
  height: auto;
}

/* Links and headings follow the theme's text colour in light and dark mode */
.woo-wrap a:not(.button):not(.added_to_cart),
.woocommerce-cart main a:not(.button),
.woocommerce-checkout main a:not(.button) {
  color: inherit;
}

.woo-wrap h1,
.woo-wrap h2,
.woo-wrap h3,
.woo-wrap .product_title {
  color: var(--color-text);
}

/* Form fields keep WooCommerce's light look so typed text is always readable */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
  color: #1a1a1a;
  background-color: #ffffff;
}

/* Tables and tabs can scroll sideways on a phone instead of widening the page */
.woocommerce table.shop_table_responsive,
.woocommerce-tabs .panel {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .woo-wrap,
  body.woocommerce-cart main.container,
  body.woocommerce-checkout main.container,
  body.woocommerce-account main.container {
    padding: 104px 16px 48px;
  }
}