/* Cart: mini cart drawer, Cart page, Checkout summary */

.ovf-ship,
.ovf-recs {
	--ovf-ink: var(--wp--preset--color--beverly, #113E23);
	--ovf-track: var(--wp--preset--color--hero-bg, #EEE1CF);
	--ovf-card: #fff;
	--ovf-muted: rgba(17, 62, 35, .62);
	color: var(--ovf-ink);
	font-family: var(--wp--preset--font-family--soleil, sans-serif);
}

.ovf-ship[hidden],
.ovf-recs[hidden] {
	display: none !important;
}

/* Free-shipping progress */

.ovf-ship {
	text-align: center;
}

.ovf-ship p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

.ovf-ship__message strong {
	font-weight: 600;
}

.ovf-ship__bar {
	height: 8px;
	margin-top: 12px;
	border-radius: 999px;
	background: var(--ovf-track);
	overflow: hidden;
}

.ovf-ship__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ovf-ink);
	transition: width .5s ease;
}

/* Recommendations */

.ovf-recs__title {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--bunyan-pro, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ovf-ink);
}

.ovf-recs__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ovf-recs__track::-webkit-scrollbar {
	display: none;
}

.ovf-rec {
	position: relative;
	display: grid;
	grid-template-columns: 88px 1fr auto;
	align-items: center;
	gap: 12px;
	flex: 0 0 86%;
	padding: 12px;
	border-radius: 12px;
	background: var(--ovf-card);
	scroll-snap-align: start;
}

.ovf-rec:only-child {
	flex-basis: 100%;
}

.ovf-rec__media {
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--vanilla, #FFFAF1);
}

.ovf-rec__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.ovf-rec__body {
	min-width: 0;
}

.ovf-rec__name {
	display: block;
	font-family: var(--wp--preset--font-family--bunyan-pro, serif);
	font-size: 16px;
	line-height: 1.25;
	color: var(--ovf-ink);
	text-decoration: none;
}

/* The whole card opens the product; the Add button sits above that link. */
.ovf-rec__name::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ovf-rec__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ovf-rec__tagline {
	margin: 2px 0 0;
	font-size: 13px;
	font-style: italic;
	line-height: 1.3;
	color: var(--ovf-muted);
}

.ovf-rec__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.3;
}

.ovf-rec__current {
	font-weight: 600;
}

.ovf-rec__price del {
	color: var(--ovf-muted);
}

.ovf-rec__add {
	position: relative;
	z-index: 1;
	min-width: 64px;
	padding: 9px 16px;
	border: 1px solid var(--ovf-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--ovf-ink);
	font: 600 13px/1 var(--wp--preset--font-family--soleil, sans-serif);
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.ovf-rec__add:hover,
.ovf-rec__add:focus-visible {
	background: var(--ovf-ink);
	color: #fff;
}

.ovf-rec__add.is-loading {
	opacity: .5;
	cursor: progress;
}

/* Mini cart drawer */

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-size: 24px;
}

.wc-block-mini-cart__drawer .ovf-ship {
	padding: 0 0 18px;
	/* The title block pulls the next block up by 32px. */
	margin: 40px var(--drawer-padding, 16px) 0;
	border-bottom: 1px solid var(--ovf-track);
}

@media (max-width: 480px) {
	.wc-block-mini-cart__drawer .ovf-rec {
		grid-template-columns: 64px 1fr auto;
		flex-basis: 90%;
		gap: 10px;
	}
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table {
	margin-bottom: 0;
}

.wc-block-mini-cart__drawer .ovf-recs {
	padding: 20px 0 8px;
	margin-top: 4px;
	border-top: 1px solid var(--ovf-track);
}

/*
 * Line items (mini cart, Cart page, Checkout summary): show the price once.
 * The unit price with the crossed-out regular price stays under the name,
 * the line total goes, and its "Save $X" badge becomes a savings line under
 * the price. The product cell is flattened with display: contents so the
 * total cell's badge can be placed between the price and the details.
 */
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 4px;
	align-items: start;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1 / span 5;
	padding: 0;
}

/* The Cart page table keeps table layout, which would shrink a grid row. */
.wp-block-woocommerce-cart table.wc-block-cart-items,
.wp-block-woocommerce-cart table.wc-block-cart-items :is(thead, tbody) {
	display: block;
	width: 100%;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header {
	display: flex;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: auto;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 100px minmax(0, 1fr);
	padding: 20px 0;
	border-top: 1px solid rgba(17, 62, 35, .2);
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row > td {
	border-top: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap,
.wc-block-components-order-summary .wc-block-components-order-summary-item :is(.wc-block-components-order-summary-item__description, .wc-block-components-order-summary-item__total-price, .wc-block-cart-item__total-price-and-sale-badge-wrapper) {
	display: contents;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row :is(.wc-block-cart-item__wrap > *, .wc-block-cart-item__total) {
	grid-column: 2;
	grid-row: auto;
	margin: 0;
	padding: 0;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	display: block;
	text-align: left;
}

.wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-name,
.wc-block-components-order-summary-item__description > .wc-block-components-product-name { order: 1; }
.wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__prices,
.wc-block-components-order-summary-item__description > .wc-block-cart-item__prices { order: 2; }
.wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-components-order-summary-item .wc-block-components-sale-badge { order: 3; }
.wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description > .wc-block-components-product-metadata { order: 4; }
.wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { order: 5; margin-top: 6px; }

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: block;
	text-align: left;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__total-price .wc-block-components-product-price,
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-total,
.wc-block-components-sale-badge[hidden] {
	display: none;
}

:is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge,
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge {
	display: inline;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #2f7a43;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
	justify-self: start;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--bunyan-pro, serif);
	font-size: 17px;
	line-height: 1.25;
	text-decoration: none;
}

/* Checkout summary: image | details, the details flattened as above. */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	display: grid;
	padding: 12px 0;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 2px;
	align-items: start;
}

.wc-block-components-order-summary-item__image {
	grid-row: 1 / span 4;
}

.wc-block-components-order-summary-item > :not(.wc-block-components-order-summary-item__image),
.wc-block-components-order-summary-item__description > *,
.wc-block-components-order-summary-item .wc-block-components-sale-badge {
	grid-column: 2;
	margin: 0;
}

/* Cart page */

.ovf-cart-upsells {
	display: grid;
	gap: 32px;
	margin-top: 24px;
}

/* On the Cart page the banner only nudges; once qualified, the totals say it. */
.ovf-ship--banner.is-qualified {
	display: none;
}

.ovf-ship--banner {
	padding: 20px 24px;
	border-radius: 12px;
	background: #fff;
}

.ovf-ship--banner .ovf-ship__message {
	font-size: 17px;
}

.ovf-recs--grid .ovf-recs__title {
	font-size: 24px;
}

.ovf-recs--grid .ovf-recs__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: visible;
}

.ovf-recs--grid .ovf-rec {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	align-items: start;
	padding: 16px;
	text-align: center;
}

.ovf-recs--grid .ovf-rec__price {
	justify-content: center;
}

.ovf-recs--grid .ovf-rec__add {
	width: 100%;
	padding: 13px 16px;
	background: var(--ovf-ink);
	color: #fff;
}

.ovf-recs--grid .ovf-rec__add:hover,
.ovf-recs--grid .ovf-rec__add:focus-visible {
	background: #0b2a18;
}

@media (max-width: 781px) {
	.ovf-recs--grid .ovf-recs__track {
		display: flex;
		overflow-x: auto;
	}

	.ovf-recs--grid .ovf-rec {
		flex: 0 0 62%;
	}
}