:root {
  --color-background: #0073aa;
  --color-text: #000000;
  --color-button-background: #0073aa;
  --color-button-text: #ffffff;
  --font-family: Arial, sans-serif;
  --font-size-base: 16px;
  --spacing-base: 1rem;
  --border-radius: 4px;
  --z-index-overlay: 1000;
}

.mini-cart {
    position: relative
}
.cart-quantity-pip {
	display: inline-block;
    background: var(--color-button-background);
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 26px;
    height: 26px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 3px;
}


.woocommerce-checkout .wp-block-post-title {
	display: none;
}

.custom-product-image {
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.archive {
	.custom-product-image {
		width: 100% !important;
	}
	.wc-block-product *  {
		text-align: left;
	}
	.wp-block-woocommerce-product-price {
		display: none;
	}
	
	&.product-grid {
		.wc-block-product-template__responsive {
			grid-template-columns: repeat(3, 1fr);

			@media screen and (max-width: 1024px) {
				grid-template-columns: repeat(2, 1fr);
			}
			
			@media screen and (max-width: 767px) {
				grid-template-columns: 1fr;
			}
		}		
	}
	
	&.product-list {
		.wc-block-product-template__responsive {
			grid-template-columns: repeat(2, 1fr);
			
			@media screen and (max-width: 767px) {
				grid-template-columns: 1fr;
			}
		}
		.wc-block-product {
			display: flex;
			border-bottom: 1px solid lightgrey;
		}
		.wc-block-grid__product-image {
			min-width: 30% !important;
			
			.custom-product-image {
				height: fit-content !important;
				min-height: 200px;
			}
		}
		.archive-product-details {
			padding: 15px 0 15px 25px;
		}
	}
}

.custom-product-image .product-name {
    color: var(--color-button-text);
    padding: 10px;
}
.woocommerce-product-gallery__trigger {
	display: none;
	pointer-events: none;
}


/* General Styles */
/* WooCommerce Archive Page */
.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.woocommerce ul.products.grid-view li.product {
    flex: 1 1 30%;
    max-width: 30%;
    background: var(--wp--preset--color--white);
    padding: 20px;
    border: 1px solid var(--wp--preset--color--gray);
    border-radius: 10px;
}

.woocommerce ul.products.list-view li.product {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid var(--wp--preset--color--gray);
}

.woocommerce ul.products li.product .price {
    color: var(--wp--preset--color--success);
    font-size: var(--wp--preset--font-size--large);
    font-weight: bold;
}

.woocommerce ul.products li.product h2 {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--primary);
    margin-bottom: 15px;
}

.woocommerce ul.products li.product .button {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--wp--preset--font-size--base);
    text-transform: uppercase;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--wp--preset--color--secondary);
}

/* Single Product Page */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.woocommerce div.product .woocommerce-product-gallery {
    width: 50%;
}

.woocommerce div.product .summary {
    width: 50%;
    padding: 50px;
    background-color: var(--wp--preset--color--gray);
    border-radius: 10px;
}

.woocommerce div.product .price {
    color: var(--wp--preset--color--success);
    font-size: var(--wp--preset--font-size--large);
    margin-bottom: 20px;
}

.woocommerce div.product .button {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--wp--preset--font-size--base);
    margin-top: 20px;
}

.woocommerce div.product .woocommerce-tabs {
    margin-top: 50px;
}

/* Cart and Checkout Pages */
.woocommerce-cart {
    margin-bottom: 50px;
    background-color: var(--wp--preset--color--gray);
    padding: 30px;
    border-radius: 10px;
}

.woocommerce .woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce .woocommerce-cart table.cart th,
.woocommerce .woocommerce-cart table.cart td {
    padding: 15px;
    border: 1px solid var(--wp--preset--color--gray);
}

.woocommerce .woocommerce-cart table.cart td.product-name a {
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

.woocommerce .woocommerce-cart table.cart td.product-price,
.woocommerce .woocommerce-cart table.cart td.product-subtotal {
    font-weight: bold;
    color: var(--wp--preset--color--success);
}

.composite_button .qty {
	width: 80px !important;
}

.woocommerce button[name="update_cart"] {
    display: none;
}
/* Hide quantity column */
.woocommerce table.shop_table .product-quantity {
    display: none;
}

/* Hide subtotal column */
.woocommerce table.shop_table .product-subtotal {
    display: none;
}

/* Adjust the column widths to fill the space */
.woocommerce table.shop_table th.product-name,
.woocommerce table.shop_table td.product-name {
    width: auto;
}

.woocommerce-checkout {
    border-radius: 10px;
}

/* Force WooCommerce Checkout to display in one column */
.woocommerce-checkout .col2-set {
    display: flex;
    flex-direction: column;
}

.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none;
}

.woocommerce-checkout #customer_details .col-1, 
.woocommerce-checkout #customer_details .col-2 {
    margin-bottom: 20px;
}

.woocommerce-checkout h3 {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
}

.woocommerce-checkout form.checkout input,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--wp--preset--color--secondary);
    border-radius: 5px;
    font-size: var(--wp--preset--font-size--base);
    margin-bottom: 20px;
}

.woocommerce-checkout form.checkout input:focus,
.woocommerce-checkout form.checkout select:focus,
.woocommerce-checkout form.checkout textarea:focus {
    border-color: var(--wp--preset--color--secondary);
}

.woocommerce-checkout .button {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 15px 30px;
    border-radius: 5px;
    font-size: var(--wp--preset--font-size--base);
    text-transform: uppercase;
    margin-top: 20px;
}

/* User Account Page */
.woocommerce-MyAccount-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 15px;
}

.woocommerce-MyAccount-navigation ul li a {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 10px 20px;
    border-radius: 5px;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--wp--preset--color--secondary);
}

.woocommerce-MyAccount-content {
    background-color: var(--wp--preset--color--gray);
    padding: 50px;
    border-radius: 10px;
}

.woocommerce-MyAccount-content h2 {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    margin-bottom: 20px;
}

/* Email Templates */
.woocommerce-email-header {
    text-align: center;
    padding: 20px;
    background-color: var(--wp--preset--color--primary);
}

.woocommerce-email-header img {
    max-width: 150px;
}

.woocommerce-email-body {
    background-color: var(--wp--preset--color--white);
    padding: 30px;
    font-family: var(--wp--preset--font-family--base);
    color: var(--wp--preset--color--text-gray);
}

.woocommerce-email-footer {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
    padding: 20px;
    text-align: center;
}

.woocommerce-ordering {
	display: none;	
}

/* Grid View (Default WooCommerce) */
.products.grid .product {
    width: 30%;
    float: left;
    margin: 1.66%;
    padding: 10px;
    box-sizing: border-box;
}
.products.grid .product .product-description {
    display: none;
}

/* List View */
.products.list .product {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
}
.products.list .product .product-thumbnail {
    width: 20%;
    margin-right: 15px;
}
.products.list .product .product-content {
    width: 75%;
}
.products.list .product .product-description {
    display: block;
    margin-top: 10px;
    color: #666;
}


.wc-block-product-results-count {
	display: none;
}


.cross-sell-products {
	list-style: none;
	padding: 0;
}
.cross-sell-product {
	width: 100%;
	display: flex;
}
/* Below 395px, the image + info + button flex row leaves too little space
   for the info column even once the button itself is protected from
   wrapping (see .cross-sell-product-button in tm-ecommerce.css) - the
   product name/price end up squeezed to just a few characters wide.
   Stack image above info above button instead. */
@media screen and (max-width: 394px) {
	.cross-sell-product {
		flex-direction: column;
		gap: 15px;
	}
}
.add-cross-sell-to-cart {
	margin-top: 0;
	max-width: 100px;	
}

#overlay-form {
	h3 {
		color: var(--wp--preset--color--primary) !important;
	}
	input, select, textarea, .select2-selection {
		border: 1px solid var(--wp--preset--color--secondary) !important;
		font-family: var(--wp--preset--font-family--body);
	    line-height: var(--wp--custom--typography--line-height--headings);
	}
	label {
		font-weight: var(--wp--custom--typography--font-weight--bold);
	}
	button {
		border-radius: 100px !important;
		padding: 16px 22px !important;
		border: 2px solid var(--wp--preset--color--primary) !important;
		font-weight: var(--wp--custom--typography--font-weight--bold);
	}
	button:hover, .button:focus, .button:active {
		background-color: transparent !important;
		color: var(--wp--preset--color--primary) !important;
	}
}

.product-template-default {
	.product {
		gap: 0 !important;	
	}
	.wp-block-template-part {
		margin-top: 0 !important;
	}
	.wp-block-post-title {
		font-family: var(--wp--preset--font-family--heading);
	    font-size: var(--wp--preset--font-size--x-large);
	    font-weight: var(--wp--custom--typography--font-weight--bold);
	}
	.wp-block-woocommerce-product-price {
		margin-top: 15px !important;
	}
	.woocommerce-Price-amount.amount {
		font-family: var(--wp--preset--font-family--heading);
	    font-size: 30px !important;
	    font-weight: var(--wp--custom--typography--font-weight--bold);
	    line-height: var(--wp--custom--typography--line-height--headings);
	    color: var(--wp--preset--color--primary) !important;
	}
	/* Scoped to `main` (not the whole `.product-template-default` body) - a bare
	   `h2` here compiled to `.product-template-default h2`, which unintentionally
	   overrode every h2 on the page, including the shared footer's headings, since
	   `.product-template-default` is a body-level class, not a product-content
	   wrapper. */
	main h2 {
		color: var(--wp--preset--color--primary) !important;
	}
	.component_title_text {
		color: var(--wp--preset--color--black) !important;
	}
	.component_title::before {
		color: var(--wp--preset--color--tertiary) !important;
	}
	.button {
		border-radius: 100px !important;
		padding: 16px 22px !important;
		border: 2px solid var(--wp--preset--color--primary);
		font-weight: var(--wp--custom--typography--font-weight--bold);
	}
	.button:hover, .button:focus, .button:active {
		background-color: transparent !important;
		color: var(--wp--preset--color--primary) !important;
	}
	.cross-sell-product {
		max-width: 600px;	
	}
	.cross-sell-product-info {
		p, .woocommerce-Price-amount.amount {
			font-size: var(--wp--preset--font-size--medium) !important;
			font-family: var(--wp--preset--font-family--heading);
		    font-weight: var(--wp--custom--typography--font-weight--bold);
		    line-height: var(--wp--custom--typography--line-height--headings);
		    color: var(--wp--preset--color--primary) !important;
		}
	}
	.cross-sell-product-image {
		border-radius: 3px !important;
		background-color: var(--wp--preset--color--white) !important;
		
		img {
			width: 60px !important;
		}
	}
	.tm-cross-sells {
		padding: 25px 25px 15px !important;
		background-color: var(--wp--preset--color--tertiary-green-tint-10) !important;
		border-radius: 5px;
		
		.button {
			padding: 10px !important;
		}
	}
	.wp-block-woocommerce-product-price {
		display: none;
	}
	.composite_price .price {
		margin-bottom: 15px !important;
	}
	.quantity input {
		border-radius: 100px;
	    border: 2px solid var(--wp--preset--color--tertiary);
		font-size: var(--wp--preset--font-size--medium) !important;
		font-family: var(--wp--preset--font-family--heading);
	    font-weight: var(--wp--custom--typography--font-weight--bold);
	    line-height: var(--wp--custom--typography--line-height--headings);
	    padding: 12px 22px !important;
	}
	.taxonomy-product_cat {
		display: none;
	}
	.wc-tabs {
		display: none !important;
	}
	.wp-block-woocommerce-product-details {
		position: relative;
		background-color: var(--wp--preset--color--primary-light-blue-tint-10);
		padding-top: 25px;
		padding-bottom: 25px;
		margin-top: 15px !important;
		
		h2 {
			color: var(--wp--preset--color--secondary) !important;
		}
		
		strong {
			color: var(--wp--preset--color--secondary) !important;
		}
	}
	.wp-block-woocommerce-product-details::before {
		content: "";
		width: 200vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: -50%;
		background-color: var(--wp--preset--color--primary-light-blue-tint-10);
		z-index: -1;
	}
	
}


.woocommerce, .woocommerce-page {
	overflow-x: hidden;
	
	main {
		max-width: 1350px !important;
		margin: 0 auto !important;
	}	
	.header__top {
		.wp-block-button__link.has-primary-background-color {
		    border-bottom-left-radius: 35px;
		    border-bottom-right-radius: 0 !important;
		    border-top-left-radius: 0 !important;
		    border-top-right-radius: 0 !important;
		    padding-bottom: 12px;
		    padding-top: 10px;
		    color:  var(--wp--preset--color--white) !important;
		}
		.wp-block-button__link.has-secondary-background-color {
		    border-bottom-right-radius: 35px;
		    border-top-left-radius: 0 !important;
		    border-top-right-radius: 0 !important;
		    border-bottom-left-radius: 0 !important;
		    padding-bottom: 12px;
		    padding-top: 10px;
		    color:  var(--wp--preset--color--white) !important;
		}
		.wp-block-button__link img {
			max-height: 18px;
			margin-right: 8px;
		}
		.mini-cart img {
			margin-right: 0;
		}
	}
	
	.footer__row {
		.menu-footer-solutions-container,
		.menu-resources-container,
		.menu-who-we-can-helo-container,
		.menu-business-sectors-container {
			margin-top: 10px !important;
			
			ul {
				list-style: none !important;
				padding: 0 !important;
			}
			
			a {
				color: var(--wp--preset--color--white) !important;
			}
		}
	}
	.template-footer {
		.wp-block-social-links {
			margin-top: 10px !important;
		}
		.wp-block-gallery {
			max-width: 140px !important;
			gap: 10px !important;
			
			figure {
				width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
			}
		}
	}
	
	
	@media screen and (max-width: 1350px) and (min-width: 768px) {
		.product-image-col {
			max-width: 30%;
		}
		.product-details-col {
			width: 70%;
		}
	}
	@media screen and (max-width: 767px) {
		.product-image-col {
			max-width: 200px;
			margin: 0 auto;
		}
		.product-details-col {
			max-width: 100%;
		}
	}
	
}


.woocommerce-checkout, .woocommerce-order-received {
	.wc-item-meta {
		strong {
			display: none !important;
		}
	}
	thead {
		display: none !important;
	}
	table, .wp-block-woocommerce-order-confirmation-billing-wrapper {
		background-color: var(--wp--preset--color--tertiary-green-tint-10) !important;
		border: 0 !important;
		border-radius: 5px !important;
		
		* {
			vertical-align: top !important;
			border: 0 !important;
		}
		.product-remove {
			padding: 30px 0 0 15px !important;
		}
		.product-thumbnail {
		
			img {
				width: 60px !important;
				border-radius: 3px !important;
				border: 1px solid var(--wp--preset--color--primary) !important;
				background-color: var(--wp--preset--color--white) !important;
			}
		}
		.product-name {
			font-weight: var(--wp--custom--typography--font-weight--bold);
		}
		.product-name:not(:last-child) {
			padding: 15px 25px;
			border-bottom: 2px solid var(--wp--preset--color--primary) !important;
		}
		.custom-cart-meta li {
			font-weight: var(--wp--custom--typography--font-weight--normal);
		}
		.custom-cart-meta li:marker {
			color: var(--wp--preset--color--tertiary) !important;
		}
		.product-price {
			min-width: 120px;
			font-weight: var(--wp--custom--typography--font-weight--bold);
		}
	}
	.wp-block-woocommerce-order-confirmation-billing-wrapper {
		padding: 25px;
		background-color: var(--wp--preset--color--primary-light-blue-tint-20) !important;
		
		.wp-block-heading {
			margin-bottom: 10px !important;
		}
		.wp-block-woocommerce-order-confirmation-billing-address {
			padding: 0 !important;
		}
	}
	.wc-block-order-confirmation-totals__product {
		text-transform: capitalize;

		a {
			font-weight: var(--wp--custom--typography--font-weight--bold);
		}
	}
	#order_review {
				
		table {
			width: 100% !important;
			
			.product-name:not(:last-child) {
				padding: 15px 25px;
				border-bottom: 0 solid var(--wp--preset--color--primary) !important;
			}
		}
	}
	.add-more-checks-button {
		.button {
			border-radius: 100px !important;
			padding: 16px 22px !important;
			border: 2px solid var(--wp--preset--color--primary);
			font-weight: var(--wp--custom--typography--font-weight--bold);
		}
		.button:hover, .button:focus, .button:active {
			background-color: transparent !important;
			color: var(--wp--preset--color--primary) !important;
		}
	}
	.form-row {
		input, select, textarea, .select2-selection {
			border: 1px solid var(--wp--preset--color--secondary) !important;
			font-size: var(--wp--preset--font-size--medium) !important;
			font-family: var(--wp--preset--font-family--heading);
		    line-height: var(--wp--custom--typography--line-height--headings);
		}
		button {
			border-radius: 100px !important;
			padding: 16px 22px !important;
			border: 2px solid var(--wp--preset--color--primary);
			font-weight: var(--wp--custom--typography--font-weight--bold);
		}
		button:hover, .button:focus, .button:active {
			background-color: transparent !important;
			color: var(--wp--preset--color--primary) !important;
		}
		label {
			margin-bottom: 0 !important;
			font-family: var(--wp--preset--font-family--heading);
		    font-weight: var(--wp--custom--typography--font-weight--bold);
		    line-height: var(--wp--custom--typography--line-height--headings);
		}
	}
	
	.wp-block-woocommerce-order-confirmation-status {
		margin-top: 50px;
		color: var(--wp--preset--color--primary) !important;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: var(--wp--custom--typography--font-weight--bold);
		line-height: var(--wp--custom--typography--line-height--headings);
	}
	.wc-backward {
		border-radius: 100px !important;
		padding: 16px 22px !important;
		border: 2px solid var(--wp--preset--color--primary);
		font-weight: var(--wp--custom--typography--font-weight--bold);
	}
	.wc-backward:hover, .wc-backward:focus, .wc-backward:active {
		background-color: transparent !important;
		color: var(--wp--preset--color--primary) !important;
	}
	.wp-block-woocommerce-order-confirmation-additional-information {
		display: none !important;
	}
}