/* WooCommerce on a dark site.
 *
 * Loaded only on shop, product, cart, checkout and account pages (see
 * inc/enqueue.php). Woo's own stylesheets still load and do the layout; this
 * file only repaints them, and every override is a colour, a font or a size,
 * never a layout rule, so a Woo update cannot be broken by it.
 *
 * Woo 11 builds Cart and Checkout from blocks (wc-block-*), the shop and
 * product pages from classic templates (.woocommerce …). Both are covered.
 */

.thewears-woo { color: var(--tw-ink); }
.thewears-woo .woocommerce-products-header__title,
.thewears-woo .product_title { font-size: clamp(2.75rem, 6vw, 5rem); line-height: .95; margin-bottom: .5rem; }
.thewears-woo .woocommerce-products-header { margin-bottom: 2rem; }

/* ---- product grid -------------------------------------------------------- */
.thewears-woo ul.products li.product { text-align: left; }
.thewears-woo ul.products li.product a img { background: #fff; border-radius: var(--tw-radius); margin-bottom: 1rem; }
.thewears-woo ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--tw-font-head);
	font-size: 1.625rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--tw-ink);
	padding: 0;
}
.thewears-woo ul.products li.product .price,
.thewears-woo div.product p.price,
.thewears-woo div.product span.price { color: var(--tw-ink); font-weight: 700; font-size: 1.125rem; }
.thewears-woo div.product p.price { font-size: 1.5rem; }

/* ---- buttons: every Woo button becomes ours ------------------------------ */
.thewears-woo .button,
.thewears-woo button.button,
.thewears-woo a.button,
.thewears-woo input.button,
.thewears-woo .single_add_to_cart_button,
.thewears-woo .wc-block-components-button:not(.is-link),
.thewears-woo .wp-element-button {
	min-height: 48px;
	padding: .75rem 1.5rem !important;
	border: 2px solid var(--tw-red) !important;
	border-radius: var(--tw-radius) !important;
	background: var(--tw-red) !important;
	color: var(--tw-black) !important;
	font-family: var(--tw-font-body) !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.thewears-woo .button:hover,
.thewears-woo .single_add_to_cart_button:hover,
.thewears-woo .wc-block-components-button:not(.is-link):hover,
.thewears-woo .wp-element-button:hover { background: var(--tw-red-hi) !important; border-color: var(--tw-red-hi) !important; color: var(--tw-black) !important; }
.thewears-woo .button.disabled,
.thewears-woo .single_add_to_cart_button.disabled { opacity: .55; }

/* ---- single product ------------------------------------------------------ */
.thewears-woo div.product .woocommerce-product-gallery { background: #fff; border-radius: var(--tw-radius); overflow: hidden; }
.thewears-woo div.product .woocommerce-product-details__short-description { font-size: 1.125rem; margin: 1rem 0 1.5rem; }
.thewears-woo div.product form.cart { margin-top: 1.5rem; }
.thewears-woo div.product form.cart .variations { margin-bottom: 1rem; }
.thewears-woo div.product form.cart .variations th,
.thewears-woo div.product form.cart .variations td { display: block; padding: 0 0 .4rem; text-align: left; }
.thewears-woo div.product form.cart .variations label { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .875rem; }
.thewears-woo .reset_variations { color: var(--tw-ink-soft); }
.thewears-woo .product_meta { margin-top: 1.5rem; color: var(--tw-ink-soft); font-size: .875rem; }
.thewears-woo .product_meta a { color: var(--tw-ink-soft); }
.thewears-woo .woocommerce-tabs ul.tabs { padding: 0 !important; }
.thewears-woo .woocommerce-tabs ul.tabs::before { border-color: var(--tw-hairline) !important; }
.thewears-woo .woocommerce-tabs ul.tabs li { background: transparent !important; border-color: var(--tw-hairline) !important; border-radius: 0 !important; }
.thewears-woo .woocommerce-tabs ul.tabs li::before,
.thewears-woo .woocommerce-tabs ul.tabs li::after { display: none !important; }
.thewears-woo .woocommerce-tabs ul.tabs li a { color: var(--tw-ink) !important; font-weight: 700 !important; }
.thewears-woo .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--tw-red) !important; }
.thewears-woo .related > h2,
.thewears-woo .upsells > h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 3rem; }
.thewears-woo .woocommerce-Price-amount { color: inherit; }
.thewears-woo .stock.out-of-stock { color: var(--tw-red); font-weight: 700; }
.thewears-woo .stock.in-stock { color: var(--tw-ink-soft); }

/* ---- form controls: dark fields with a 3:1 edge -------------------------- */
.thewears-woo select,
.thewears-woo input.input-text,
.thewears-woo input[type="text"],
.thewears-woo input[type="email"],
.thewears-woo input[type="tel"],
.thewears-woo input[type="number"],
.thewears-woo input[type="password"],
.thewears-woo textarea,
.thewears-woo .wc-block-components-text-input input,
.thewears-woo .wc-block-components-combobox .wc-block-components-combobox-control input,
.thewears-woo .wc-blocks-components-select select {
	min-height: 48px;
	padding: .6rem .85rem;
	border: 2px solid var(--tw-border-ui) !important;
	border-radius: var(--tw-radius) !important;
	background: var(--tw-coal) !important;
	color: var(--tw-ink) !important;
	font: inherit;
}
.thewears-woo .wc-block-components-text-input label,
.thewears-woo .wc-blocks-components-select__label,
.thewears-woo .wc-block-components-combobox label { color: var(--tw-ink-soft) !important; }
.thewears-woo .quantity .qty { min-width: 4.5rem; text-align: center; }

/* Woo's validation red (#cc1818) is 3.4:1 on the coal fields; this is 6.2:1. */
.thewears-woo .wc-block-components-validation-error,
.thewears-woo .wc-block-components-validation-error > p { color: #ff8b7b !important; }
.thewears-woo .has-error input,
.thewears-woo .wc-block-components-text-input.has-error input { border-color: #ff8b7b !important; }

/* ---- notices -------------------------------------------------------------- */
.thewears-woo .woocommerce-message,
.thewears-woo .woocommerce-info,
.thewears-woo .woocommerce-error,
.thewears-woo .wc-block-components-notice-banner {
	background: var(--tw-coal) !important;
	color: var(--tw-ink) !important;
	border-top-color: var(--tw-red) !important;
	border-color: var(--tw-red) !important;
}
.thewears-woo .woocommerce-message::before,
.thewears-woo .woocommerce-info::before { color: var(--tw-red) !important; }
.thewears-woo .wc-block-components-notice-banner > svg { fill: var(--tw-black); background: var(--tw-red); }

/* ---- cart + checkout blocks ---------------------------------------------- */
.thewears-woo .wc-block-cart,
.thewears-woo .wc-block-checkout,
.thewears-woo .wp-block-woocommerce-cart,
.thewears-woo .wp-block-woocommerce-checkout { color: var(--tw-ink); }
.thewears-woo .wc-block-components-sidebar-layout .wc-block-components-main,
.thewears-woo .wc-block-components-sidebar { color: var(--tw-ink); }
.thewears-woo .wc-block-cart-items,
.thewears-woo .wc-block-components-totals-wrapper,
.thewears-woo .wc-block-components-order-summary,
.thewears-woo .wc-block-cart-items td,
.thewears-woo .wc-block-cart-items th { border-color: var(--tw-hairline) !important; }
.thewears-woo .wc-block-components-product-name,
.thewears-woo .wc-block-components-totals-item__label,
.thewears-woo .wc-block-components-title,
.thewears-woo .wc-block-components-checkout-step__title { color: var(--tw-ink) !important; }
.thewears-woo .wc-block-components-product-metadata,
.thewears-woo .wc-block-components-checkout-step__description { color: var(--tw-ink-soft) !important; }
.thewears-woo .wc-block-cart-item__image img { background: #fff; }
.thewears-woo .wc-block-components-quantity-selector { border-color: var(--tw-border-ui) !important; }
.thewears-woo .wc-block-components-quantity-selector input,
.thewears-woo .wc-block-components-quantity-selector button { color: var(--tw-ink) !important; background: transparent !important; }
.thewears-woo .wc-block-components-radio-control__option,
.thewears-woo .wc-block-components-radio-control-accordion-option { border-color: var(--tw-hairline) !important; }
.thewears-woo .wc-block-components-radio-control__input,
.thewears-woo .wc-block-components-checkbox__input { background: var(--tw-coal) !important; border-color: var(--tw-border-ui) !important; }
.thewears-woo .wc-block-components-radio-control__input:checked::before { background: var(--tw-red) !important; }
.thewears-woo .wc-block-components-checkbox__mark { fill: var(--tw-red) !important; }
.thewears-woo .wc-block-components-totals-coupon__button,
.thewears-woo .wc-block-components-panel__button { color: var(--tw-ink) !important; }
.thewears-woo a:not(.button):not(.wc-block-components-button):not(.wp-element-button) { color: var(--tw-red); }
.thewears-woo .wc-block-cart__empty-cart__title { font-family: var(--tw-font-head); text-transform: uppercase; }

/* Checkout order summary: Woo sets the item's size and price at 11.4px. */
.thewears-woo .wc-block-components-order-summary-item .wc-block-components-product-metadata,
.thewears-woo .wc-block-components-order-summary-item .wc-block-components-product-details,
.thewears-woo .wc-block-components-order-summary-item .wc-block-components-product-price { font-size: .875rem !important; }
/* The "Add flat, suite, etc." and "Add coupons" toggles are 18px-tall text. */
.thewears-woo .wc-block-components-address-form__address_2-toggle,
.thewears-woo .wc-block-components-panel__button { min-height: 44px; display: flex; align-items: center; }

/* Postage and the returns link, under the basket button. */
.thewears-woo .thewears-delivery-note { margin: 1rem 0 0; color: var(--tw-ink-soft); font-size: .9375rem; }
.thewears-woo .thewears-delivery-note a { color: var(--tw-ink); text-underline-offset: .15em; }