/**
 * Cart & Checkout
 */

/* added to cart message */
.woocommerce .woocommerce-message::after {
	display: none;
}

/* Cart */

.woocommerce-cart-wrapper {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--gutter);
	padding: var(--side-padding);
	margin-block-end: 4rem;
	flex-wrap: wrap;

	@media (width <= 768px) {
		grid-template-columns: auto;
	}


	:where(dl > div) {
		display: flex;
		gap: 1ch;
	}

	dl dd, dl.variation, dl.cart-item__meta {
		margin: 0; /* unset woocommerce */
	}

	dt::after {
		content: ':';
	}
}

.cart {
	display: block;
}

table.cart .cart_item :is(th, td) { /* woocommerce */
	padding-inline: 0;
	padding-block: 1rem;
}

table.cart td.product-quantity fl-number-controls .qty {
	max-width: none;
	width: 7em; /*  storefront again :( */
    padding: 0.375rem;
}


table.shop_table_responsive tr td[data-title]::before {
	display: none;
	content: "";
}
table.shop_table_responsive tr td.product-subtotal[data-title]::before {
	display: block;
	content: attr(data-title) ": ";
}

.cart .product-subtotal {
	display: flex;
	flex-direction: column;
}


.shop_table > :where(div) {
	padding-block-end: 0.5em;	
}

.woocommerce-shipping-totals {
	flex-direction: column;
	padding-block: 0;
	gap: 0;

	> dt {
		padding-block-end: .5em;
	}

	> dd {
		padding-inline-start: .5em;
		padding-block: .5em;
	}
}

.woocommerce-cart-form,  .cart_totals {
	border-radius: var(--radius-card);
    box-shadow: 1px 1px 10px 0px var(--shadow-card);
	height: fit-content;
	padding: 1rem;
}

.product-remove > a{
	font-size: 0.7em;
	color: inherit;
}

.cart-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.cart > tbody {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 0.5rem;
}

.cart_item {
	display: flex;
	gap: 1rem;

	:is(th, td, #foo) { /* woocommerce */
		padding: 0;
		text-align: left;
		background: none;
		padding-block: 1rem;
	}

	.product-name.product-name  {
		flex-grow: 1;

		/* these need to be unset or the width explodes on chrome */
		overflow-wrap: unset;
		word-break: unset;
	}
}

.cart_item .product-thumbnail {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	height: 100%;
	aspect-ratio: 1;

	img.attachment-woocommerce_thumbnail {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
	}

}

@media (max-width: 769px) {


	.cart_totals {
		width: fit-content;
	}

	.cart > tbody {
		grid-auto-rows: auto;
		gap: 2.5rem;
		padding-top: 1.5rem;
	}


	.cart_item {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-auto-flow: column;
		column-gap: 1rem;
		row-gap: 0;

		.product-thumbnail,
		.product-quantity {
			grid-column: 1;
		}

		.product-name,
		.product-subtotal {
			grid-column: 2;
		}

		.product-thumbnail {
			grid-row: span 2;
			aspect-ratio: unset;
		}

		.product-quantity {
			margin-top: 1rem;
		}

		:is(td,th, #foo) {
			padding-block: 0;
		}


	}
}

.woocommerce-shipping-totals dt {
	border-bottom: 1px solid color-mix(in srgb,currentColor 20%,transparent);
}

.order-total {
	font-size: var(--wp--preset--font-size--medium, 22px);
	border-top: 1px solid color-mix(in srgb,currentColor 20%,transparent);
	padding-block-start: 0.5em;
}

.tax-total > dt:not(:has(+ dd > .amount)) {
	display: none;
}


/* cart cross-sells */


.cart-collaterals .cross-sells { /* unset woocommerce */
	width: initial;
	float: none;
	margin-right: 0;
}

.cross-sells {
	padding: var(--side-padding);
}

.cross-sells .product-loop {
	--cols: 4;


	display: grid;
	grid-template-columns:  repeat(auto-fit, minmax(260px, max-content) );
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: var(--gutter);
	

	@media (max-width: 1250px) {--cols: 3;}
	@media (max-width: 768px) {--cols: 2;}
	@media (max-width: 576px) {--cols: 1;}
}




/* review-order */

/* php checkout template
.checkout.woocommerce-checkout {
	max-width: none;
}
.checkout.woocommerce-checkout::before,
.checkout.woocommerce-checkout::after {
	content: unset;
}


.checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
		gap: var(--gutter);
	padding: var(--side-padding);
}
.checkout__customer-details {
	border-radius: var(--radius-card);
    box-shadow: 1px 1px 10px 0px var(--shadow-card);
	height: fit-content;
	padding: 1rem;
}


#main :is(#order_review_heading, #order_review) {
	width: initial;
    float: none;
    clear: initial;
}

.woocommerce-checkout-review-order {
	border-radius: var(--radius-card);
    box-shadow: 1px 1px 10px 0px var(--shadow-card);
	height: fit-content;
	padding: 1rem;
	min-width: 350px;

	:where(dl > div) {
		display: flex;
		gap: 1ch;
	}

	:where(dt, dd) {
		margin: 0;
	}

	dt::after {
		content: ':';
	}

}

.cart-product-list {
	margin: 0;
}

.cart-product dd {
	margin: 0;
}

.cart-product {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr;
}

.cart-product__thumbnail img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	max-width: none;
}

*/


/* Checkout/Cart Typography */
/* Setting these variables here bc it's not clear from the mockup and will likely need to adjust later :) */

:root :where(.woocommerce-cart-wrapper, .cart-collaterals, .woocommerce-checkout, .wp-block-woocommerce-checkout) {
	--cart-font-heading-1: var(--section-header-weight) normal var(--section-header-size)/var(--section-header-height)  var(--header-font);
	--cart-font-heading-3: var(--accent-header-weight) normal var(--accent-header-size)/var(--accent-header-height)  var(--accent-font);
    --cart-font-body: 400 normal 1rem/1.375rem 'Source Sans Pro';
}

.woocommerce-cart-wrapper {
	font: var(--cart-font-body);
	color: var(--clr-text);
}

.woocommerce-cart-header, 
.cross-sells > h2 {
	font: var(--cart-font-heading-1);
	margin: 0;
	color: var(--clr-text);
}

.cart-totals__header, 
.checkout-order-review__heading {
	font: var(--cart-font-heading-3);
	margin: 0;
	color: var(--clr-text);
	font-family: var(--header-font);
}

.product-name > a, 
.cart .product-subtotal::before {
	color: var(--clr-text);
	font-weight: 600;
}

 /* replicates the hyperlonk behavior */
.product-name > a {
	text-decoration: none;
	background-image: linear-gradient(var(--action-green), var(--action-green));
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;

	transition: 0.25s ease;

	&:hover {
		background-size: 100% 100%;
		color: var(--clr-white);
	}
}

:is(.woocommerce-cart-wrapper, .woocommerce-checkout-review-order) .woocommerce-Price-amount.amount > bdi {
	font-weight: var(--body-weight);
}	

.cart-product__name {
	font: var(--cart-font-body);
	color: var(--clr-text);
	font-weight: 600;
}

.cart-item__meta {
	font-size: .875em;
}

.cart-type-selector {
	margin-block-end: var(--gutter);
}

/* cart icon tiles */

.shortcode-block--cart {
	padding: 0;
}

.cart-icon-tiles {
	--cols: 4;

	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	padding: var(--side-padding);
	gap: var(--gutter);
	text-align: center;
	justify-items: center;
	margin-block-start: 100px;
	margin-block-end: 4rem;

	@media(max-width: 768px) {
		--cols: 2;
		max-width: fit-content;
		margin: auto;
	}
}

.cart-icon-tiles__text {
	font: var(--font-copy);
	font-weight: 600;
	color: var(--clr-text);
}

.cart-icon-tiles__img {
	width: 120px;
  	aspect-ratio: 1;
	object-fit: contain;
}

/**
 * End Cart & Checkout
 */

/** 
 * Quote Request Cart 
 */

.woocommerce-cart-wrapper.addify-quote-form {
	grid-template-columns: min(100%, 60rem);
}

.af_quote_fields {
	flex: 100% 1 1;
}

.woocommerce-cart-form--quote-fields {
	flex-basis: 100%;
}

.quote-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
	background: none;

	.quote-field {
		flex: 1 1 40%;
	}

	.quote-field--full_width {
		flex-basis: 100%;
	}

	.quote-field--half_width {

	}

	input, select {
		width: 100%;
	}
}

table.addify-quote-form__contents .product-thumbnail {
	width: auto;
}

button.addify_checkout_place_quote {
	float: unset;
}

.woocommerce-cart-form .quote-fields {
	padding: 0;
}