/*
 * TRADEAVTOTOOLS responsive layer.
 * Loaded after Sayara, Elementor and WooCommerce styles by the site MU-plugin.
 */

:root {
	--tat-gutter: clamp(16px, 3vw, 32px);
	--tat-control-height: 44px;
	--tat-radius: 8px;
}

html {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body.tradeavtotools-adaptive {
	max-width: 100%;
	overflow-x: clip;
}

.tradeavtotools-adaptive img,
.tradeavtotools-adaptive video,
.tradeavtotools-adaptive iframe,
.tradeavtotools-adaptive embed,
.tradeavtotools-adaptive object,
.tradeavtotools-adaptive svg {
	max-width: 100%;
}

.tradeavtotools-adaptive img,
.tradeavtotools-adaptive video {
	height: auto;
}

.tradeavtotools-adaptive .container,
.tradeavtotools-adaptive .elementor-container,
.tradeavtotools-adaptive .elementor-section,
.tradeavtotools-adaptive .elementor-widget-wrap,
.tradeavtotools-adaptive .site-content,
.tradeavtotools-adaptive #content {
	min-width: 0;
	max-width: 100%;
}

.tradeavtotools-adaptive h1,
.tradeavtotools-adaptive h2,
.tradeavtotools-adaptive h3,
.tradeavtotools-adaptive h4,
.tradeavtotools-adaptive p,
.tradeavtotools-adaptive a,
.tradeavtotools-adaptive td,
.tradeavtotools-adaptive th {
	overflow-wrap: anywhere;
}

.tradeavtotools-adaptive input:not([type="checkbox"]):not([type="radio"]),
.tradeavtotools-adaptive select,
.tradeavtotools-adaptive textarea {
	max-width: 100%;
}

.tradeavtotools-adaptive button,
.tradeavtotools-adaptive input[type="button"],
.tradeavtotools-adaptive input[type="submit"],
.tradeavtotools-adaptive .button,
.tradeavtotools-adaptive .sayara-btn {
	min-height: var(--tat-control-height);
	white-space: normal;
}

.tradeavtotools-adaptive .woocommerce-notices-wrapper,
.tradeavtotools-adaptive .woocommerce-message,
.tradeavtotools-adaptive .woocommerce-error,
.tradeavtotools-adaptive .woocommerce-info {
	max-width: 100%;
}

/* Product media must never dictate the page width. */
.tradeavtotools-adaptive .woocommerce-product-gallery,
.tradeavtotools-adaptive .woocommerce-product-gallery .flex-viewport,
.tradeavtotools-adaptive .woocommerce-product-gallery__wrapper,
.tradeavtotools-adaptive .woocommerce-product-gallery__image,
.tradeavtotools-adaptive .single-product .summary {
	min-width: 0;
	max-width: 100%;
}

.tradeavtotools-adaptive .woocommerce-product-gallery__image img {
	display: block;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.tradeavtotools-adaptive .woocommerce div.product form.cart,
.tradeavtotools-adaptive .widget-product-details .widget-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.tradeavtotools-adaptive .woocommerce div.product form.cart::before,
.tradeavtotools-adaptive .woocommerce div.product form.cart::after {
	display: none;
}

.tradeavtotools-adaptive .woocommerce div.product form.cart .variations,
.tradeavtotools-adaptive .woocommerce div.product form.cart .group_table {
	flex-basis: 100%;
}

.tradeavtotools-adaptive .woocommerce-tabs,
.tradeavtotools-adaptive .woocommerce-tabs .panel {
	min-width: 0;
	max-width: 100%;
}

.tradeavtotools-adaptive .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-inline: 0;
}

/* Keep cards and third-party popups inside the viewport. */
.tradeavtotools-adaptive .product-item,
.tradeavtotools-adaptive li.product,
.tradeavtotools-adaptive .xoo-cp-container,
.tradeavtotools-adaptive .pum-container,
.tradeavtotools-adaptive .cky-modal,
.tradeavtotools-adaptive .cky-consent-container {
	min-width: 0;
	max-width: 100%;
}

.tradeavtotools-adaptive .product-item-content,
.tradeavtotools-adaptive .product-item-image,
.tradeavtotools-adaptive .product-item img {
	max-width: 100%;
}

.tradeavtotools-adaptive .product-item-button {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Long WooCommerce tables scroll inside their own region, never the page. */
.tradeavtotools-adaptive .woocommerce table.shop_table,
.tradeavtotools-adaptive .woocommerce table.my_account_orders,
.tradeavtotools-adaptive .woocommerce-table,
.tradeavtotools-adaptive .wishlist_table {
	width: 100%;
	max-width: 100%;
}

.tradeavtotools-adaptive .woocommerce-MyAccount-content,
.tradeavtotools-adaptive .woocommerce-MyAccount-navigation,
.tradeavtotools-adaptive .woocommerce-Addresses,
.tradeavtotools-adaptive .woocommerce-address-fields,
.tradeavtotools-adaptive .woocommerce-EditAccountForm {
	min-width: 0;
	max-width: 100%;
}

.tradeavtotools-adaptive .woocommerce form .form-row input.input-text,
.tradeavtotools-adaptive .woocommerce form .form-row textarea,
.tradeavtotools-adaptive .woocommerce form .form-row select,
.tradeavtotools-adaptive .select2-container {
	width: 100% !important;
	max-width: 100%;
}

.tradeavtotools-adaptive .woocommerce form .form-row input.input-text,
.tradeavtotools-adaptive .select2-container .select2-selection {
	min-height: var(--tat-control-height);
}

.tradeavtotools-adaptive .woocommerce .col2-set,
.tradeavtotools-adaptive .woocommerce-page .col2-set,
.tradeavtotools-adaptive .woocommerce-billing-fields__field-wrapper,
.tradeavtotools-adaptive .woocommerce-shipping-fields__field-wrapper {
	min-width: 0;
}

@media (max-width: 1199px) {
	.tradeavtotools-adaptive .container {
		width: 100%;
		padding-inline: var(--tat-gutter);
	}

	.tradeavtotools-adaptive .elementor-section.elementor-section-boxed > .elementor-container {
		padding-inline: var(--tat-gutter);
	}
}

@media (max-width: 991px) {
	.tradeavtotools-adaptive .site-header,
	.tradeavtotools-adaptive .header-area,
	.tradeavtotools-adaptive .header-wrapper,
	.tradeavtotools-adaptive .header-middle,
	.tradeavtotools-adaptive .header-bottom {
		max-width: 100%;
	}

	.tradeavtotools-adaptive .header-wrapper,
	.tradeavtotools-adaptive .header-middle .container,
	.tradeavtotools-adaptive .header-bottom .container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}

	.tradeavtotools-adaptive .ajax-search-form-mobile,
	.tradeavtotools-adaptive .mobile-search,
	.tradeavtotools-adaptive .header-search-mobile {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.tradeavtotools-adaptive .ajax-search-form-mobile input,
	.tradeavtotools-adaptive .mobile-search input {
		width: 100%;
	}

	.tradeavtotools-adaptive .off-canvas-menu {
		width: min(88vw, 360px);
		max-width: 100%;
	}

	.tradeavtotools-adaptive .off-canvas-menu .navigation a,
	.tradeavtotools-adaptive .mean-container .mean-nav a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.tradeavtotools-adaptive .woocommerce div.product div.images,
	.tradeavtotools-adaptive .woocommerce-page div.product div.images,
	.tradeavtotools-adaptive .woocommerce div.product div.summary,
	.tradeavtotools-adaptive .woocommerce-page div.product div.summary {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.tradeavtotools-adaptive .woocommerce div.product div.summary {
		margin-top: 28px;
	}

	.tradeavtotools-adaptive .woocommerce .col2-set .col-1,
	.tradeavtotools-adaptive .woocommerce-page .col2-set .col-1,
	.tradeavtotools-adaptive .woocommerce .col2-set .col-2,
	.tradeavtotools-adaptive .woocommerce-page .col2-set .col-2 {
		float: none;
		width: 100%;
		max-width: 100%;
	}

	.tradeavtotools-adaptive .woocommerce .col2-set .col-2,
	.tradeavtotools-adaptive .woocommerce-page .col2-set .col-2 {
		margin-top: 24px;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation,
	.tradeavtotools-adaptive .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation li {
		flex: 1 1 150px;
		margin: 0;
		list-style: none;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation li a {
		display: flex;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 10px 12px;
		text-align: center;
	}

	.tradeavtotools-adaptive .woocommerce-Addresses {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.tradeavtotools-adaptive .woocommerce-Addresses .woocommerce-Address {
		float: none;
		width: auto;
		max-width: none;
	}

	.tradeavtotools-adaptive .site-footer .row,
	.tradeavtotools-adaptive .footer-widgets .row {
		row-gap: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--tat-gutter: 15px;
	}

	.tradeavtotools-adaptive h1,
	.tradeavtotools-adaptive .page-title {
		font-size: clamp(26px, 8vw, 36px);
		line-height: 1.2;
	}

	.tradeavtotools-adaptive h2 {
		font-size: clamp(22px, 6vw, 30px);
		line-height: 1.25;
	}

	.tradeavtotools-adaptive .page-title-area,
	.tradeavtotools-adaptive .breadcrumb-area,
	.tradeavtotools-adaptive .page-header {
		min-height: 0;
		padding-block: 44px;
	}

	.tradeavtotools-adaptive .elementor-column,
	.tradeavtotools-adaptive .elementor-widget-wrap,
	.tradeavtotools-adaptive .elementor-widget-container {
		min-width: 0;
		max-width: 100%;
	}

	/* Elementor's "initial width" widgets can otherwise remain wider than
	 * their mobile column (the home-page hero was 428px inside a 390px view). */
	.tradeavtotools-adaptive .elementor-widget__width-initial {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Sayara style-2 cards are horizontal by default. On a narrow column the
	 * image consumed 100% and squeezed the text to zero pixels. */
	.tradeavtotools-adaptive .product-item.style-2 {
		flex-direction: column;
	}

	.tradeavtotools-adaptive .product-item.style-2 .product-item-image,
	.tradeavtotools-adaptive .product-item.style-2 .product-item-content {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.tradeavtotools-adaptive .product-item.style-2 .product-item-content {
		padding: 14px 16px 18px;
	}

	/* The home-page discount shortcode uses an absolutely positioned price
	 * inside Sayara's horizontal style-2 card. The generic stacked mobile
	 * layout made the title, old price, new price and accessibility text sit
	 * on top of each other. Keep these promotional cards compact and give
	 * every text row its own space. */
	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 {
		flex-direction: row;
		align-items: stretch;
		min-height: 170px;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 .product-item-image {
		display: flex;
		flex: 0 0 42%;
		align-items: center;
		justify-content: center;
		width: 42%;
		max-width: 210px;
		height: auto;
		min-height: 170px;
		padding: 12px;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 .product-item-image img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 190px;
		object-fit: contain;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 .product-item-content {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 18px 14px;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .sayara-loop-product-title,
	.tradeavtotools-adaptive .sayara-pci-discount-loop .sayara-loop-product-price {
		width: 100%;
		height: auto;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .sayara-loop-product-title h5 {
		font-size: 16px;
		line-height: 1.35;
		white-space: normal;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop p.price {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0;
		line-height: 1.3;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop p.price > .sayara-pci-price {
		position: static !important;
		display: flex !important;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 9px;
		width: auto !important;
		height: auto !important;
		transform: none !important;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop p.price del,
	.tradeavtotools-adaptive .sayara-pci-discount-loop p.price ins {
		display: inline-block;
		margin: 0;
	}

	/* WooCommerce adds readable explanations next to sale prices for screen
	 * readers. Some Sayara pages do not load WordPress' hiding utility, so the
	 * explanations became visible and collided with the actual prices. */
	.tradeavtotools-adaptive .sayara-pci-discount-loop .screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Put the catalogue before the long category sidebar on phones. */
	.tradeavtotools-adaptive.woocommerce-shop .section-padding > .container > .row > .col-xl-3,
	.tradeavtotools-adaptive.post-type-archive-product .section-padding > .container > .row > .col-xl-3 {
		order: 2 !important;
	}

	.tradeavtotools-adaptive.woocommerce-shop .section-padding > .container > .row > .col-xl-9,
	.tradeavtotools-adaptive.post-type-archive-product .section-padding > .container > .row > .col-xl-9 {
		order: 1 !important;
	}

	.tradeavtotools-adaptive .product-item,
	.tradeavtotools-adaptive .woocommerce ul.products li.product,
	.tradeavtotools-adaptive .woocommerce-page ul.products li.product {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.tradeavtotools-adaptive .woocommerce-result-count,
	.tradeavtotools-adaptive .woocommerce-ordering {
		float: none;
		width: 100%;
		margin-bottom: 14px;
	}

	.tradeavtotools-adaptive .woocommerce-ordering select {
		width: 100%;
	}

	/* Empty account endpoints use a WooCommerce notice with a floated action
	 * link. On 360px screens Sayara squeezed that link into a few characters
	 * per line. Stack the message and its action inside the account only. */
	.tradeavtotools-adaptive .woocommerce-MyAccount-content .woocommerce-info {
		display: block !important;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-content .woocommerce-info .button,
	.tradeavtotools-adaptive .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 14px 0 0 !important;
		text-align: center;
	}

	.tradeavtotools-adaptive .woocommerce-product-gallery .flex-control-thumbs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.tradeavtotools-adaptive .woocommerce-product-gallery .flex-control-thumbs li {
		float: none;
		width: auto;
		margin: 0;
	}

	.tradeavtotools-adaptive .woocommerce div.product form.cart .quantity,
	.tradeavtotools-adaptive .woocommerce div.product form.cart .single_add_to_cart_button {
		margin: 0;
	}

	.tradeavtotools-adaptive .woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 180px;
	}

	.tradeavtotools-adaptive .woocommerce-tabs ul.tabs li {
		flex: 1 1 140px;
		margin: 0;
		text-align: center;
	}

	.tradeavtotools-adaptive .woocommerce-tabs ul.tabs li a {
		display: block;
		padding: 12px 10px;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation li {
		min-width: 0;
	}

	.tradeavtotools-adaptive .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	/* Order history as real mobile cards. Sayara and WooCommerce were both
	 * applying responsive table rules, which hid the order number and left
	 * each row at roughly half of the available width. */
	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table {
		display: block !important;
		width: 100% !important;
		border: 0;
		background: transparent;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table thead {
		display: none !important;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table tbody {
		display: grid !important;
		width: 100% !important;
		min-width: 0 !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table tbody tr {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		border: 1px solid #e7e7e7;
		border-radius: var(--tat-radius);
		background: #fff;
		box-shadow: 0 3px 14px rgb(0 0 0 / 5%);
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table tbody td {
		display: grid !important;
		width: 100% !important;
		grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		padding: 8px 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table tbody td::before {
		position: static !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		font-weight: 700;
		text-align: left;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
		grid-template-columns: minmax(92px, 34%) auto minmax(0, 1fr);
		column-gap: 6px;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
		display: block !important;
		margin: -16px -16px 8px !important;
		padding: 13px 16px !important;
		border-bottom: 1px solid #ededed !important;
		border-radius: var(--tat-radius) var(--tat-radius) 0 0;
		background: #f8f8f8;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
		display: inline-block;
		font-size: 18px;
		font-weight: 700;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		padding-top: 12px !important;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before {
		flex: 0 0 100%;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
		display: inline-flex;
		flex: 1 1 150px;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		padding: 10px 14px;
		border: 1px solid #df6932;
		border-radius: 999px;
		background: #df6932;
		color: #fff !important;
		text-align: center;
		text-decoration: none;
	}

	.tradeavtotools-adaptive.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.cancel {
		background: #fff;
		color: #c64f2c !important;
	}

	.tradeavtotools-adaptive .wishlist_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tradeavtotools-adaptive .wishlist_table tbody {
		display: table;
		width: 100%;
		min-width: 560px;
	}

	.tradeavtotools-adaptive .cart-collaterals .cart_totals,
	.tradeavtotools-adaptive .woocommerce-cart .cart-collaterals .cart_totals,
	.tradeavtotools-adaptive .woocommerce-checkout-review-order,
	.tradeavtotools-adaptive #order_review,
	.tradeavtotools-adaptive #customer_details {
		float: none;
		width: 100%;
		max-width: 100%;
	}

	.tradeavtotools-adaptive .xoo-cp-container,
	.tradeavtotools-adaptive .pum-container {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		margin-inline: 12px !important;
	}

	.tradeavtotools-adaptive .cky-consent-container,
	.tradeavtotools-adaptive .cky-box-bottom-left,
	.tradeavtotools-adaptive .cky-box-bottom-right {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: calc(100vw - 24px) !important;
	}
}

@media (max-width: 479px) {
	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 .product-item-image {
		flex-basis: 38%;
		width: 38%;
		padding: 8px;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .product-item.style-2 .product-item-content {
		padding: 14px 10px;
	}

	.tradeavtotools-adaptive .sayara-pci-discount-loop .sayara-loop-product-title h5 {
		font-size: 15px;
	}

	.tradeavtotools-adaptive .woocommerce-MyAccount-navigation ul {
		grid-template-columns: 1fr;
	}

	.tradeavtotools-adaptive .woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tradeavtotools-adaptive .product-item-button > *,
	.tradeavtotools-adaptive .woocommerce div.product form.cart .single_add_to_cart_button,
	.tradeavtotools-adaptive .woocommerce-form-login .button,
	.tradeavtotools-adaptive .woocommerce-EditAccountForm .button {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tradeavtotools-adaptive *,
	.tradeavtotools-adaptive *::before,
	.tradeavtotools-adaptive *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}