/*
 * OrderFlock.com mobile layout - loaded last to override conflicts
 */
@media (max-width: 767px) {
	/* Full-bleed viewport - no side gutters (OrderFlock pixel match) */
	html, body.sf-body,
	.sf-app,
	.sf-drawer,
	.MuiDrawer-paper,
	.sf-drawer .container,
	.sf-drawer .container.relative,
	#sf-main,
	.sf-home-scroll,
	.of-mobile-home,
	.sf-menu-wrap,
	.of-menu-list,
	.category_menu,
	.sf-category-page,
	.sf-category-page-body {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	body.sf-body {
		padding: 0 !important;
		margin: 0 !important;
		/* clip not hidden — hidden forces overflow-y:auto and steals window scroll */
		overflow-x: clip !important;
		overflow-y: auto !important;
	}

	html:has(.sf-app.sf-has-sidebar),
	body.sf-body:has(.sf-app.sf-has-sidebar) {
		overflow: hidden !important;
	}

	.sf-app.sf-has-sidebar {
		overflow: hidden !important;
	}

	.sf-app {
		padding: 0 !important;
	}

	/* Full-width single column (not 41.6vw drawer) - works before .sf-mobile is added */
	.MuiDrawer-paper,
	.sf-drawer,
	.sf-mobile .MuiDrawer-paper,
	.sf-mobile .sf-drawer {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		height: auto !important;
		min-height: 100vh !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		border: none !important;
		border-right: none !important;
	}

	.sf-drawer .container,
	.sf-drawer .container.relative,
	.sf-mobile .sf-drawer .container,
	.sf-mobile .sf-drawer .container.relative {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		height: auto !important;
		padding: 0 !important;
	}

	.category_menu,
	.sf-mobile .category_menu {
		scroll-margin-top: 100px;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
	}

	.sf-menu-wrap,
	.sf-mobile .sf-menu-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 24px !important;
		background: #fff !important;
	}

	.of-mobile-hero,
	.sf-ssr-home,
	.sf-ssr-home-hero {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.sf-ssr-home {
		max-width: none !important;
	}

	.sf-of-item,
	.sf-mobile .sf-of-item {
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 14px 16px !important;
	}

	.categories_header,
	.sf-mobile .categories_header {
		/* Padding/chrome locked in storefront.css visual lock (16px) */
		margin: 0 !important;
		background: #f4f5f5 !important;
	}

	.categories_header .box-title,
	.sf-mobile .categories_header .box-title {
		padding: 0 !important;
		margin: 0 !important;
	}

	.sf-faq,
	.sf-mobile .sf-faq {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		border-top: 8px solid #f4f5f5 !important;
	}

	.sf-faq-head {
		padding: 16px 16px 8px !important;
		margin: 0 !important;
	}

	.sf-faq-list {
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.sf-faq-item {
		margin: 0 !important;
		border: none !important;
		border-bottom: 1px solid #eee !important;
		border-radius: 0 !important;
		background: #fff !important;
		overflow: hidden;
	}

	.sf-faq-item.is-open {
		border-color: #eee !important;
		background: #fff !important;
	}

	.sf-faq-q {
		padding: 14px 16px !important;
		background: #fff !important;
	}

	.sf-faq-a {
		padding: 0 16px 14px !important;
	}

	.of-powered,
	.sf-mobile .of-powered {
		text-align: center;
		font-size: 11px;
		color: var(--sf-muted, #5c5c5c);
		padding: 16px 16px 20px !important;
		margin: 0 !important;
		background: #f4f5f5 !important;
	}

	.sf-mobile .sf-connect-mobile {
		padding-bottom: 0 !important;
	}

	.sf-mobile .detail_header.sf-mobile-header {
		position: sticky !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 54px;
		z-index: 1000 !important;
		background: #fff !important;
		border-bottom: 1px solid #dee2e6;
		padding: 10px 14px !important;
		display: flex !important;
		align-items: center;
	}

	.sf-mobile .sf-topbar .header-button-cricle {
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		min-height: auto !important;
		min-width: auto !important;
	}

	.sf-mobile .sf-topbar-left,
	.sf-mobile .sf-topbar-right {
		gap: 10px;
	}

	.sf-mobile .sf-icon-btn {
		width: 36px;
		height: 36px;
	}

	/* Branch bar */
	.sf-mobile .sf-branch-bar {
		padding: 10px 16px 6px;
		background: #f4f5f5;
	}

	.sf-mobile .sf-branch-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #6c757d;
	}

	.sf-mobile .sf-branch-name {
		font-size: 15px;
		font-weight: 700;
		color: #000;
	}

	/* Store card + delivery button */
	.sf-mobile .sf-store-card {
		background: #fff;
	}

	.sf-mobile .sf-store-info {
		padding: 16px;
		min-height: 120px;
	}

	.sf-mobile .sf-store-logo {
		width: 64px;
		height: 64px;
		border: 1px solid #e0e0e0;
		border-radius: 6px;
		overflow: hidden;
		flex-shrink: 0;
		background: #fff;
	}

	.sf-mobile .sf-store-header-btn {
		padding: 14px 16px;
		gap: 12px;
		align-items: center;
	}

	.sf-mobile .sf-store-meta {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		text-align: left;
	}

	.sf-mobile .sf-store-name {
		font-size: 14px;
		line-height: 21px;
		font-weight: 400;
		color: #000;
		margin: 0;
		letter-spacing: 0;
		text-align: left;
		font-family: var(--sf-font, "Quicksand", "Cairo", sans-serif);
	}

	.sf-mobile .sf-store-tagline {
		font-size: 12.25px;
		line-height: 17.5px;
		color: rgba(0, 0, 0, 0.54);
		margin: 0;
		font-weight: 400;
		text-align: left;
	}

	.sf-mobile .sf-store-icons {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: flex-start;
	}

	.sf-mobile .sf-store-info-icon {
		flex-shrink: 0;
		align-self: center;
		margin-left: auto;
		color: #9e9e9e;
	}
	.sf-mobile .sf-store-info-icon svg {
		width: 22px;
		height: 22px;
	}

	.sf-mobile .sf-store-delivery {
		text-align: center;
		padding: 0 16px 16px;
		background: #fff;
		position: relative;
	}

	.sf-mobile .sf-store-delivery .menu-item {
		min-width: 140px !important;
		min-height: 44px !important;
		padding: 10px 28px !important;
		font-size: 14px !important;
		font-weight: 600;
	}

	.sf-mobile .sf-order-type-menu {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100%;
		margin-top: 4px;
		z-index: 60;
	}

	/* Location bar - OF Booking from ... edit (48px touch target) */
	.sf-mobile .sf-location-bar {
		background: #f4f5f5;
		border-top: 1px solid #dee2e6;
		border-bottom: 1px solid #dee2e6;
		padding: 12px 16px;
		min-height: 48px;
		box-sizing: border-box;
		font-size: 14px;
		align-items: center;
	}
	.sf-mobile button.sf-location-bar {
		width: 100%;
		border-left: none;
		border-right: none;
		font: inherit;
		text-align: left;
		cursor: pointer;
		color: inherit;
	}
	.sf-mobile .sf-booking-ico svg {
		width: 18px;
		height: 18px;
		color: #666;
	}
	.sf-mobile .sf-booking-label {
		color: #666;
		font-weight: 400;
	}
	.sf-mobile .sf-loc-name {
		font-weight: 600;
		color: #333;
	}
	.sf-mobile .sf-location-bar--pick .sf-loc-pick {
		margin-left: auto;
		font-weight: 700;
		color: #111;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		padding: 12px 4px 12px 12px;
		box-sizing: border-box;
	}
	.sf-mobile .sf-location-bar .sf-link.sf-pick-location {
		min-height: 48px;
		min-width: 48px;
		padding: 12px 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.sf-mobile .sf-link {
		color: #388e3c;
		font-weight: 600;
	}

	/* Filter row - live OF: bordered Filter & Sort + plain sort/list icons */
	.sf-mobile .sf-filter-row {
		padding: 10px 16px 14px;
		margin: 0;
		min-height: 0;
		height: auto;
		background: #fff;
		gap: 8px;
		align-items: center;
		box-sizing: border-box;
		border-top: 1px solid #eee;
	}

	.sf-mobile .sf-filter-btn {
		flex: 0 1 auto;
		border: 1px solid #dedede;
		border-radius: 3px;
		font-size: 12px;
		font-weight: 700;
		color: #333;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 8px;
		background: #fff;
		min-height: 0;
		height: 35px;
		line-height: 21px;
	}

	.sf-mobile .sf-filter-icon svg {
		width: 18px;
		height: 18px;
	}

	.sf-mobile .sf-filter-icons .sf-icon-btn {
		width: 35px;
		height: 35px;
		min-width: 35px;
		border: 1px solid #dedede;
		border-radius: 3px;
		background: #fff;
		color: #666;
	}

	/* Category tabs — OF inspect: clip to viewport; horizontal scroll inside #categories-top */
	.sf-mobile .sticky-category {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	.sf-mobile .sticky-category > .categories_header,
	.sf-mobile .sticky-category .h-100.w-100 {
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
		border: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	.sf-mobile .sticky-category > .categories_header {
		padding: 20px 0 10px !important;
	}
	.sf-mobile #categories-top {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		height: 40px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		scrollbar-width: none;
		touch-action: pan-x;
	}
	.sf-mobile #categories-top::-webkit-scrollbar { display: none; }
	.sf-mobile #categories-top .sf-cat-tab-item {
		min-width: max-content !important;
		margin: 0 8px !important;
		opacity: 0.5;
	}
	.sf-mobile #categories-top .sf-cat-tab-item.active,
	.sf-mobile #categories-top .sf-cat-tab-item.ar_active {
		opacity: 1 !important;
	}
	.sf-mobile #categories-top .sf-cat-tab-label {
		font-size: 13px !important;
		font-weight: 700 !important;
		margin: 4px 0 0 !important;
	}

	.sf-mobile .categories_header .box-title.sf-cat-colored {
		color: var(--sf-cat-color, #212121) !important;
		font-weight: 700;
	}

	/*
	 * Live OF mobile: category strip is static in-flow, then JS sets
	 * position:fixed; top:54px under the header. CSS sticky here causes jitter.
	 */
	.sf-mobile .sticky-category,
	.sf-mobile .sf-cat-tabs-wrap.sticky-category {
		position: static !important;
		top: auto !important;
		z-index: 999;
	}
	.sf-mobile .sticky-category.is-pinned,
	.sf-mobile .sf-cat-tabs-wrap.sticky-category.is-pinned {
		position: fixed !important;
		top: 54px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 999 !important;
		transform: translateZ(0);
		background: #fff !important;
	}

	/* Product rows — flex (same as OF / storefront visual lock). No absolute children. */
	.sf-mobile .sf-of-item {
		position: relative;
		display: flex !important;
		align-items: flex-start !important;
		gap: 0 !important;
		min-height: 0 !important;
		padding: 8px 16px 8px 20px !important;
		margin: 0 0 42px !important;
		background: #fff;
		border: none !important;
		text-align: left;
		cursor: pointer;
		box-sizing: border-box;
	}
	.sf-mobile .sf-of-item .image_menu {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		margin: 0 15px 0 0 !important;
		flex: 0 0 90px !important;
		width: 90px !important;
		height: 90px !important;
		border-radius: 5px;
		background: #ededed;
		overflow: hidden;
	}
	.sf-mobile .sf-of-item .image_menu > img,
	.sf-mobile .sf-of-item .image_menu .sf-media,
	.sf-mobile .sf-of-item .image_menu .sf-media img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 90px !important;
		max-height: 90px !important;
		object-fit: cover !important;
		border-radius: 4px;
	}
	.sf-mobile .sf-of-item .image_menu .sf-media {
		position: absolute !important;
		inset: 0 !important;
		width: 90px !important;
		height: 90px !important;
		display: block !important;
	}
	/* Overlay chip only - never a full-width grey strip */
	.sf-mobile .sf-of-item .image_menu .of-badges {
		position: absolute !important;
		top: 4px !important;
		left: 4px !important;
		z-index: 3 !important;
		display: flex !important;
		flex-wrap: wrap;
		gap: 2px;
		background: transparent !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		pointer-events: none;
	}
	/* Product-row metrics locked in storefront.css (.sf-app) from live OF audit */
	.sf-mobile .sf-of-item .of-item-right,
	.sf-mobile .sf-of-item .of-item-actions { display: none !important; }
	.sf-mobile .category_menu {
		background: #fff !important;
		padding: 0 !important;
	}
	.sf-mobile .sf-of-item {
		margin-bottom: 42px !important;
		border-bottom: 0 !important;
	}
	.sf-mobile .category_menu > .sf-of-item:last-child,
	.sf-mobile .category_menu > article.sf-item-row:last-child {
		margin-bottom: 0 !important;
	}

	.sf-mobile .of-row-qty {
		display: inline-flex;
		align-items: center;
		background: var(--sf-brand, #388e3c);
		border-radius: 4px;
		overflow: hidden;
		min-height: 34px;
	}

	.sf-mobile .of-row-qty-btn {
		width: 32px;
		height: 34px;
		border: none;
		background: transparent;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		font-family: inherit;
		line-height: 1;
	}

	.sf-mobile .of-row-qty-val {
		min-width: 22px;
		text-align: center;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
	}

	.sf-mobile .category_menu > .categories_header,
	.sf-mobile .category_menu > .categories_header.bordered {
		padding: 16px !important;
		min-height: 50px !important;
		height: 50px !important;
		max-height: 50px !important;
		box-sizing: border-box !important;
		background: #f4f5f5 !important;
		margin: 0 !important;
	}

	.sf-mobile .categories_header {
		padding: 0;
		background: #f4f5f5;
	}

	.sf-mobile .categories_header .box-title {
		font-weight: 700;
		color: rgba(0, 0, 0, 0.87);
		font-size: 14px;
		line-height: 18px;
		margin: 0;
		padding: 0;
	}

	/* Footer sections */
	.sf-mobile .sf-feedback-card {
		margin: 0;
		padding: 16px;
		background: #f4f5f5;
	}

	.sf-mobile .sf-reviews {
		background: #fff;
	}

	.sf-mobile .sf-connect-mobile {
		background: #f4f5f5;
		padding-bottom: 100px;
	}

	/* FABs — live OF: mid-right, 40×60, radius 5 0 0 5 */
	.sf-mobile .sf-fabs {
		position: fixed;
		right: 0;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		z-index: 225;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 40px;
		pointer-events: none;
	}
	.sf-mobile .sf-fabs .sf-fab {
		pointer-events: auto;
	}
	.sf-mobile .sf-fabs--lift {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.sf-mobile .sf-fab {
		width: 40px !important;
		height: 60px !important;
		border-radius: 5px 0 0 5px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
		color: #fff;
	}

	.sf-mobile .sf-fab-wa {
		background: #29ac00 !important;
	}

	.sf-mobile .sf-fab-ig {
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	}

	.sf-mobile .sf-has-sidebar .of-home-header,
	.sf-mobile.sf-has-sidebar .of-home-header {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.sf-sidebar-open {
		overflow: hidden !important;
	}

	.sf-sidebar-overlay,
	.sf-sidebar-overlay.sf-sidebar-mobile {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 1200 !important;
		margin: 0 !important;
		padding: 0 !important;
		justify-content: flex-start;
		align-items: stretch;
		background: #fff !important; /* OrderFlock: full-bleed white drawer */
	}

	.sf-sidebar,
	.sf-sidebar.MuiDrawer-paper,
	.sf-sidebar-overlay .sf-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		flex: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	.sf-drawer-top,
	.sf-sidebar-overlay .sf-drawer-top {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 0 4px !important;
		min-height: 48px !important;
		height: 48px !important;
		border-bottom: none !important;
	}

	.sf-drawer-top .sf-icon-btn,
	.sf-drawer-top .sf-lang-btn,
	.sf-sidebar-overlay .sf-drawer-top .sf-icon-btn,
	.sf-sidebar-overlay .sf-drawer-top .sf-lang-btn {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
	}

	/* Live OF Menu h2 + dense rows */
	.sf-sidebar-overlay .sf-drawer-heading,
	.sf-mobile .sf-drawer-heading {
		padding: 0 !important;
		margin: 0 16px 12px !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		color: rgb(102, 102, 102) !important;
		line-height: 1.25 !important;
		font-family: "Quicksand", "Cairo", sans-serif !important;
	}

	.sf-sidebar-overlay .sf-drawer-heading-row,
	.sf-mobile .sf-drawer-heading-row {
		padding: 0 !important;
		margin: 16px 16px 12px !important;
		align-items: baseline !important;
	}

	.sf-sidebar-overlay .sf-drawer-heading-row .sf-drawer-heading,
	.sf-mobile .sf-drawer-heading-row .sf-drawer-heading {
		margin: 0 !important;
	}

	.sf-sidebar-overlay .sf-drawer-row,
	.sf-mobile .sf-drawer-row {
		padding: 10px 16px !important;
		min-height: 44px !important;
		height: auto !important;
		gap: 12px !important;
		font-size: 14px !important;
		font-weight: 100 !important;
		font-family: "Quicksand", "Cairo", sans-serif !important;
		color: rgba(0, 0, 0, 0.87) !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
		line-height: 1.25 !important;
	}

	.sf-sidebar-overlay .sf-drawer-row-icon,
	.sf-mobile .sf-drawer-row-icon {
		width: 24px !important;
		min-width: 24px !important;
		height: 24px !important;
		justify-content: center !important;
		color: rgba(0, 0, 0, 0.54) !important;
	}

	.sf-sidebar-overlay .sf-drawer-row-icon svg,
	.sf-mobile .sf-drawer-row-icon svg {
		width: 22px !important;
		height: 22px !important;
	}

	.sf-sidebar-overlay .sf-drawer-cat-grid,
	.sf-mobile .sf-drawer-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		padding: 0 16px 16px !important;
		max-height: min(42vh, 280px) !important;
	}

	.sf-sidebar-overlay .sf-drawer-cat-chip,
	.sf-mobile .sf-drawer-cat-chip {
		min-height: 40px !important;
		padding: 8px 10px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		border-radius: 4px !important;
	}

	.sf-sidebar-overlay .sf-drawer-section.sf-drawer-cats,
	.sf-mobile .sf-drawer-section.sf-drawer-cats {
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
		margin-top: 4px !important;
		padding-top: 4px !important;
	}

	.sf-sidebar-overlay .sf-drawer-row-label,
	.sf-mobile .sf-drawer-row-label {
		font-size: 14px !important;
		font-family: "Quicksand", "Cairo", sans-serif !important;
		line-height: 20px !important;
	}

	.sf-sidebar-overlay .sf-drawer-cart .sf-drawer-row-label,
	.sf-sidebar-overlay .sf-drawer-menu .sf-drawer-row-label,
	.sf-sidebar-overlay .sf-drawer-orders .sf-drawer-row-label,
	.sf-sidebar-overlay .sf-drawer-track .sf-drawer-row-label,
	.sf-mobile .sf-drawer-cart .sf-drawer-row-label,
	.sf-mobile .sf-drawer-menu .sf-drawer-row-label,
	.sf-mobile .sf-drawer-orders .sf-drawer-row-label,
	.sf-mobile .sf-drawer-track .sf-drawer-row-label {
		font-weight: 700 !important;
		color: rgb(102, 102, 102) !important;
	}

	.sf-sidebar-overlay .sf-drawer-signin-email .sf-drawer-row-label,
	.sf-sidebar-overlay .sf-drawer-signin-apple .sf-drawer-row-label,
	.sf-sidebar-overlay .sf-drawer-signin-google .sf-drawer-row-label,
	.sf-mobile .sf-drawer-signin-email .sf-drawer-row-label,
	.sf-mobile .sf-drawer-signin-apple .sf-drawer-row-label,
	.sf-mobile .sf-drawer-signin-google .sf-drawer-row-label {
		font-weight: 100 !important;
		color: rgba(0, 0, 0, 0.87) !important;
	}

	.sf-drawer-body,
	.sf-sidebar-overlay .sf-drawer-body {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.sf-sidebar-overlay .sf-drawer-section,
	.sf-mobile .sf-drawer-section {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* OrderFlock keeps FABs visible while the menu drawer is open */
	.sf-mobile.sf-has-sidebar .sf-fabs,
	.sf-mobile .sf-has-sidebar .sf-fabs {
		display: flex !important;
		z-index: 1250;
	}

	.sf-mobile .sf-has-sidebar .of-cart-bar,
	.sf-mobile.sf-has-sidebar .of-cart-bar,
	.sf-mobile.sf-has-store-panel .of-cart-bar,
	.sf-mobile .sf-has-store-panel .of-cart-bar {
		display: none !important;
	}

	.sf-mobile .sf-store-panel-overlay {
		z-index: 1300 !important;
		background: rgba(0,0,0,.45) !important;
	}

	.sf-mobile .sf-store-panel {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		background: #f4f5f5 !important;
	}

	/* ── OrderFlock v2 mobile home (hero-first layout) ── */
	.sf-mobile .of-m-header {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 8px 12px;
		background: #fff;
		min-height: 48px;
		border-bottom: 1px solid #eee;
	}

	.sf-mobile .of-m-header-spacer {
		flex: 1;
	}

	.sf-mobile .of-m-header .sf-icon-btn {
		width: 40px;
		height: 40px;
		border: none;
		background: transparent;
		color: #222;
	}

	.sf-mobile .of-m-header .sf-icon-btn svg {
		width: 22px;
		height: 22px;
	}

	.sf-mobile .of-mobile-hero {
		width: 100%;
		height: 300px;
		background: #ececec;
		overflow: hidden;
		line-height: 0;
	}

	.sf-mobile .of-mobile-hero img {
		width: 100%;
		height: 300px;
		display: block;
		object-fit: cover;
	}

	.sf-mobile .of-mobile-hero--ph {
		height: 300px;
		min-height: 300px;
		background: linear-gradient(180deg, #ececec 0%, #f4f5f5 100%);
	}

	.sf-mobile .of-store-card {
		background: #fff;
		padding: 0;
		border-bottom: none;
	}

	/* Live OF ListItem store row: pad L15 / T3.5 / B4, avatar 60, text ml ~14 */
	.sf-mobile .of-store-card .of-store-header.sf-store-header-btn {
		padding: 3.5px 0 4px 15px !important;
		margin: 0;
		background: transparent;
		border-radius: 0;
		align-items: flex-start !important;
		gap: 14px !important;
		min-height: 85px;
	}
	.sf-mobile .of-store-card .sf-store-logo,
	.sf-mobile .of-store-logo {
		width: 60px !important;
		height: 60px !important;
		border-radius: 4px !important;
		border: none !important;
		overflow: hidden;
		margin-bottom: 9px;
	}
	.sf-mobile .of-store-card .sf-store-name {
		font-size: 14px !important;
		line-height: 21px !important;
		font-weight: 400 !important;
		color: #000 !important;
		margin: 0 !important;
		letter-spacing: 0;
	}
	.sf-mobile .of-store-card .sf-store-tagline {
		font-size: 12.25px !important;
		line-height: 17.5px !important;
		color: rgba(0, 0, 0, 0.54) !important;
		margin: 0 !important;
		font-weight: 400;
	}
	.sf-mobile .of-store-card .sf-store-icons {
		margin-top: 2px;
		bottom: -5px;
	}
	.sf-mobile .of-store-card .of-store-header.sf-store-header-btn:hover,
	.sf-mobile .of-store-card .of-store-header.sf-store-header-btn:focus-visible,
	.sf-mobile .of-store-card .of-store-header.sf-store-header-btn:active {
		background: #f4f5f5;
	}

	.sf-mobile .of-store-row {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.sf-mobile .of-store-logo {
		width: 64px;
		height: 64px;
		flex-shrink: 0;
		border-radius: 6px;
		border: 1px solid #e0e0e0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	.sf-mobile .of-store-logo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sf-mobile .of-store-main {
		flex: 1;
		min-width: 0;
	}

	.sf-mobile .of-store-name-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
	}

	.sf-mobile .of-store-name {
		font-size: 1.05rem;
		font-weight: 700;
		color: #000;
		margin: 0;
	}

	.sf-mobile .of-open-badge {
		font-size: 11px;
		font-weight: 600;
		color: var(--sf-brand-text, #2e7d32);
		background: rgba(46, 125, 50, 0.12);
		padding: 2px 8px;
		border-radius: 3px;
	}

	.sf-mobile .of-rating {
		font-size: 12px;
		font-weight: 600;
		color: #000;
	}

	.sf-mobile .of-chevron {
		margin-left: auto;
		font-size: 1.25rem;
		color: #666;
		line-height: 1;
		padding: 0;
		min-width: 28px;
	}

	.sf-mobile .of-store-tag {
		font-size: 13px;
		color: #6c757d;
		margin-top: 4px;
	}

	.sf-mobile .of-store-links {
		display: flex;
		gap: 16px;
		margin-top: 10px;
		padding-top: 8px;
		border-top: 1px solid #f0f0f0;
	}

	.sf-mobile .of-store-link {
		border: none;
		background: transparent;
		padding: 0;
		font-size: 13px;
		font-weight: 600;
		color: #333;
		cursor: pointer;
		font-family: inherit;
	}

	.sf-mobile .of-store-link--reviews {
		color: var(--sf-brand-text, #2e7d32);
	}

	.sf-mobile .of-order-bar {
		display: block;
		padding: 0;
		background: #fff;
		border-bottom: 1px solid #dee2e6;
		border-top: none;
	}
	/* Live OF single-mode: flex row min-h 65, col-4 text-center */
	.sf-mobile .of-order-bar.of-order-bar--single {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 65px !important;
		padding: 0 !important;
		text-align: center !important;
		direction: ltr !important;
		gap: 0 !important;
	}
	.sf-mobile .of-order-bar.of-order-bar--single .of-order-bar-col,
	.sf-mobile .of-order-bar.of-order-bar--single .col-4 {
		float: none !important;
		flex: 0 0 33.333333% !important;
		width: 33.333333% !important;
		max-width: 33.333333% !important;
		margin: 12.625px auto !important;
		padding: 0 15px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	.sf-mobile .of-order-bar.of-order-bar--single .of-single-otype,
	.sf-mobile .of-order-bar.of-order-bar--single .menu-item {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		width: 80px !important;
		min-width: 80px !important;
		max-width: 80px !important;
		margin: 0 !important;
		height: 38.8px !important;
		max-height: 40px !important;
		padding: 0 !important;
		line-height: 36.75px !important;
		font-size: 12.25px !important;
		font-weight: 700 !important;
	}

	.sf-mobile .of-order-bar .of-segment {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		display: flex;
		border: 1px solid #ccc;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
	}

	.sf-mobile .of-segment-btn {
		flex: 1 1 50%;
		min-width: 0;
		min-height: 44px;
		padding: 10px 12px;
		font-size: 14px;
		font-weight: 600;
		border: none;
		border-radius: 0;
	}

	.sf-mobile .of-fulfill-left {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		font-weight: 600;
		color: #000;
	}

	.sf-mobile .of-fulfill-left svg {
		color: #666;
		flex-shrink: 0;
	}

	.sf-mobile .of-change-address,
	.sf-mobile .of-asap-btn {
		border: none;
		background: transparent;
		color: var(--sf-brand-text, #2e7d32);
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		font-family: inherit;
		padding: 4px 0;
		white-space: nowrap;
	}

	.sf-mobile .category_menu {
		scroll-margin-top: 100px;
		padding: 0;
		background: #fff;
	}

	.sf-mobile .of-mobile-home .sticky-category:not(.is-pinned) {
		position: static !important;
		top: auto !important;
	}
	.sf-mobile .of-mobile-home .sticky-category.is-pinned {
		top: 54px !important;
		z-index: 999 !important;
	}

	.sf-mobile .of-cat-heading {
		padding: 12px 16px;
		background: #f4f5f5;
		font-size: 13px;
		font-weight: 700;
		color: #5b5b5b;
		letter-spacing: 0.03em;
	}

	.sf-mobile .of-item-v2 {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 14px 16px;
		background: #fff;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.sf-mobile .of-item-img {
		width: 90px;
		height: 90px;
		flex-shrink: 0;
		border-radius: 4px;
		background: #ededed;
		overflow: hidden;
	}

	.sf-mobile .of-item-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.sf-mobile .of-item-body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		min-height: 90px;
	}

	.sf-mobile .of-item-title {
		font-size: 14px;
		font-weight: 700;
		color: #000;
		line-height: 1.3;
		margin-bottom: 4px;
	}

	.sf-mobile .of-item-desc {
		font-size: 12px;
		color: var(--sf-muted, #5c5c5c);
		line-height: 1.35;
		flex: 1;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.sf-mobile .of-item-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-top: 8px;
	}

	.sf-mobile .of-item-price {
		font-size: 14px;
		font-weight: 700;
		color: #000;
	}

	.sf-mobile .of-add-pill {
		flex-shrink: 0;
		border: none;
		background: var(--sf-brand, #388e3c);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		padding: 7px 16px;
		border-radius: 4px;
		cursor: pointer;
		font-family: inherit;
		letter-spacing: 0.02em;
	}

	.sf-mobile .of-add-pill:active {
		opacity: 0.9;
	}

	/* Cart bar metrics locked in storefront.css visual lock (56px / 0.95rem) */
	.sf-mobile .of-cart-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: var(--sf-brand, #388e3c);
		color: #fff;
		border-radius: 0;
		cursor: pointer;
		box-sizing: border-box;
		width: 100%;
		max-width: 100vw;
		transform: none;
	}

	.sf-mobile .of-cart-bar strong {
		white-space: nowrap;
	}

	/* Clearance for fixed cart - real spacer in DOM (.of-cart-clearance) */
	.sf-mobile .of-mobile-home--cart,
	.sf-mobile.sf-has-cart-bar .of-mobile-home {
		padding-bottom: 0;
	}

	.sf-mobile .of-cart-clearance {
		height: calc(88px + env(safe-area-inset-bottom, 0px));
		background: #f4f5f5;
	}

	.sf-mobile .of-powered {
		text-align: center;
		font-size: 11px;
		color: var(--sf-muted, #5c5c5c);
		padding: 20px 16px 24px;
		margin: 0;
		background: #f4f5f5;
	}

	.sf-mobile .sf-site-footer {
		display: block !important;
		background: #fff !important;
		padding: 28px 16px 20px !important;
		margin: 0 !important;
		border-top: 1px solid #e8e8e8 !important;
	}

	.sf-mobile .sf-site-footer-title {
		display: block !important;
		font-size: 1.15rem !important;
		font-weight: 700 !important;
		color: #111 !important;
		margin: 0 0 4px !important;
		text-align: center;
	}

	.sf-mobile .sf-site-footer-contacts,
	.sf-mobile .sf-site-footer-nav {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px 18px !important;
		width: 100% !important;
	}

	.sf-mobile .sf-site-footer-contacts a,
	.sf-mobile .sf-site-footer-nav .sf-footer-link {
		display: inline-flex !important;
		font-size: .9rem !important;
		color: #333 !important;
		background: none !important;
		border: none !important;
		padding: 6px 2px !important;
		text-decoration: none !important;
		cursor: pointer;
		font-family: inherit;
	}

	.sf-mobile .sf-site-footer .of-powered {
		padding: 12px 0 4px !important;
		background: transparent !important;
	}

	.sf-mobile .free-space-80-white {
		display: none !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.sf-mobile .of-powered a {
		color: var(--sf-brand-text, #2e7d32);
	}

	.sf-mobile .of-mobile-home .sf-connect-mobile,
	.sf-mobile .of-mobile-home .sf-feedback-card,
	.sf-mobile .of-mobile-home .sf-reviews,
	.sf-mobile .of-mobile-home .sf-branch-bar {
		display: none !important;
	}

	.sf-mobile .sf-fabs,
	.sf-mobile:has(.of-cart-bar) .sf-fabs {
		top: 50% !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
	}

	/* ── OrderFlock product detail page (mobile overrides) ── */
	.sf-mobile .of-item-page {
		background: #fff;
		min-height: 100%;
	}
	.sf-mobile .of-item-header {
		width: 100% !important;
	}
	.sf-mobile .of-item-hero {
		padding: 0;
		background: #faf7ed;
	}
	.sf-mobile .of-item-hero-img {
		width: 100%;
		max-width: none;
		padding: 0;
	}
	.sf-mobile .of-item-hero-img img {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
	}
	.sf-mobile .of-item-gallery-thumbs {
		display: flex !important;
		gap: 8px;
		justify-content: center;
		flex-wrap: wrap;
		padding: 12px 16px 4px;
		background: #faf7ed;
	}
	.sf-mobile .of-item-gallery-thumb {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
	}
	.sf-mobile .of-item-page .of-item-title {
		font-size: 17px;
		font-weight: 700;
		line-height: 1.25;
	}
	.sf-mobile .of-item-upsell .of-upsell-title {
		font-size: 14px;
		font-weight: 700;
		color: #5b5b5b;
		padding: 0 10px;
	}
	.sf-mobile .of-item-upsell .of-upsell-carousel {
		padding: 20px 5px;
		border: 1px solid #dee2e6;
	}
	.sf-mobile .of-item-upsell .of-upsell-card {
		flex: 0 0 150px;
		width: 150px;
	}
	.sf-mobile .of-item-upsell .of-upsell-card-media {
		border-radius: 5px;
		width: 150px;
		height: 150px;
		min-height: 150px;
		margin-bottom: 0;
	}
	.sf-app .sf-mobile .of-item-upsell .of-upsell-prev,
	.sf-app .sf-mobile .of-item-upsell .of-upsell-next,
	.sf-mobile .of-item-upsell .of-upsell-prev,
	.sf-mobile .of-item-upsell .of-upsell-next {
		flex: 0 0 auto;
		width: auto;
		margin: 0 0 55px;
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: rgba(0,0,0,.54) !important;
	}
	.sf-mobile .of-item-page .action-button-english {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		padding: 0;
		padding-bottom: 0;
		background: #fff;
		border-top: none;
		bottom: 0;
	}
	.sf-mobile .of-item-page .action-button-english .sf-cta-btn {
		border-radius: 4px;
		box-shadow: none;
	}
	.sf-mobile .of-item-page .sf-fabs {
		bottom: calc(72px + env(safe-area-inset-bottom, 0));
	}

	/* Category collection page - same flex rows as above; kill absolute home-row layout */
	.sf-mobile .sf-category-page .sf-of-item {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 14px 16px !important;
	}
	.sf-mobile .sf-category-page .sf-of-item .image_menu {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 90px !important;
		height: 90px !important;
		flex: 0 0 90px !important;
	}
	.sf-mobile .sf-category-page .sf-of-item .image_menu > img,
	.sf-mobile .sf-category-page .sf-of-item .image_menu .sf-media,
	.sf-mobile .sf-category-page .sf-of-item .image_menu .sf-media img {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: cover !important;
	}
	/* Category product rows use OF absolute .priceEnglish lock in storefront.css */
	.sf-mobile .sf-category-page .sf-of-item .of-item-actions {
		display: none !important;
	}
	.sf-mobile .sf-category-page .sf-site-footer {
		margin-top: 0 !important;
	}
	.sf-mobile .sf-category-page .sf-category-seo {
		margin-top: 0 !important;
	}
}