/*
 * WooCommerce Cart and Checkout blocks.
 *
 * The store's cart and checkout pages are block-based, not the classic
 * shortcodes, so they need their own pass rather than the shop_table rules.
 */

.woo-blocks {
  width: 100%;
  max-width: none;
}

.woo-blocks .wc-block-components-main,
.woo-blocks .wp-block-woocommerce-cart,
.woo-blocks .wp-block-woocommerce-checkout {
  max-width: none;
}

.woo-blocks .wc-block-cart,
.woo-blocks .wc-block-checkout {
  margin: 0;
}

html body .wc-block-components-title,
html body .wc-block-cart__totals-title,
html body .wc-block-components-totals-item__label,
html body .wc-block-components-checkout-step__title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--earth);
}

html body .wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

html body .wc-block-components-product-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}

html body .wc-block-cart-items__row {
  border-bottom: 1px solid var(--line);
}

html body .wc-block-cart-item__image img {
  border-radius: var(--r-sm);
  background: var(--surface);
}

html body .wc-block-components-sidebar,
html body .wc-block-cart__sidebar,
html body .wc-block-checkout__sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
}

html body .wc-block-components-panel,
html body .wc-block-components-totals-wrapper {
  border-color: var(--line);
}

html body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
}

html body .wc-block-components-button,
html body .wc-block-cart__submit-button,
html body .wc-block-components-checkout-place-order-button {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 17px 26px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

html body .wc-block-components-button:hover,
html body .wc-block-cart__submit-button:hover,
html body .wc-block-components-checkout-place-order-button:hover {
  background: var(--deep) !important;
  color: var(--cream) !important;
}

html body .wc-block-components-button__text {
  color: inherit;
}

html body .wc-block-components-text-input input[type="text"],
html body .wc-block-components-text-input input[type="email"],
html body .wc-block-components-text-input input[type="tel"],
html body .wc-block-components-text-input input[type="number"],
html body .wc-block-components-textarea,
html body .wc-blocks-components-select__select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-body);
}

html body .wc-block-components-text-input.is-active label,
html body .wc-block-components-text-input label {
  color: var(--muted);
  font-family: var(--font-body);
}

html body .wc-block-components-quantity-selector {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

html body .wc-block-components-quantity-selector__button {
  color: var(--earth);
}

html body .wc-block-components-sale-badge,
html body .wc-block-components-product-badge {
  background: var(--tint);
  border: 1px solid var(--tint-line);
  color: var(--earth);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
}

html body .wc-block-components-product-price__value {
  font-weight: 700;
  color: var(--ink);
}

html body .wc-block-components-product-price del,
html body .wc-block-components-product-price__regular {
  color: var(--faint);
}

html body .wc-block-components-notice-banner {
  border-radius: var(--r-sm);
  font-family: var(--font-body);
}

html body .wc-block-components-radio-control__option {
  font-family: var(--font-body);
}

html body .wc-block-checkout__terms a,
html body .wc-block-components-express-payment__title-text {
  color: var(--earth);
}