/* ==========================================================================
   Turbo Reman Center: product grid and product card (shop, product page, Fuel Injectors),
   the "added to your cart" message and WooCommerce's notices
   WooCommerce's own loop markup: ul.products > li.product, rebuilt on its loop hooks (inc/shop.php).
   ========================================================================== */

/* Grid --------------------------------------------------------------------- */

/* Columns follow the room the grid has, not the window: two on phones, three beside the shop filters,
   four across a full container. */
.shop__main,
.bestsellers .container,
.related,
.upsells {
	container-type: inline-size;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 600px) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 18px;
	}
}

@container (min-width: 1000px) {
	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px 20px;
	}
}

/* Card --------------------------------------------------------------------- */

/* The shop photographs every part on the same dark backdrop, so the photo fills its frame edge to edge and
   the grid reads as one set. The name's link covers the whole card; the add-to-cart pill sits above it. */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	container-type: inline-size;
}

.product-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--c-dark-3);
	transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}

.product-card .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding-top: 14px;
}

.product-card__title {
	color: var(--c-ink);
	font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.3125rem);
	line-height: 1.12;
	letter-spacing: 0;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.product-card__link {
	color: inherit;
	text-decoration: none;
}

.product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-lg);
}

.product-card__link:focus-visible {
	outline: none;
}

.product-card__link:focus-visible::after {
	outline: 3px solid var(--c-red);
	outline-offset: 4px;
}

.product-card__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.product-card__figures {
	display: grid;
	align-content: start;
	gap: 2px;
	min-width: 0;
	/* Room for the price and the deposit line, so prices line up across a row with or without a deposit. */
	min-height: calc(1.5rem + 2px + 0.8125rem * 1.35);
}

.product-card__price {
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.product-card__price del {
	margin-right: 6px;
	color: var(--c-muted);
	font-size: 0.75em;
}

.product-card__price ins {
	text-decoration: none;
}

.product-card__note {
	color: var(--c-muted);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.product-card .stock {
	margin-top: 2px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.product-card .out-of-stock {
	color: var(--c-red-600);
}

.product-card .available-on-backorder {
	color: var(--c-muted);
}

/* Add to cart: the outline pill, a little smaller than a page button, above the card's link. */
.product-card__add {
	position: relative;
	z-index: 2;
	min-height: 44px;
	padding: 0.55em 1.15em;
	font-size: 0.9375rem;
}

.product-card__add .icon {
	width: 18px;
	height: 18px;
}

/* On a narrow card (two columns on a phone) the pill takes the full width under the price. */
@container (max-width: 239px) {
	.product-card__add {
		flex: 1 1 100%;
	}
}

.product-card__add.is-loading {
	cursor: progress;
}

.product-card__add.is-loading .icon {
	animation: trc-spin 0.8s linear infinite;
}

.product-card__add.is-added {
	--btn-bg: var(--c-ink);
	--btn-fg: var(--c-white);
	--btn-border: var(--c-ink);
}

@keyframes trc-spin {
	to {
		transform: rotate(1turn);
	}
}

.product-card:active .product-card__media {
	transform: scale(0.985);
}

.product-card:has(.product-card__add:active) .product-card__media {
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.product-card:hover .product-card__media {
		box-shadow: var(--shadow-1);
	}

	.product-card:hover .product-card__img {
		transform: scale(1.04);
	}

	.product-card:hover .product-card__title {
		color: var(--c-red-600);
	}

	.product-card__title {
		transition: color 0.15s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card__img,
	.product-card__media {
		transition: none;
	}

	.product-card:hover .product-card__img,
	.product-card:active .product-card__media {
		transform: none;
	}

	.product-card__add.is-loading .icon {
		animation-duration: 2.4s;
	}
}

/* "Added to your cart" --------------------------------------------------------- */

.cart-toast {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 14px;
	width: min(540px, calc(100% - 2 * var(--gutter)));
	padding: 10px 10px 10px 16px;
	border-radius: var(--radius);
	background: var(--c-dark);
	color: var(--c-on-dark);
	box-shadow: var(--shadow-pop);
	font-size: 0.9375rem;
	line-height: 1.4;
	translate: -50% 0;
	transition:
		opacity 0.2s var(--ease-out),
		transform 0.2s var(--ease-out),
		display 0.2s allow-discrete;
}

@starting-style {
	.cart-toast {
		opacity: 0;
		transform: translateY(10px);
	}
}

.cart-toast[hidden] {
	display: none;
	opacity: 0;
	transform: translateY(10px);
}

.cart-toast__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
}

.cart-toast__icon .icon {
	width: 18px;
	height: 18px;
}

.cart-toast__text {
	flex: 1;
	min-width: 0;
}

.cart-toast__text strong {
	color: var(--c-white);
	font-weight: 500;
}

.cart-toast__link {
	flex: none;
	min-height: 44px;
	padding: 0.5em 1.1em;
	font-size: 0.9375rem;
}

.cart-toast :focus-visible {
	outline-color: var(--c-white);
}

@media (prefers-reduced-motion: reduce) {
	.cart-toast {
		transition: opacity 0.2s ease, display 0.2s allow-discrete;
	}

	@starting-style {
		.cart-toast {
			transform: none;
		}
	}
}

/* The cart count in the header nods when something is added. */
.header-cart__count.is-bumped {
	animation: trc-bump 0.45s var(--ease-out);
}

@keyframes trc-bump {
	40% {
		transform: scale(1.3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-cart__count.is-bumped {
		animation: none;
	}
}

/* WooCommerce notices (added to the cart without JavaScript, errors) ------------ */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 18px;
	margin: 0 0 24px;
	padding: 12px 12px 12px 20px;
	border-radius: var(--radius);
	background: var(--c-surface);
	color: var(--c-ink);
	font-weight: 500;
	list-style: none;
}

.woocommerce-error {
	background: var(--c-red-50);
}

.woocommerce-error li + li {
	margin-top: 4px;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	display: inline-flex;
	order: 2;
	align-items: center;
	min-height: 44px;
	padding: 0.5em 1.2em;
	border: 2px solid var(--c-red);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-message .button:hover,
	.woocommerce-info .button:hover,
	.woocommerce-error .button:hover {
		background: var(--c-red);
		color: var(--c-white);
	}
}

/* Ordering notes and the call block (product page, cart, checkout) ------------------ */

.order-call {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding: 16px 20px;
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.order-call__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
}

.order-call__icon .icon {
	width: 22px;
	height: 22px;
}

.order-call__text {
	display: grid;
	gap: 2px;
	line-height: 1.3;
}

.order-call__label,
.order-call__hours {
	color: var(--c-muted);
	font-size: 0.875rem;
}

.order-call__phone {
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.05;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
	.order-call__phone:hover {
		color: var(--c-ink);
		text-decoration: underline;
		text-decoration-color: var(--c-red);
		text-underline-offset: 0.18em;
	}
}

.order-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 52ch;
	margin-top: 14px;
	color: var(--c-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.order-note .icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--c-ink);
}

.product-page .single_add_to_cart_button {
	flex: 1 1 160px;
	min-height: 56px;
	padding: 0.85em 1.9em;
	border: 2px solid var(--c-red);
	border-radius: var(--radius-pill);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.16s var(--ease-out);
}

.product-page .single_add_to_cart_button:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.product-page .single_add_to_cart_button:hover {
		border-color: var(--c-red-600);
		background: var(--c-red-600);
	}
}