/* WooCommerce pages styled with the active theme's tokens (shop, product, cart, checkout, account). */

/* product grid (shop pages and the [products] shortcode in the templates) */
body.hat-on .woocommerce ul.products li.product,
body.hat-on ul.products li.product,
body.hat-on .wc-block-grid__product,
body.hat-on .wc-block-product {
  background: var(--hat-surface);
  border-radius: var(--hat-radius);
  box-shadow: var(--hat-panel-shadow);
  border: var(--hat-panel-border, 0);
  padding: 12px 12px 18px !important;
  text-align: center;
  box-sizing: border-box;
}
body.hat-on ul.products li.product img,
body.hat-on .wc-block-grid__product-image img { border-radius: calc(var(--hat-radius) * .6); background: var(--hat-stage); margin-bottom: 10px !important; }
body.hat-on ul.products li.product .woocommerce-loop-product__title,
body.hat-on .wc-block-grid__product-title,
body.hat-on .wc-block-components-product-name { font-family: var(--hat-display) !important; color: var(--hat-heading, var(--hat-ink)) !important; font-size: 1.05em !important; }
body.hat-on .price, body.hat-on .woocommerce-Price-amount, body.hat-on .wc-block-components-product-price { color: var(--hat-price, var(--hat-accent)) !important; font-family: var(--hat-display); font-weight: 700; }
body.hat-on del .woocommerce-Price-amount { color: var(--hat-muted) !important; font-weight: 400; }
body.hat-on span.onsale, body.hat-on .wc-block-components-product-sale-badge {
  background: var(--hat-kicker-bg, var(--hat-accent)) !important; color: var(--hat-kicker-ink, var(--hat-accent-ink)) !important;
  border-radius: var(--hat-pill, 99px) !important; font-family: var(--hat-display); min-height: 0; min-width: 0; line-height: 1; padding: 7px 10px !important; border: 0 !important;
}

/* all WooCommerce buttons */
body.hat-on .woocommerce a.button, body.hat-on .woocommerce button.button, body.hat-on .woocommerce input.button,
body.hat-on .woocommerce #respond input#submit, body.hat-on a.button.add_to_cart_button, body.hat-on .single_add_to_cart_button,
body.hat-on .checkout-button, body.hat-on #place_order, body.hat-on .wc-block-components-button:not(.is-link),
body.hat-on .wp-block-button__link.add_to_cart_button, body.hat-on .wc-block-grid__product-add-to-cart .wp-block-button__link {
  background: var(--hat-btn) !important; color: var(--hat-btn-ink) !important;
  border-radius: var(--hat-btn-radius, var(--hat-radius)) !important; font-family: var(--hat-display) !important; font-weight: 700 !important;
  box-shadow: var(--hat-btn-shadow, none) !important; border: var(--hat-btn-border, 0) !important; padding: .8em 1.5em !important; text-decoration: none !important;
}
body.hat-on .woocommerce a.button:hover, body.hat-on .single_add_to_cart_button:hover, body.hat-on .wc-block-components-button:not(.is-link):hover { filter: brightness(1.06); }

/* single product */
body.hat-on.single-product div.product .summary,
body.hat-on.single-product .wp-block-column:has(.wp-block-post-title) {
  background: var(--hat-surface); border-radius: var(--hat-radius); box-shadow: var(--hat-panel-shadow); padding: 24px !important; box-sizing: border-box;
}
body.hat-on.single-product .woocommerce-product-gallery { background: var(--hat-stage); border-radius: var(--hat-radius); box-shadow: var(--hat-frame-shadow, var(--hat-panel-shadow)); padding: 4%; box-sizing: border-box; }
body.hat-on.single-product .product_title, body.hat-on .wp-block-post-title { font-family: var(--hat-display) !important; color: var(--hat-title-color, var(--hat-accent)) !important; text-shadow: var(--hat-title-shadow, none); }
body.hat-on .woocommerce-tabs, body.hat-on .wp-block-woocommerce-product-details { background: var(--hat-surface); border-radius: var(--hat-radius); box-shadow: var(--hat-panel-shadow); padding: 20px !important; }
body.hat-on .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; }
body.hat-on .woocommerce-tabs ul.tabs li.active a { color: var(--hat-accent) !important; }

/* forms (quantity, variations, cart, checkout, account) */
body.hat-on .woocommerce .quantity input.qty, body.hat-on .variations select, body.hat-on .woocommerce form .form-row input.input-text,
body.hat-on .woocommerce form .form-row textarea, body.hat-on .woocommerce form .form-row select, body.hat-on .wc-block-components-text-input input,
body.hat-on .wc-block-components-quantity-selector {
  background: #fff !important; color: #222 !important; border: 2px solid var(--hat-line, rgba(0, 0, 0, .15)) !important; border-radius: min(var(--hat-radius), 12px) !important;
}
body.hat-on .woocommerce-cart-form, body.hat-on .cart-collaterals .cart_totals, body.hat-on .woocommerce-checkout #customer_details,
body.hat-on .woocommerce-checkout-review-order, body.hat-on .wp-block-woocommerce-cart, body.hat-on .wp-block-woocommerce-checkout,
body.hat-on .woocommerce-MyAccount-content, body.hat-on .woocommerce-MyAccount-navigation {
  background: var(--hat-surface); color: var(--hat-ink); border-radius: var(--hat-radius); box-shadow: var(--hat-panel-shadow); padding: 20px; box-sizing: border-box;
}
body.hat-on .woocommerce-message, body.hat-on .woocommerce-info, body.hat-on .woocommerce-error {
  background: var(--hat-surface) !important; color: var(--hat-ink) !important; border-top-color: var(--hat-accent) !important; border-radius: var(--hat-radius);
}
body.hat-on .woocommerce-message::before, body.hat-on .woocommerce-info::before { color: var(--hat-accent) !important; }

/* theme pages around WooCommerce content keep the animated background visible */
body.hat-on .wp-site-blocks, body.hat-on .site, body.hat-on #page, body.hat-on .site-content, body.hat-on main { background: transparent !important; }