/* WooCommerce's own "View cart" link appended after ajax add-to-cart -
   superseded by the Quote Drawer's "View Quote" action. */
.added_to_cart.wc-forward {
	display: none !important;
}

/*
 * Single product page "Add to Quote" button - the same treatment as the Quote
 * Drawer's primary button: solid brand red, uppercase, square corners, darker
 * red on hover. !important is needed because the Elementor kit styles bare
 * <button> elements black.
 *
 * The product-grid/loop buttons (a.add_to_cart_button) are deliberately NOT
 * styled here - they are styled from Elementor instead.
 */
button.single_add_to_cart_button {
	display: inline-block;
	padding: 14px 16px !important;
	border: 1px solid var( --e-global-color-primary, #F80000 ) !important;
	border-radius: 0 !important;
	background: var( --e-global-color-primary, #F80000 ) !important;
	color: #fff !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-align: center;
	text-decoration: none !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

button.single_add_to_cart_button:hover,
button.single_add_to_cart_button:focus {
	background: var( --e-global-color-accent, #AA0000 ) !important;
	border-color: var( --e-global-color-accent, #AA0000 ) !important;
	color: #fff !important;
}

/* WooCommerce's loading state dims the button while the AJAX add runs. */
button.single_add_to_cart_button.loading {
	opacity: 0.6;
}

/*
 * This site's Cart, Checkout and Mini-Cart pages/widgets use WooCommerce
 * Blocks (Store API + Interactivity API), which render price/quantity from
 * raw numeric data rather than through the woocommerce_get_price_html /
 * woocommerce_quantity_input_args filters - so they need to be hidden by
 * class instead.
 *
 * NOTE: only the quantity *selector* is hidden here, not its wrapping
 * .wc-block-cart-item__quantity container - the Cart block nests the remove
 * button inside that same container, so hiding the container would take the
 * remove button with it.
 *
 * .wc-block-components-totals-item covers every totals row including the
 * grand total (the checkout's footer total merges that class in), and
 * __title-price is the price echoed beside the sidebar's summary heading.
 */
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-quantity-selector {
	display: none !important;
}

/*
 * Cart page item rows: keep only the product image, title and the "Remove
 * from Quote" button - hide price, subtotal, sale badges, save-for-later
 * and any metadata (SKU/variation/short description).
 */
.wc-block-cart-item__prices,
.wc-block-cart-item__total,
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__save-for-later,
.wc-block-components-product-metadata,
.wc-block-components-product-badge,
.wc-block-components-product-rating {
	display: none !important;
}

/*
 * The "Cart totals" box (heading, subtotal/shipping/tax rows, coupon form)
 * is its own inner block, separate from the "Proceed to Checkout"/"Request
 * Quote" button - hide the whole box rather than the shared sidebar column,
 * so the button underneath it stays visible and usable.
 */
.wp-block-woocommerce-cart-order-summary-block {
	display: none !important;
}

/* Coupon entry box specifically, wherever else it might appear (e.g. the
   Checkout page's own order summary shares this same component/class). */
.wc-block-components-totals-coupon {
	display: none !important;
}

/*
 * Checkout page: no shipping-method or payment-method selection, and no
 * order totals - this is a quote request, not a paid checkout. The order
 * summary's item list (image/title, same as the Cart page) stays so the
 * customer can still see what they're requesting a quote for.
 */
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-express-payment-block,
.wp-block-woocommerce-checkout-order-summary-totals-block {
	display: none !important;
}

/*
 * Everything in the Quote Summary sidebar after the product list.
 *
 * Each row (coupon form, subtotal/shipping/tax rows, grand total) sits in a
 * .wc-block-components-totals-wrapper that carries its own top border and
 * 16px vertical padding. Hiding only a row's *contents* therefore leaves the
 * wrapper behind as an empty bordered box - which is what showed up where the
 * total used to be. Hiding the wrappers themselves removes those, and
 * excluding the cart-items wrapper keeps the product list visible. Written as
 * a :not() rather than a list of specific blocks so any row WooCommerce adds
 * later can't reintroduce a stray empty box.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not( .wp-block-woocommerce-checkout-order-summary-cart-items-block ) {
	display: none !important;
}

/* "By proceeding with your purchase you agree to our Terms and Conditions
   and Privacy Policy" notice - not relevant to a quote request. */
.wc-block-checkout__terms {
	display: none !important;
}

/*
 * Cart page remove control: the Cart block already ships this as an icon-only
 * button (a trash glyph). With the quantity selector hidden, its container is
 * repurposed to hold just that icon.
 *
 * The row is a table (image | product | total). Because the total cell is
 * hidden, the product cell ends partway across the row, so the icon would sit
 * stranded mid-row with dead space beside it. Rather than fight the table's
 * column-sizing algorithm to stretch that cell (which starves the image
 * column - the thumbnail is sized in %, so it collapses to nothing as soon as
 * another column claims the free space), the icon is simply lifted out of the
 * table flow and pinned to the row's right edge, vertically centred. Column
 * widths - and therefore the thumbnail - are left exactly as WooCommerce
 * intends them.
 */
.wc-block-cart-items__row {
	position: relative;
}

.wc-block-cart-item__quantity {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY( -50% );
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	margin: 0 !important;
}

/*
 * The site's own custom CSS labels these cells with ::before pseudo-elements
 * ("Quantity", "unit price:", "Total: "). The price and total cells are
 * hidden, so their labels disappear with them - but the quantity container is
 * deliberately kept (it carries the trash icon), so its "Quantity" label has
 * to be suppressed on its own or it keeps showing under every product.
 */
.wc-block-cart-item__quantity::before,
.wc-block-cart-item__prices::before,
.wc-block-cart-item__total::before {
	content: none !important;
	display: none !important;
}

.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	padding: 6px !important;
	border: 0;
	background: transparent;
	color: var( --e-global-color-primary, #F80000 ) !important;
	text-decoration: none !important;
	cursor: pointer;
}

.wc-block-cart-item__remove-link:hover {
	opacity: 0.7;
}

.wc-block-cart-item__remove-link svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/*
 * Quote Drawer
 *
 * Colors come from Elementor's global kit palette (defined on body via
 * .elementor-kit-*), so the drawer's buttons match the site's other buttons
 * instead of falling back to the theme's default gray.
 */
:root,
.tj-quote-drawer,
.tj-quote-icon {
	--tj-red: var( --e-global-color-primary, #F80000 );
	--tj-red-hover: var( --e-global-color-accent, #AA0000 );
}

.tj-quote-drawer {
	position: fixed;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 100000;
}

.tj-quote-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.tj-quote-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tj-quote-drawer.is-open .tj-quote-drawer__overlay {
	opacity: 1;
}

.tj-quote-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min( 380px, 100% );
	background: #fff;
	box-shadow: -2px 0 12px rgba( 0, 0, 0, 0.15 );
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: translateX( 100% );
	transition: transform 0.3s ease;
}

.tj-quote-drawer.is-open .tj-quote-drawer__panel {
	transform: translateX( 0 );
}

.tj-quote-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
}

.tj-quote-drawer__message {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0;
}

/*
 * The theme's Elementor kit styles bare `button` elements with a black
 * background and uppercase padding (.elementor-kit-* button), which would
 * otherwise turn the close "x" into a black block - the #id selector here
 * outweighs it.
 */
#tj-quote-drawer .tj-quote-drawer__close {
	border: none;
	background: transparent;
	color: inherit;
	font-size: 1.6em;
	line-height: 1;
	padding: 0 4px;
	margin: 0;
	width: auto;
	cursor: pointer;
}

#tj-quote-drawer .tj-quote-drawer__close:hover {
	background: transparent;
	color: var( --tj-red );
}

.tj-quote-drawer__content {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}

/* The mini-cart template's own "View cart"/"Checkout" links and subtotal are
   superseded by the drawer's own actions and the site-wide price hiding. */
.tj-quote-drawer__content .woocommerce-mini-cart__buttons,
.tj-quote-drawer__content .woocommerce-mini-cart__total {
	display: none !important;
}

#tj-quote-drawer ul.cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	margin: 0;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
}

/* The product link wraps both the thumbnail and the title; WooCommerce floats
   the image right by default, which fights the flex row. It takes the
   remaining width so the remove icon is pushed to the far right. */
#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item > a:not(.remove) {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	text-decoration: none;
}

#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item img {
	float: none;
	margin: 0;
	width: 56px;
	height: auto;
	flex: 0 0 auto;
}

/*
 * WooCommerce absolutely positions this remove link at the item's top-left
 * corner (position:absolute; top:0; left:0). Returning it to normal flow and
 * ordering it last puts the icon on the right-hand side of each row instead.
 */
#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item a.remove {
	position: static;
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 0;
	line-height: 1;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --tj-red ) !important;
	text-decoration: none;
}

#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item a.remove svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

#tj-quote-drawer ul.cart_list li.woocommerce-mini-cart-item a.remove:hover {
	background: transparent;
	opacity: 0.7;
}

.tj-quote-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
}

/* Match the site's primary buttons (Elementor global red) rather than the
   theme's default gray. */
#tj-quote-drawer .tj-quote-drawer__request,
#tj-quote-drawer .tj-quote-drawer__view {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var( --tj-red );
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
}

/* Primary action: go to checkout and submit the quote request. */
#tj-quote-drawer .tj-quote-drawer__request {
	background: var( --tj-red );
	color: #fff;
}

#tj-quote-drawer .tj-quote-drawer__request:hover {
	background: var( --tj-red-hover );
	border-color: var( --tj-red-hover );
	color: #fff;
}

/* Secondary action: review the full quote list on the cart page. */
#tj-quote-drawer .tj-quote-drawer__view {
	background: transparent;
	color: var( --tj-red );
}

#tj-quote-drawer .tj-quote-drawer__view:hover {
	background: var( --tj-red );
	color: #fff;
}

#tj-quote-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 16px 0;
}

/*
 * Header quote icon ([tuffrod_quote_icon] shortcode). !important is needed to
 * beat the Elementor kit's bare `button` rule (black background, 1em padding,
 * uppercase), which would otherwise render this as a black block.
 */
.tj-quote-icon {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: transparent !important;
	color: inherit !important;
	padding: 6px !important;
	width: auto !important;
	cursor: pointer;
	line-height: 1 !important;
}

.tj-quote-icon:hover {
	color: var( --tj-red ) !important;
}

/*
 * Empty quote: the icon stays in the DOM (so WooCommerce's AJAX fragment
 * refresh has an element to swap when the first item is added) but is not
 * shown. The doubled class outweighs the display:inline-flex !important
 * above it.
 */
.tj-quote-icon.tj-quote-icon--empty {
	display: none !important;
}

.tj-quote-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.tj-quote-icon__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var( --tj-red );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/*
 * "Download Spec Sheet" button, printed under the loop "Add to Quote" button on
 * shop/category grids by TJ_Spec_Sheet. The secondary, inverted counterpart to
 * the quote button beside it: white fill with red text and outline, rounded
 * corners, Title Case rather than uppercase, filling solid red on hover.
 *
 * Sizing is deliberately absent here. The element is given the same `button`
 * class as the quote button (see TJ_Spec_Sheet::get_button_html), so padding,
 * typography, width and side margins all come from whatever styles that button
 * - the JetWooBuilder grid widget's Button controls, or the Elementor kit
 * elsewhere - which keeps the pair identically sized even if those settings are
 * later changed. Restating any of it here is what made the two diverge.
 *
 * Consequences of sharing that class, both handled below:
 *  - Elementor's generated rules are far more specific than a single class, so
 *    the repaint properties need !important to land.
 *  - the outline is an inset box-shadow, not a border: a 1px border would add
 *    2px of height that the borderless quote button doesn't carry. It needs
 *    !important of its own because WooCommerce core resets `a.button` to
 *    box-shadow: none, which would otherwise erase the outline entirely.
 *
 * display:flex (not inline-flex) so the button always takes its own line under
 * the quote button; flex-basis covers listings that wrap the buttons in a flex
 * row, where it would otherwise share the line.
 */
.tj-spec-sheet-button {
	display: flex !important;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Beats the grid widget's `margin: 0 20px` shorthand on the top edge only,
	   leaving its horizontal margins to align with the quote button. */
	margin-top: 8px !important;
	box-sizing: border-box;
	border: 0 !important;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var( --tj-red, #F80000 ) !important;
	background: #fff !important;
	color: var( --tj-red, #F80000 ) !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: capitalize !important;
}

.tj-spec-sheet-button:hover,
.tj-spec-sheet-button:focus {
	background: var( --tj-red, #F80000 ) !important;
	color: #fff !important;
}

.tj-spec-sheet-button svg {
	flex: 0 0 auto;
}