/*
 * WooCommerce overrides — match the store/cart/checkout to the Brookstreet design system.
 *
 * All WooCommerce block/element styling lives in this one file (system.md §6, §11).
 * Target WooCommerce's own classes directly (NOT bsm- BEM) — the documented exception
 * to the naming rule. WooCommerce ships heavy default styles, so expect !important
 * (system.md §7). Selectors cover both the classic markup (shop archive / single
 * product, often rendered via the legacy-template block) and the block cart/checkout.
 *
 * Design references: design.md → "Buttons" and "Color palette".
 */

/* --- CTAs: design-system solid red, square, Jost 17px (matches the homepage buttons),
       hover inverts. Covers add-to-cart, cart/checkout, mini-cart, coupon buttons. --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--brookstreet-red, #a43143) !important;
	color: var(--wp--preset--color--white, #fff) !important;
	font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif) !important;
	font-size: 17px !important;      /* same as the homepage CTAs */
	font-weight: 400 !important;
	line-height: 1.2 !important;
	padding: 13px 28px !important;   /* comfortable homepage-sized hit area */
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--white, #fff) !important;
	color: var(--wp--preset--color--brookstreet-red, #a43143) !important;
}

/* "View cart" link shown after adding to cart (a plain link by default) — bump to CTA size */
.woocommerce a.added_to_cart,
.woocommerce a.added_to_cart.wc-forward {
	font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif) !important;
	font-size: 17px !important;
	font-weight: 500 !important;
}

/* --- Product titles: black + larger (~30px). (They render red by default because
       grid titles are links and theme.json sets the link colour to brand red.) --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.wc-block-components-product-name,
.wc-block-grid__product-title,
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title {
	color: var(--wp--preset--color--black, #000) !important;
	font-size: 30px !important;
	line-height: 1.2 !important;
}

/* --- Product images (the mattresses): 85% of their current size, centered.
       Scoped to the shop grid + single-product gallery (not cart thumbnails). --- */
.woocommerce ul.products li.product img,
.wc-block-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img,
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 85% !important;
	height: auto !important;
	margin-inline: auto !important;
}

/* --- Prices: larger + sans-serif (Jost), brand red --- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price,
.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--brookstreet-red, #a43143) !important;
}

/* Let the amount (and struck-through regular price) inherit the price styling */
.woocommerce .price .woocommerce-Price-amount,
.wc-block-components-product-price .wc-block-components-product-price__value,
.wc-block-components-product-price .woocommerce-Price-amount {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}

/* --- Shopping cart page: raise supporting text to ~18px. Leaves the product
       titles (30px) and prices (22px) set above intact. Block cart + classic cart. --- */
.wp-block-woocommerce-cart,
.wc-block-cart,
.woocommerce-cart .woocommerce {
	font-size: 18px !important;
}

/* Block cart: line-item meta, quantity, totals rows, coupon, remove/links */
.wc-block-cart-item__product,
.wc-block-components-product-metadata,
.wc-block-cart-item__quantity,
.wc-block-components-quantity-selector__input,
.wc-block-cart-item__remove-link,
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total,
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__description,
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon-link {
	font-size: 18px !important;
}

/* Classic cart: table cells, totals, coupon field, remove link */
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart .product-name a,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td,
.woocommerce-cart .coupon label,
.woocommerce-cart .coupon .input-text {
	font-size: 18px !important;
}

/* --- Mobile (system.md §15) --- */
@media (max-width: 767px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce div.product .product_title,
	.wc-block-components-product-name,
	.wc-block-grid__product-title,
	.wc-block-product-template .wp-block-post-title,
	.wp-block-woocommerce-product-template .wp-block-post-title {
		font-size: 24px !important;
	}
}