/**
 * Counter Display.
 *
 * The moves the token set cannot carry: a quiet grey ground with white
 * cards, prices in black, the accent reserved for the add action, pill
 * chips, 64px rounded photos on rows, and a lifted bottom bar. Scoped to
 * body.fm-style-counter and to any element carrying the class.
 */

/* Ground: the page is one step grey, every sheet sits on it as a white card */
body.fm-style-counter {
	background: var(--fm-paper-2);
}

.fm-style-counter.fm-style-counter .foodmaster-menu-layout,
.fm-style-counter.fm-style-counter .foodmaster-menu-container {
	background: transparent;
}

/* Cards: accordion sections, mini cart, modal, elements */
.fm-style-counter.fm-style-counter .foodmaster-accordion-item,
.fm-style-counter.fm-style-counter .foodmaster-mini-cart-wrapper,
.fm-style-counter.fm-style-counter .foodmaster-element-card,
.fm-style-counter.fm-style-counter .foodmaster-deal-combo,
.fm-style-counter.fm-style-counter .foodmaster-availability-modal,
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product {
	background: var(--fm-card);
	border: 0;
	border-radius: var(--fm-radius);
	box-shadow: var(--fm-card-shadow);
	overflow: hidden;
}

.fm-style-counter.fm-style-counter .foodmaster-accordion-item + .foodmaster-accordion-item {
	margin-top: calc(var(--fm-m) * 1.5);
}

.fm-style-counter.fm-style-counter .foodmaster-accordion-header {
	padding-left: calc(var(--fm-m) * 2);
	padding-right: calc(var(--fm-m) * 2);
	border-top: 0;
	border-bottom: 1px solid var(--fm-n2);
}

.fm-style-counter.fm-style-counter .foodmaster-accordion-item.is-collapsed .foodmaster-accordion-header,
.fm-style-counter.fm-style-counter .foodmaster-accordion-header[aria-expanded="false"] {
	border-bottom: 0;
}

.fm-style-counter.fm-style-counter .foodmaster-accordion-products,
.fm-style-counter.fm-style-counter .foodmaster-accordion-content {
	padding-left: calc(var(--fm-m) * 2);
	padding-right: calc(var(--fm-m) * 2);
}

/* Prices are black; the accent is spent on the add action */
.fm-style-counter.fm-style-counter .fm-price,
.fm-style-counter.fm-style-counter .product-price,
.fm-style-counter.fm-style-counter .product-price ins,
.fm-style-counter.fm-style-counter .product-price .woocommerce-Price-amount,
.fm-style-counter.fm-style-counter .foodmaster-modern-price,
.fm-style-counter.fm-style-counter .foodmaster-modern-price ins,
.fm-style-counter.fm-style-counter .foodmaster-mini-cart-item .item-price,
.fm-style-counter.fm-style-counter .foodmaster-mini-cart-subtotal .total-amount,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-total {
	color: var(--fm-black);
}

.fm-style-counter.fm-style-counter .product-price del,
.fm-style-counter.fm-style-counter .foodmaster-modern-price del {
	color: var(--fm-n6);
}

/* Rows: larger rounded photos, no hairline between name and price */
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product {
	padding-top: calc(var(--fm-m) * 1.5);
	padding-bottom: calc(var(--fm-m) * 1.5);
	border-bottom: 1px solid var(--fm-n1);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image,
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image img {
	width: 64px;
	height: 64px;
	border: 0;
	outline: 0;
	border-radius: var(--fm-image-radius);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-image img {
	object-fit: cover;
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > span {
	font-size: 1em;
	font-weight: 700;
}

/* The add control: round, filled with the accent, white glyph */
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button button,
.fm-style-counter.fm-style-counter .foodmaster-add-to-cart {
	width: 36px;
	height: 36px;
	background: var(--fm-ink);
	border-color: var(--fm-ink);
	border-radius: var(--fm-add-radius);
	color: var(--fm-on-ink);
	box-shadow: 0 2px 8px color-mix(in oklab, var(--fm-ink) 30%, transparent);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button::before,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button::after,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button::before,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button::after {
	background: var(--fm-on-ink);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button:hover,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button:hover,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button button:hover {
	background: var(--fm-ink-hover);
	border-color: var(--fm-ink-hover);
	transform: scale(1.04);
}

/* Tags: soft tinted pills */
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > .product-tag,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-tag,
.fm-style-counter.fm-style-counter .product-tag {
	border-color: transparent;
	border-radius: 999px;
	background: var(--fm-n1);
	color: var(--fm-n6);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title > .product-tag--deal,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-tag--deal,
.fm-style-counter.fm-style-counter .product-tag--deal {
	background: var(--fm-ink-tint);
	color: var(--fm-ink-hover);
	border-color: transparent;
}

/* Category chips come from the chip tokens; the strip sits on the ground */
.fm-style-counter.fm-style-counter .foodmaster-tabs-nav {
	gap: var(--fm-m);
	padding-top: var(--fm-m);
	padding-bottom: var(--fm-m);
	border-bottom: 0;
	background: var(--fm-paper-2);
}

/* Mini cart and sticky bar: white cards with the one shadow */
.fm-style-counter.fm-style-counter .foodmaster-mini-cart-header {
	border-bottom: 1px solid var(--fm-n2);
}

.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar {
	background: var(--fm-card);
	color: var(--fm-black);
	border-top: 1px solid var(--fm-n2);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}

.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-info,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-count,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .foodmaster-sticky-toggle {
	color: var(--fm-black);
}

.fm-style-counter.fm-style-counter .foodmaster-cart-button,
.fm-style-counter.fm-style-counter .foodmaster-element-button,
.fm-style-counter.fm-style-counter .single_add_to_cart_button,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .foodmaster-cart-button.checkout-sticky {
	border-radius: var(--fm-control-radius);
}

/* Modal: rounded sheet, hairline rules */
.fm-style-counter.fm-style-counter .foodmaster-modern-modal-container {
	border: 0;
	border-radius: var(--fm-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.fm-style-counter.fm-style-counter .foodmaster-modern-modal-header,
.fm-style-counter.fm-style-counter .foodmaster-modal-cart-form {
	border-color: var(--fm-n2);
}

.fm-style-counter.fm-style-counter .foodmaster-modern-image-section img {
	border-radius: 0;
}

.fm-style-counter.fm-style-counter .foodmaster-qty-btn,
.fm-style-counter.fm-style-counter .foodmaster-quantity-btn,
.fm-style-counter.fm-style-counter .modern-qty-input,
.fm-style-counter.fm-style-counter .foodmaster-quantity-controls {
	border-radius: var(--fm-control-radius);
	border-color: var(--fm-n3);
}

/* Theme shell: a white bar with a hairline, no ink fill */
.fm-style-counter.fm-style-counter .modern-header {
	border-bottom: 1px solid var(--fm-n2);
}

@media (prefers-reduced-motion: reduce) {
	.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button:hover,
	.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button:hover {
		transform: none;
	}
}

/* Narrow screens: the photo keeps its column, price and add control stack at the right */
@media (max-width: 480px) {
	.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product.has-thumb {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas: "image title price" "image title button";
		align-items: start;
	}

	.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product.has-thumb .product-image,
	.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product.has-thumb .product-image img {
		width: 56px;
		height: 56px;
	}

	.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-price {
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		min-width: 0;
	}

	.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-button {
		justify-self: end;
		margin-top: 6px;
	}
}

/* The accent is spent on "add": no ink rule under the open head, no ink in store hours */
.fm-style-counter.fm-style-counter .foodmaster-accordion-item.active .foodmaster-accordion-header {
	box-shadow: inset 0 -1px 0 var(--fm-n2);
}

.fm-style-counter.fm-style-counter .foodmaster-accordion-item.active .foodmaster-accordion-header:focus-visible,
.fm-style-counter.fm-style-counter .foodmaster-accordion-header:focus-visible {
	box-shadow: var(--fm-focus), inset 0 -1px 0 var(--fm-n2);
}

.fm-style-counter.fm-style-counter .foodmaster-store-hours .foodmaster-status-open,
.fm-style-counter.fm-style-counter .foodmaster-status-open {
	background: var(--fm-n1);
	color: var(--fm-black);
}

/* The photo card: picture on top at 4:3, one idea per card */
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: var(--fm-radius);
	background: var(--fm-card);
	box-shadow: var(--fm-card-shadow);
	overflow: hidden;
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-image img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	outline: 0;
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .card-content {
	min-height: 0;
	padding: calc(var(--fm-m) * 1.5) calc(var(--fm-m) * 2) calc(var(--fm-m) * 2);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-short-descr {
	display: block;
	color: var(--fm-n6);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-footer {
	padding-top: calc(var(--fm-m) * 1.5);
}

.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-button button,
.fm-style-counter.fm-style-counter .wf-template-wrapper.wf-template-card .wf-template-product .product-button .button {
	width: 40px;
	height: 40px;
}

/* WooCommerce blocks under Counter: soft corners, the one accent */
.fm-style-counter.fm-style-counter .wc-block-components-sale-badge,
.fm-style-counter.fm-style-counter .wc-block-components-product-badge {
	border-radius: var(--fm-chip-radius);
	border-color: transparent;
	background: var(--fm-ink-tint);
	color: var(--fm-ink-hover);
}

.fm-style-counter.fm-style-counter .wc-block-components-button,
.fm-style-counter.fm-style-counter .wc-block-components-checkout-place-order-button,
.fm-style-counter.fm-style-counter .woocommerce .button,
.fm-style-counter.fm-style-counter .wc-block-components-text-input input,
.fm-style-counter.fm-style-counter .wc-block-components-select select,
.fm-style-counter.fm-style-counter .wc-block-components-textarea textarea {
	border-radius: var(--fm-control-radius);
}

.fm-style-counter.fm-style-counter .wc-block-components-text-input input,
.fm-style-counter.fm-style-counter .wc-block-components-select select,
.fm-style-counter.fm-style-counter .wc-block-components-textarea textarea {
	border-radius: calc(var(--fm-radius) * 0.75);
}

/* The bar's numbers follow the bar, not the flyer's black bar */
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-total,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-total .woocommerce-Price-amount,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar .cart-total .woocommerce-Price-currencySymbol {
	color: var(--fm-bar-total);
}

.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar.is-empty .cart-total,
.fm-style-counter.fm-style-counter .foodmaster-sticky-cart-bar.is-empty .cart-total .woocommerce-Price-amount {
	color: var(--fm-n6);
}

/* Stepper: one pill, the input square inside it */
.fm-style-counter.fm-style-counter .modern-quantity-wrapper,
.fm-style-counter.fm-style-counter .foodmaster-cart-row .quantity {
	border-radius: var(--fm-control-radius);
	overflow: hidden;
}

.fm-style-counter.fm-style-counter .modern-quantity-wrapper .modern-qty-input,
.fm-style-counter.fm-style-counter .modern-quantity-wrapper input.qty,
.fm-style-counter.fm-style-counter .foodmaster-quantity-controls .modern-qty-input {
	border-radius: 0;
}

/* The add fills from the centre on press, then pops once when the row records it */
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .button:active,
.fm-style-counter.fm-style-counter .wf-template-wrapper .wf-template-product .product-button .foodmaster-quickview-button:active {
	transform: scale(0.92);
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--fm-ink) 18%, transparent);
	transition: transform 120ms var(--fm-ease), box-shadow 120ms var(--fm-ease);
}

/* Theme shell: a white bar with a hairline and pill controls */
.fm-style-counter.fm-style-counter .modern-header,
.fm-style-counter.fm-style-counter .site-header.modern-header {
	background: var(--fm-card);
	color: var(--fm-black);
	border-bottom: 1px solid var(--fm-n2);
}

.fm-style-counter.fm-style-counter .modern-header .header-actions .button,
.fm-style-counter.fm-style-counter .modern-header .search-toggle,
.fm-style-counter.fm-style-counter .modern-header .cart-link,
.fm-style-counter.fm-style-counter .modern-header .menu-toggle,
.fm-style-counter.fm-style-counter .modern-header .header-cta,
.fm-style-counter.fm-style-counter .modern-header .order-now-button {
	border-radius: var(--fm-control-radius);
	border-color: var(--fm-n3);
}

.fm-style-counter.fm-style-counter .modern-header .header-cta,
.fm-style-counter.fm-style-counter .modern-header .order-now-button {
	background: var(--fm-ink);
	border-color: var(--fm-ink);
	color: var(--fm-on-ink);
}

/* WooCommerce shells: soft controls, no caps, visible focus */
.fm-style-counter.fm-style-counter .foodmaster-order-type-toggle,
.fm-style-counter.fm-style-counter .foodmaster-order-type-toggle button,
.fm-style-counter.fm-style-counter .foodmaster-order-type-option,
.fm-style-counter.fm-style-counter .wc-block-components-radio-control__option,
.fm-style-counter.fm-style-counter .wc-block-components-quantity-selector {
	border-radius: var(--fm-control-radius);
}

.fm-style-counter.fm-style-counter .wc-block-components-button:focus-visible,
.fm-style-counter.fm-style-counter .wc-block-components-checkout-place-order-button:focus-visible,
.fm-style-counter.fm-style-counter .wc-block-components-text-input input:focus,
.fm-style-counter.fm-style-counter .wc-block-components-select select:focus,
.fm-style-counter.fm-style-counter .wc-block-components-textarea textarea:focus {
	outline: none;
	box-shadow: var(--fm-focus);
}

/* The sheet lifts: shadow deepens as it settles, nothing snaps */
.fm-style-counter.fm-style-counter .foodmaster-modern-modal-container {
	animation: fm-sheet-in var(--fm-slow) var(--fm-ease-out, var(--fm-ease)) both, fm-counter-lift var(--fm-slow) var(--fm-ease-out, var(--fm-ease)) both;
}

.fm-style-counter.fm-style-counter .foodmaster-modern-modal.is-closing .foodmaster-modern-modal-container {
	animation: fm-sheet-out var(--fm-fast) var(--fm-ease-out, var(--fm-ease)) both;
}

@keyframes fm-counter-lift {
	from { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
	to { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18); }
}