/**
 * Default product loop: the row.
 *
 * One grammar for every menu layout: [thumb] name + line | price | add.
 * Prices land in one aligned ink column per block, in the condensed display
 * face with tabular figures. Two columns on wide screens, one on phones.
 * Depends on css/foodmaster-tokens.css.
 */

/* Grid of rows. Column count follows the container's width, not the viewport,
   so a narrow column beside a sidebar folds to one column on its own. */
.wf-template-wrapper.wf-template-default-grid {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: calc(var(--fm-m) * 4);
	row-gap: 0;
	padding: 0;
	margin: 0;
	background: transparent;
}

.wf-template-wrapper.wf-template-default-grid.wf-template-columns-1 { grid-template-columns: minmax(0, 1fr); }
.wf-template-wrapper.wf-template-default-grid.wf-template-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-template-wrapper.wf-template-default-grid.wf-template-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-template-wrapper.wf-template-default-grid.wf-template-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wf-template-wrapper.wf-template-default-grid .wf-template-products {
	margin: 0;
	padding: 0;
	list-style: none;
	display: contents;
}

/* Row */
.wf-template-wrapper.wf-template-default-grid .wf-template-product {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas: "title price button";
	align-items: start;
	column-gap: calc(var(--fm-m) * 2);
	min-width: 0;
	margin: 0;
	padding: calc(var(--fm-m) * 1.5) 0;
	list-style: none;
	border-bottom: var(--fm-rule);
	color: var(--fm-black);
	position: relative;
}

/* Tags: the flyer's chips. Deal on yellow stock (the second ink), sold out outlined. */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > .product-tag,
.wf-template-wrapper .wf-template-product .product-tag {
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: var(--fm-m);
	padding: 3px 6px 2px;
	border: var(--fm-tag-border);
	border-radius: var(--fm-tag-radius);
	font-family: var(--fm-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: calc(0.06em * var(--fm-tracking));
	line-height: 1;
	text-transform: var(--fm-tag-caps);
	color: var(--fm-black);
	background: var(--fm-paper);
	white-space: nowrap;
	position: relative;
	top: -2px;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > .product-tag--deal,
.wf-template-wrapper .wf-template-product .product-tag--deal {
	background: var(--fm-ink-2);
	color: var(--fm-on-ink-2);
	border-color: var(--fm-tag-deal-border, var(--fm-black));
}

@container (max-width: 620px) {
	.wf-template-wrapper.wf-template-default-grid,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-2,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-3,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (min-width: 621px) and (max-width: 980px) {
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-3,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product.has-thumb {
	grid-template-columns: auto 1fr auto auto;
	grid-template-areas: "image title price button";
}

/* Thumbnail: small, square, keylined. Prints only when the product has one. */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image {
	grid-area: image;
	width: calc(var(--fm-m) * 7);
	height: calc(var(--fm-m) * 7);
	flex-shrink: 0;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--fm-radius);
	outline: 1px solid var(--fm-n2);
	outline-offset: -1px;
	background: var(--fm-n1);
}

/* Name and line */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
	grid-area: title;
	min-width: 0;
	font-size: 17px;
	line-height: 1.2;
	font-weight: 700;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: manual;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > span {
	display: inline;
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 20px;
	line-height: 1;
	letter-spacing: calc(0.005em * var(--fm-tracking));
	color: var(--fm-black);
	transition: color var(--fm-fast) var(--fm-ease);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product:hover .product-title > span {
	color: var(--fm-ink);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-short-descr {
	margin-top: 4px;
	max-width: 56ch;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-short-descr span {
	display: block;
	font-family: var(--fm-font-body);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--fm-n6);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-short-descr p {
	margin: 0;
}

/* Price column: the signature. Everything sits on one baseline. */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price {
	grid-area: price;
	align-self: start;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--fm-m);
	min-width: calc(var(--fm-m) * 8);
	padding-top: 1px;
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 20px;
	line-height: 1;
	color: var(--fm-price-ink);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
	text-align: end;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price .woocommerce-Price-amount,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price .woocommerce-Price-currencySymbol {
	color: inherit;
	font-weight: inherit;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price ins {
	display: inline;
	text-decoration: none;
	color: var(--fm-price-ink);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price del {
	display: inline;
	order: -1;
	font-family: var(--fm-font-body);
	font-weight: 500;
	font-size: 13px;
	color: var(--fm-n6);
	text-decoration: line-through;
}

/* Add control: a square outlined plus. The label lives in visually hidden text. */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button {
	grid-area: button;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .cart {
	margin: 0;
	display: flex;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .foodmaster-quickview-button,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button button {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--fm-m) * 4);
	height: calc(var(--fm-m) * 4);
	margin: 0;
	padding: 0;
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	box-shadow: none;
	color: var(--fm-black);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background var(--fm-fast) var(--fm-ease), border-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

/* The plus, drawn from the border colour */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button::before,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button:hover,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .foodmaster-quickview-button:hover,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button button:hover {
	background: var(--fm-ink);
	border-color: var(--fm-ink);
	color: var(--fm-on-ink);
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button:active {
	background: var(--fm-ink-hover);
	border-color: var(--fm-ink-hover);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button:focus-visible {
	box-shadow: var(--fm-focus);
	outline: none;
}

/* Added state: the control fills with ink and shows a count */
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button.added,
.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button.loading {
	background: var(--fm-ink);
	border-color: var(--fm-ink);
	color: var(--fm-on-ink);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button.loading::before {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	background: transparent;
	animation: foodmaster-spin 0.8s linear infinite;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button.loading::after {
	display: none;
}

/* Unavailable: struck price, quiet name, no control */
.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable {
	pointer-events: none;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable .product-title > span,
.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable .product-price {
	color: var(--fm-n6);
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable .product-price {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable .product-button {
	visibility: hidden;
}

.wf-template-wrapper.wf-template-default-grid .wf-template-product.unavailable .product-image img {
	filter: grayscale(1);
	opacity: 0.6;
}

/* Phones: one column, slightly tighter */
@media screen and (max-width: 768px) {
	.wf-template-wrapper.wf-template-default-grid,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-1,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-2,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-3,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product {
		padding: calc(var(--fm-m) * 1.5) 0;
		column-gap: calc(var(--fm-m) * 1.5);
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > span {
		font-size: 19px;
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price {
		font-size: 19px;
		min-width: calc(var(--fm-m) * 7);
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image {
		width: calc(var(--fm-m) * 6);
		height: calc(var(--fm-m) * 6);
	}
}

/* Tablets: three and four column requests fold to two */
@media (min-width: 769px) and (max-width: 1100px) {
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-3,
	.wf-template-wrapper.wf-template-default-grid.wf-template-columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > span,
	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button .button {
		transition: none;
	}
}

@media print {
	.wf-template-wrapper.wf-template-default-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product {
		break-inside: avoid;
	}

	.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button {
		display: none;
	}
}

/* Long names and lines hyphenate in the page's language instead of breaking mid-word */
.wf-template-wrapper .wf-template-product .product-title,
.wf-template-wrapper .wf-template-product .product-short-descr {
	hyphens: auto;
	overflow-wrap: anywhere;
}

/* The add acknowledges itself: one pop when the row records an add */
.wf-template-wrapper .wf-template-product .product-button .button.added {
	animation: fm-add-pop var(--fm-base) var(--fm-ease) both;
}

@keyframes fm-add-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.14); }
	100% { transform: scale(1); }
}

/* WooCommerce's "View cart" link after an add is the bar's job */
.wf-template-wrapper .wf-template-product .product-button a.added_to_cart {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wf-template-wrapper .wf-template-product .product-button .button.added {
		animation: none;
	}
}