/*
 * FoodFlow component boundary
 *
 * FoodFlow owns the controls inside its application surfaces. This file is
 * loaded after the storefront styles so theme, builder and WooCommerce rules
 * cannot replace the visual contract of an atomic component.
 */

.uff-app button,
.uff-app input,
.uff-app select,
.uff-app textarea,
.uff-checkout-page button,
.uff-checkout-page input,
.uff-checkout-page select,
.uff-checkout-page textarea,
.uff-product-page button,
.uff-product-page input,
.uff-product-page select,
.uff-product-page textarea {
	font-family: var(--uff-font-body, Raleway, sans-serif) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.uff-app button,
.uff-product-page button {
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* The compact order configurator owns the delivery address. WooCommerce keeps
 * the native fields in the form for validation/order persistence, but the
 * customer must see one address editor only. */
.uff-checkout-page .uff-context-owned-field {
	display: none !important;
}

.uff-checkout-page .uff-service-hidden {
	display: none !important;
}

/* Catalog toolbar */
.uff-app .uff-catalog-toolbar {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: stretch !important;
	gap: 10px !important;
	min-height: 52px !important;
}

.uff-app .uff-catalog-toolbar__search {
	display: flex !important;
	align-items: center !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 12px 0 16px !important;
	border: 1px solid var(--uff-color-border, #e5eaf0) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__input {
	display: block !important;
	width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--uff-color-text, #253e66) !important;
	font-size: 15px !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__icon {
	display: flex !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
	color: var(--uff-color-text-light, #64748b) !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__clear {
	display: flex !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--uff-color-text-light, #64748b) !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__clear[hidden] {
	display: none !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__input:placeholder-shown + .uff-search__clear {
	display: none !important;
}

.uff-app .uff-catalog-toolbar__search .uff-search__clear:hover,
.uff-app .uff-catalog-toolbar__search .uff-search__clear:focus {
	background: #f1f4f7 !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-catalog-toolbar__filter {
	display: inline-flex !important;
	width: auto !important;
	min-width: 148px !important;
	height: 52px !important;
	min-height: 52px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--uff-color-border, #e5eaf0) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--uff-color-primary, #253e66) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.uff-app .uff-catalog-toolbar__filter:hover,
.uff-app .uff-catalog-toolbar__filter[aria-expanded="true"] {
	border-color: var(--uff-color-primary, #253e66) !important;
	background: #f5f8fb !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-catalog-toolbar__panel {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.uff-app .uff-catalog-toolbar__panel-head button {
	display: inline-flex !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--uff-color-primary, #253e66) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
}

/* The Button atom must win over theme and builder button rules on every
 * FoodFlow surface. Consumers may add a modifier class, never restyle it
 * accidentally through a generic `button` selector. */
.uff-app .uff-button,
.uff-product-page .uff-button,
.uff-checkout-page .uff-button,
.uff-wrap .uff-button {
	display: inline-flex !important;
	width: auto !important;
	min-width: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	box-sizing: border-box !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	font-family: var(--uff-font-body, Raleway, sans-serif) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	transform: none;
}

.uff-app .uff-button--primary,
.uff-product-page .uff-button--primary,
.uff-checkout-page .uff-button--primary,
.uff-wrap .uff-button--primary {
	height: 44px !important;
	padding: 0 22px !important;
	border-color: var(--uff-color-primary, #253e66) !important;
	background: var(--uff-color-primary, #253e66) !important;
	color: #fff !important;
}

.uff-app .uff-button--primary:hover,
.uff-app .uff-button--primary:focus,
.uff-product-page .uff-button--primary:hover,
.uff-product-page .uff-button--primary:focus,
.uff-checkout-page .uff-button--primary:hover,
.uff-checkout-page .uff-button--primary:focus,
.uff-wrap .uff-button--primary:hover,
.uff-wrap .uff-button--primary:focus {
	border-color: var(--uff-color-primary-hover, #355586) !important;
	background: var(--uff-color-primary-hover, #355586) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
}

.uff-app .uff-button--outline,
.uff-product-page .uff-button--outline,
.uff-checkout-page .uff-button--outline,
.uff-wrap .uff-button--outline {
	border-color: rgba(37, 62, 102, .22) !important;
	background: #fff !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-button--outline:hover,
.uff-app .uff-button--outline:focus,
.uff-product-page .uff-button--outline:hover,
.uff-product-page .uff-button--outline:focus,
.uff-checkout-page .uff-button--outline:hover,
.uff-checkout-page .uff-button--outline:focus,
.uff-wrap .uff-button--outline:hover,
.uff-wrap .uff-button--outline:focus {
	border-color: var(--uff-color-primary, #253e66) !important;
	background: #f7faff !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-button--secondary,
.uff-product-page .uff-button--secondary,
.uff-checkout-page .uff-button--secondary,
.uff-wrap .uff-button--secondary {
	border-color: transparent !important;
	background: #f2f5f8 !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-button--sm,
.uff-product-page .uff-button--sm,
.uff-checkout-page .uff-button--sm,
.uff-wrap .uff-button--sm {
	height: 36px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
}

.uff-app .uff-button--md,
.uff-product-page .uff-button--md,
.uff-checkout-page .uff-button--md,
.uff-wrap .uff-button--md {
	height: 44px !important;
}

.uff-app .uff-button--lg,
.uff-product-page .uff-button--lg,
.uff-checkout-page .uff-button--lg,
.uff-wrap .uff-button--lg {
	height: 50px !important;
	padding: 0 28px !important;
	font-size: 15px !important;
}

.uff-app .uff-button--block,
.uff-product-page .uff-button--block,
.uff-checkout-page .uff-button--block,
.uff-wrap .uff-button--block {
	display: flex !important;
	width: 100% !important;
}

/* The pagination CTA is a Button atom, too. */
.uff-app .uff-catalog-tools-more,
.uff-app .uff-catalog-load-more {
	display: inline-flex !important;
	width: max-content !important;
	min-width: 0 !important;
	margin: 28px auto 0 !important;
}

.uff-app .uff-cart-toggle .uff-button,
.uff-app .uff-product-search-result .uff-cart-toggle .uff-button {
	width: 100% !important;
}

/* Compact search result */
.uff-app .uff-product-search-result__media,
.uff-app .uff-product-search-result__info,
.uff-app .uff-product-search-result__add {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	text-transform: none !important;
}

.uff-app .uff-product-search-result__media {
	display: flex !important;
	width: 76px !important;
	height: 76px !important;
	min-width: 76px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #eef2f5 !important;
	box-shadow: none !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-app .uff-product-search-result__info {
	display: grid !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	align-items: start !important;
	justify-items: start !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--uff-color-text, #253e66) !important;
	text-align: left !important;
}

.uff-app .uff-product-search-result__info strong {
	color: var(--uff-color-text, #253e66) !important;
	font-size: 14px !important;
	font-weight: 750 !important;
}

.uff-app .uff-product-search-result__add {
	display: inline-flex !important;
	width: auto !important;
	height: 32px !important;
	min-height: 32px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--uff-color-primary, #253e66) !important;
	border-radius: 999px !important;
	background: var(--uff-color-primary, #253e66) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
}

/* Product pages consume the same atoms as the modal. */
.uff-product-page .uff-product-badges,
.uff-product-single .uff-product-badges {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	min-height: 25px !important;
	overflow: visible !important;
}

.uff-product-page .uff-product-badge,
.uff-product-single .uff-product-badge {
	display: inline-flex !important;
	width: auto !important;
	max-width: 180px !important;
	min-height: 25px !important;
	align-items: center !important;
	padding: 5px 9px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #f2f5f7 !important;
	box-shadow: none !important;
	color: #526177 !important;
	font-size: 11px !important;
	font-weight: 750 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.uff-product-page .uff-product-badge--vegetarian,
.uff-product-single .uff-product-badge--vegetarian,
.uff-product-page .uff-product-badge--vegan,
.uff-product-single .uff-product-badge--vegan,
.uff-product-page .uff-product-badge--gluten-free,
.uff-product-single .uff-product-badge--gluten-free { background: #edf8ef !important; color: #27623a !important; }
.uff-product-page .uff-product-badge--new,
.uff-product-single .uff-product-badge--new,
.uff-product-page .uff-product-badge--recommended,
.uff-product-single .uff-product-badge--recommended { background: #edf4ff !important; color: #294f83 !important; }
.uff-product-page .uff-product-badge[class*="--spice"],
.uff-product-single .uff-product-badge[class*="--spice"] { background: #fff1ed !important; color: #9b3f28 !important; }

.uff-product-single .uff-product-single__submit {
	display: inline-flex !important;
	min-height: 52px !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 !important;
	border: 1px solid var(--uff-color-primary, #253e66) !important;
	border-radius: 12px !important;
	background: var(--uff-color-primary, #253e66) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-weight: 800 !important;
}

.uff-product-single .uff-product-single__submit:hover,
.uff-product-single .uff-product-single__submit:focus {
	background: #1f3d66 !important;
	color: #fff !important;
}

.uff-product-archive .uff-card__action {
	display: inline-flex !important;
	min-height: 36px !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 14px !important;
	border: 1px solid var(--uff-color-primary, #253e66) !important;
	border-radius: 999px !important;
	background: var(--uff-color-primary, #253e66) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
}

.uff-product-archive .uff-card__action:hover { background: #fff !important; color: var(--uff-color-primary, #253e66) !important; }

/* Checkout controls keep the same atoms without changing WooCommerce totals. */
.uff-checkout-page .uff-order-flow button,
.uff-checkout-page .uff-checkout-card button,
.uff-checkout-page .uff-checkout-coupon button {
	font-family: var(--uff-font-body, Raleway, sans-serif) !important;
}

.uff-checkout-page .uff-legacy-order-noise { display: none !important; }

@media (max-width: 600px) {
	.uff-app .uff-catalog-toolbar { grid-template-columns: 1fr !important; }
	.uff-app .uff-catalog-toolbar__filter { width: 100% !important; }
	.uff-app .uff-product-search-result__media { width: 64px !important; height: 64px !important; min-width: 64px !important; }
}

/* Search inputs are type=search for accessibility, but the native browser
 * cancel affordance must not be rendered alongside the FoodFlow clear atom. */
.uff-app .uff-catalog-toolbar input[type="search"]::-webkit-search-cancel-button,
.uff-app .uff-catalog-toolbar input[type="search"]::-webkit-search-decoration {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Delivery Selector keeps the Showcase contract in the inline checkout. */
.uff-checkout-page .uff-order-flow--inline .uff-delivery-selector--flow .uff-delivery-selector__option.is-active .uff-delivery-selector__label {
	background: #f7faff !important;
	border-color: var(--uff-color-primary, #253e66) !important;
	color: var(--uff-color-text, #253e66) !important;
	box-shadow: 0 0 0 1px var(--uff-color-primary, #253e66), 0 7px 20px rgba(37, 62, 102, .08) !important;
}

.uff-checkout-page .uff-order-flow--inline .uff-delivery-selector--flow .uff-delivery-selector__option.is-active .uff-delivery-selector__name,
.uff-checkout-page .uff-order-flow--inline .uff-delivery-selector--flow .uff-delivery-selector__option.is-active .uff-delivery-selector__meta {
	color: var(--uff-color-text, #253e66) !important;
}

.uff-checkout-page .uff-order-flow--inline .uff-delivery-selector--flow .uff-delivery-selector__option.is-active .uff-delivery-selector__icon-box {
	background: color-mix(in srgb, var(--uff-color-primary, #253e66) 9%, #fff) !important;
	color: var(--uff-color-primary, #253e66) !important;
}

.uff-product-page .uff-product-badge .uff-chilli {
	display: block !important;
	width: 12px !important;
	height: 16px !important;
	flex: 0 0 12px !important;
	fill: #c50015 !important;
	stroke: none !important;
}

.uff-chilli-fallback {
	display: inline-block !important;
	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: -2px !important;
	white-space: nowrap !important;
}

/* Fallback for integrations that still emit the operational notice outside
 * the product composition. The canonical product context normally owns it. */
.uff-product-page .uff-service-notice {
	width: min(calc(100% - 40px), 1240px) !important;
	margin: 24px auto !important;
	border-radius: 18px !important;
	box-shadow: 0 10px 28px rgba(37, 62, 102, .055) !important;
}
.uff-product-single__summary>h1{font-size:clamp(30px,3vw,42px)!important;line-height:1.08!important;letter-spacing:-.03em!important}