/*
 * JP-ress Food Ordering - front-end styles (mobile-first).
 * Everything is namespaced under .jpfood-* so it will not collide with the theme.
 * Base rules target phones; wider layouts are added at min-width breakpoints.
 * Colours, fonts and radius are overridden by the inline settings CSS.
 */

/* Design tokens - defined on every top-level plugin container so var() resolves everywhere
 * (the mini-cart, modal, slot picker and mobile bar live outside .jpfood-menu). */
.jpfood-menu,
.jpfood-modal,
.jpfood-cart-panel,
.jpfood-cart-toggle,
.jpfood-slots,
.jpfood-mbnav,
.jpfood-toast {
	--jpfood-accent: #7b2ff7;
	--jpfood-text: #222;
	--jpfood-muted: #666;
	--jpfood-border: #e3e3e3;
	--jpfood-border-light: #eee;
	--jpfood-radius: 8px;
}
.jpfood-menu {
	color: var(--jpfood-text);
	margin: 0 0 2rem;
}
.jpfood-menu *, .jpfood-modal *, .jpfood-cart-panel * { box-sizing: border-box; }

/* ---- Category quick-nav ---- */
.jpfood-menu-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.jpfood-menu-nav a {
	display: inline-block; padding: .45rem 1rem; border: 1px solid var(--jpfood-border);
	background: #fff; color: var(--jpfood-text); text-decoration: none; font-size: .875rem;
	border-radius: var(--jpfood-radius); transition: background .15s ease, color .15s ease;
}
.jpfood-menu-nav a:hover, .jpfood-menu-nav a.active { background: #7b2ff7; border-color: #7b2ff7; color: #fff; }

/* ---- Category section + heading ---- */
.jpfood-menu-section { margin-bottom: 2.5rem; }
.jpfood-menu-heading {
	margin: 0 0 1.5rem; font-weight: 400; position: relative; text-align: center;
	border-bottom: 1px solid var(--jpfood-border); padding-bottom: 14px;
}
.jpfood-menu-heading span { position: relative; display: inline-block; color: #7b2ff7; }
.jpfood-menu-heading span:after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px;
	width: 56px; height: 2px; background: #7b2ff7;
}
.jpfood-menu-desc { margin-bottom: 1.25rem; color: var(--jpfood-muted); text-align: center; }

/* ---- Grid layout (mobile-first: 1 col, widen at breakpoints) ---- */
.jpfood-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.jpfood-grid.jpfood-cols-2, .jpfood-grid.jpfood-cols-3,
	.jpfood-grid.jpfood-cols-4, .jpfood-grid.jpfood-cols-5, .jpfood-grid.jpfood-cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.jpfood-grid.jpfood-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.jpfood-grid.jpfood-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.jpfood-grid.jpfood-cols-5 { grid-template-columns: repeat(5, 1fr); }
	.jpfood-grid.jpfood-cols-6 { grid-template-columns: repeat(6, 1fr); }
}
.jpfood-single .jpfood-item-grid { max-width: 360px; }

/* ---- Grid card ---- */
.jpfood-item-grid {
	margin: 0; text-align: center; background: #fff; border: 1px solid var(--jpfood-border-light);
	border-radius: var(--jpfood-radius); overflow: hidden; display: flex; flex-direction: column;
}
.jpfood-item-grid .jpfood-img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.jpfood-item-grid .jpfood-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.jpfood-item-grid:hover .jpfood-img img { transform: scale(1.04); }
.jpfood-item-grid .jpfood-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.jpfood-item-grid .jpfood-title { margin: 0; font-weight: 400; line-height: 1.2; font-size: 1.5rem; }
.jpfood-item-grid .jpfood-desc { color: var(--jpfood-muted); font-size: .9rem; margin: .5rem 0 0; }
.jpfood-item-grid .jpfood-actions { margin-top: auto; padding-top: 1rem; }
.jpfood-item-grid.jpfood-no-image .jpfood-body { padding-top: 22px; }

/* Price on a centered rule */
.jpfood-price-rule { position: relative; text-align: center; margin: .9rem 0 .25rem; }
.jpfood-price-rule:before { content: ""; position: absolute; top: 50%; left: 20%; right: 20%; border-top: 1px solid var(--jpfood-border); }
.jpfood-item-grid .jpfood-price { position: relative; background: #fff; padding: 0 14px; }
.jpfood-price { font-size: 1.15rem; font-weight: 700; color: #7b2ff7; }
.jpfood-price del { color: #9a9a9a; font-weight: 400; margin-right: 6px; }
.jpfood-price ins { text-decoration: none; }

.jpfood-badge {
	position: absolute; top: .55rem; left: .55rem; background: #7b2ff7; color: #fff;
	font-size: .7rem; padding: .18rem .55rem; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em;
}

/* ---- List layout ---- */
.jpfood-list { display: block; }
.jpfood-item-list { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed #cfcfcf; }
.jpfood-item-list .jpfood-img { flex: 0 0 auto; }
.jpfood-item-list .jpfood-img img { width: 64px; height: 64px; object-fit: cover; display: block; border-radius: var(--jpfood-radius); }
.jpfood-item-list .jpfood-body { flex: 1 1 55%; min-width: 0; }
.jpfood-item-list .jpfood-title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.jpfood-item-list .jpfood-desc { color: var(--jpfood-muted); font-size: .9rem; margin: .3rem 0 0; }
/* Price + add button grouped on the right; wraps below the title on very tight widths. */
.jpfood-list-end { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 14px; position: static; }
.jpfood-item-list .jpfood-price { position: static; font-size: 1.05rem; white-space: nowrap; }
.jpfood-item-list .jpfood-actions { position: static; display: flex; align-items: center; }
@media (min-width: 600px) { .jpfood-item-list .jpfood-img img { width: 84px; height: 84px; } }

.jpfood-item .jpfood-title a { text-decoration: none; color: inherit; }
.jpfood-item .jpfood-title a:hover { color: #7b2ff7; }
.jpfood-soldout { color: #999; font-style: italic; }
.jpfood-item .added_to_cart { display: none !important; }
.jpfood-empty { color: #777; }

/* ---- Text order button ---- */
.jpfood-btn-text {
	display: inline-block; background: #7b2ff7 !important; color: #fff !important; border: 0; border-radius: var(--jpfood-radius);
	padding: 11px 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	font-size: .8rem; cursor: pointer; text-decoration: none; line-height: 1.2; transition: filter .15s ease;
}
.jpfood-btn-text:hover { filter: brightness(.9); color: #fff !important; }
.jpfood-btn-text.loading { opacity: .6; pointer-events: none; }
.jpfood-item-grid .jpfood-btn-text { width: 100%; }

/* ---- Round "+" add button ---- */
.jpfood-plus {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	padding: 0; border: 2px solid #7b2ff7; background: #fff; border-radius: 50%; cursor: pointer; position: relative;
	transition: background .15s ease; line-height: 0; flex: 0 0 auto;
}
.jpfood-plus:hover { background: #7b2ff7; }
.jpfood-plus .jpfood-plus-icon { position: relative; width: 15px; height: 15px; display: block; }
.jpfood-plus .jpfood-plus-icon:before, .jpfood-plus .jpfood-plus-icon:after { content: ""; position: absolute; background: #7b2ff7; transition: background .15s ease; }
.jpfood-plus .jpfood-plus-icon:before { top: 6.5px; left: 0; width: 15px; height: 2px; }
.jpfood-plus .jpfood-plus-icon:after { left: 6.5px; top: 0; width: 2px; height: 15px; }
.jpfood-plus:hover .jpfood-plus-icon:before, .jpfood-plus:hover .jpfood-plus-icon:after,
.jpfood-plus:focus .jpfood-plus-icon:before, .jpfood-plus:focus .jpfood-plus-icon:after,
.jpfood-plus:active .jpfood-plus-icon:before, .jpfood-plus:active .jpfood-plus-icon:after { background: #fff; }
.jpfood-plus.loading { opacity: .6; }

/* ================================================================
 * Modal (mobile-first: full-height sheet; centered card on desktop)
 * ================================================================ */
/* Sits above the floating cart (100001), overlay (100002) and cart panel (100003). */
.jpfood-modal { position: fixed; inset: 0; z-index: 2147483000; display: none; }
.jpfood-modal.is-open { display: block; }
.jpfood-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.jpfood-modal-content {
	position: absolute; inset: 0; z-index: 1; background: #fff; width: 100%; height: 100%;
	margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.jpfood-modal-body { max-width: 100%; }
.jpfood-modal-details { min-width: 0; }
/* No image: let the details fill the sheet, capped for readability on desktop. */
@media (min-width: 768px) {
	.jpfood-modal-body.jpfood-no-media .jpfood-modal-details { max-width: 600px; margin: 0 auto; }
}
.jpfood-modal-close {
	position: absolute; top: 12px; right: 12px; z-index: 9; width: 34px; height: 34px;
	border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
	font-size: 22px; line-height: 34px; text-align: center; cursor: pointer; padding: 0;
}
.jpfood-modal-close:hover { filter: brightness(.9); }
body.jpfood-modal-open { overflow: hidden; }
/* While the popup is open, get the cart button + mobile bar out of the way entirely. */
body.jpfood-modal-open .jpfood-cart-toggle,
body.jpfood-modal-open .jpfood-mbnav { display: none !important; }

.jpfood-modal-body { display: flex; flex-direction: column; }
.jpfood-modal-media { width: 100%; }
.jpfood-modal-media img { width: 100%; height: 100%; max-height: 34vh; object-fit: cover; display: block; }
.jpfood-modal-details { padding: clamp(18px, 5vw, 32px); display: flex; flex-direction: column; }
.jpfood-modal-title { margin: 0 0 .3rem; font-size: clamp(1.4rem, 5vw, 1.95rem); line-height: 1.15; color: #7b2ff7; }
.jpfood-modal-price { font-size: clamp(1.2rem, 4vw, 1.45rem); font-weight: 700; color: #7b2ff7; margin-bottom: clamp(12px, 3vw, 18px); }
.jpfood-modal-desc { color: #555; margin-bottom: 1.1rem; line-height: 1.6; }
.jpfood-modal-desc ul { padding-left: 1.15rem; margin: .5rem 0; }
.jpfood-modal-desc h1, .jpfood-modal-desc h2, .jpfood-modal-desc h3, .jpfood-modal-desc h4 { margin: .9rem 0 .3rem; font-size: 1rem; }

@media (min-width: 768px) {
	.jpfood-modal-content { position: relative; inset: auto; width: calc(100% - 2rem); max-width: 760px; height: auto; max-height: 88vh; margin: 6vh auto; border-radius: 14px; }
	.jpfood-modal-body { flex-direction: row; align-items: stretch; }
	.jpfood-modal-media { flex: 0 0 42%; }
	.jpfood-modal-media img { max-height: none; height: 100%; min-height: 340px; }
	.jpfood-modal-details { flex: 1; }
}

.jpfood-notice { background: #fdecea; border: 1px solid #e0402f; color: #8a1f1f; padding: 10px 14px; margin: 0 0 1rem; font-size: .9rem; border-radius: var(--jpfood-radius); }
.jpfood-loading { min-height: 200px; }
.jpfood-loading:after { content: ""; display: block; width: 34px; height: 34px; margin: 5rem auto; border: 3px solid #ddd; border-top-color: #7b2ff7; border-radius: 50%; animation: jpfood-spin .8s linear infinite; }
@keyframes jpfood-spin { to { transform: rotate(360deg); } }

/* ---- Option accordion panels ---- */
.jpfood-options { margin: 1.1rem 0; }
.jpfood-optgroup { border: 1px solid var(--jpfood-border); border-radius: var(--jpfood-radius); margin-bottom: 10px; overflow: hidden; }
.jpfood-optgroup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f6f6f6; padding: 12px 14px; cursor: pointer; user-select: none; }
.jpfood-optgroup-title { font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; }
.jpfood-optgroup-title .required { color: #e0402f; text-decoration: none; }
.jpfood-acc-toggle { border: 0; background: transparent; cursor: pointer; width: 20px; height: 20px; position: relative; flex: 0 0 auto; padding: 0; }
.jpfood-acc-toggle:before, .jpfood-acc-toggle:after { content: ""; position: absolute; background: #555; transition: opacity .15s ease; }
.jpfood-acc-toggle:before { top: 9px; left: 3px; width: 14px; height: 2px; }
.jpfood-acc-toggle:after { left: 9px; top: 3px; width: 2px; height: 14px; }
.jpfood-optgroup:not(.is-collapsed) .jpfood-acc-toggle:after { opacity: 0; }
.jpfood-optgroup-body { padding: 12px 14px; }
.jpfood-optgroup.is-collapsed .jpfood-optgroup-body { display: none; }

.jpfood-choice-label { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; cursor: pointer; }
.jpfood-choice-label + .jpfood-choice-label { border-top: 1px dashed var(--jpfood-border-light); }
.jpfood-choice-name { flex: 1; }
.jpfood-choice-price { color: #7b2ff7; font-style: normal; font-weight: 600; }
.jpfood-select, .jpfood-freeinput { width: 100%; padding: .55rem; border: 1px solid var(--jpfood-border); border-radius: var(--jpfood-radius); }
textarea.jpfood-freeinput { resize: vertical; }
.jpfood-options-total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--jpfood-border-light); padding-top: .6rem; margin: .25rem 0 1rem; }

/* Inline per-group validation error */
.jpfood-optgroup.jpfood-has-error { border-color: #e0402f; }
.jpfood-optgroup.jpfood-has-error .jpfood-optgroup-head { background: #fdecea; }
.jpfood-optgroup-error { color: #c0261a; font-size: .85rem; font-weight: 600; margin-top: 8px; }

/* WooCommerce add-to-cart form - shared by the popup and the inline "full" layout (.jpfood-order) */
.jpfood-order form.cart { margin: 1.1rem 0 0; display: block; }
.jpfood-order .jpfood-options { margin-top: 0; }

/* Action zone: quantity stepper above a full-width add button */
.jpfood-cart-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
.jpfood-order .quantity { align-self: center; display: inline-flex; align-items: stretch; border: 1px solid var(--jpfood-border); border-radius: var(--jpfood-radius); overflow: hidden; height: 46px; }
.jpfood-qtybtn { width: 46px; border: 0; background: #f4f4f5; color: #333; font-size: 20px; line-height: 1; cursor: pointer; }
.jpfood-qtybtn:hover { background: #ececec; }
.jpfood-order .quantity input.qty { width: 54px; text-align: center; border: 0; border-left: 1px solid var(--jpfood-border); border-right: 1px solid var(--jpfood-border); font-size: 16px; -moz-appearance: textfield; }
.jpfood-order .quantity input.qty::-webkit-outer-spin-button, .jpfood-order .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jpfood-order .quantity label { display: none; }
.jpfood-order .single_add_to_cart_button {
	width: 100%; background: #7b2ff7 !important; color: #fff !important; border: 0 !important; border-radius: var(--jpfood-radius);
	padding: clamp(14px, 3.5vw, 16px) 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	font-size: clamp(.85rem, 3vw, .95rem); cursor: pointer; transition: filter .15s ease; opacity: 1; text-align: center;
}
.jpfood-order .single_add_to_cart_button:hover { filter: brightness(.9); }
/* Small total line above the button */
.jpfood-atc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jpfood-atc-line .jpfood-atc-label { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: #888; }
.jpfood-atc-line .jpfood-atc-total { font-weight: 700; font-size: 1.1rem; color: #222; }

/* Inline "full" product layout: full-width, transparent (no card frame) */
.jpfood-product-full { width: 100%; background: transparent; }

/* On phones the popup action zone sticks to the bottom of the sheet (popup only, not inline). */
@media (max-width: 767px) {
	#jpfood-modal .jpfood-cart-actions {
		position: sticky; bottom: 0; background: #fff; margin: 16px calc(-1 * clamp(18px, 5vw, 32px)) 0;
		padding: 14px clamp(18px, 5vw, 32px) calc(14px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 14px rgba(0,0,0,.07);
	}
}

/* ================================================================
 * Slide-in side cart
 * ================================================================ */
/* Hide the cart controls entirely while the cart is empty. */
body.jpfood-cart-empty .jpfood-cart-toggle,
body.jpfood-cart-empty .jpfood-mbnav { display: none !important; }

.jpfood-cart-toggle {
	position: fixed; right: 8px; top: 50%; transform: translateY(-50%); z-index: 100001;
	width: 46px; height: 46px; border: 0; border-radius: var(--jpfood-radius) 0 0 var(--jpfood-radius);
	background: #7b2ff7; color: #fff; cursor: pointer; box-shadow: -2px 2px 8px rgba(0,0,0,.2);
	padding: 0; display: flex; align-items: center; justify-content: center;
}
.jpfood-cart-toggle svg { width: 22px; height: 22px; fill: #fff; }
.jpfood-cart-count { position: absolute; top: -8px; left: -8px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 4px; border-radius: 50%; background: #222; color: #fff; font-size: 11px; text-align: center; box-sizing: border-box; }
.jpfood-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: -1; transition: background .3s ease; pointer-events: none; }
.jpfood-cart-overlay.is-open { background: rgba(0,0,0,.6); z-index: 100002; pointer-events: auto; }
.jpfood-cart-panel {
	position: fixed; top: 0; right: 0; width: 360px; max-width: 92vw; height: 100vh; height: 100dvh; background: #f4f4f5;
	z-index: -1; transform: translateX(100%); transition: transform .3s ease, z-index 0s linear .3s;
	box-shadow: -3px 0 40px rgba(0,0,0,.18); display: flex; flex-direction: column;
}
.jpfood-cart-panel.is-open { transform: translateX(0); z-index: 100003; transition: transform .3s ease; }
.jpfood-cart-head { display: flex; align-items: center; justify-content: space-between; background: #7b2ff7; color: #fff; padding: 14px 18px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.jpfood-cart-close { border: 0; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
/* Flex column: only the item list scrolls; subtotal + buttons stay pinned at the bottom. */
.jpfood-cart-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: flex; }
.jpfood-cart-body .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.jpfood-cart-body .woocommerce-mini-cart__total { flex: 0 0 auto; border-top: 1px solid var(--jpfood-border); padding: 14px 4px; font-size: 1.1rem; text-align: center; text-transform: uppercase; background: #f4f4f5; }
.jpfood-cart-body .woocommerce-mini-cart__buttons { flex: 0 0 auto; display: flex !important; gap: 8px; margin: 0 !important; background: #f4f4f5; padding-bottom: env(safe-area-inset-bottom, 0px); }
.jpfood-cart-body .woocommerce-mini-cart__buttons a { flex: 1; text-align: center !important; background: #7b2ff7; color: #fff !important; padding: 12px 10px !important; border-radius: var(--jpfood-radius); text-decoration: none !important; margin: 0 !important; width: auto !important; float: none !important; }
.jpfood-cart-body .woocommerce-mini-cart__buttons a:hover { filter: brightness(.9); }
.jpfood-cart-body p.woocommerce-mini-cart__empty-message { color: #777; padding: 1rem 0; text-align: center; }

/* Minimal mini-cart line items: no thumbnails, clean cards */
.jpfood-cart-body ul.woocommerce-mini-cart, .jpfood-cart-body ul.cart_list {
	list-style: none !important; margin: 0 0 12px !important; padding: 0 4px 0 0 !important;
	flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.jpfood-cart-body li.mini_cart_item {
	position: relative; background: #fff; border-radius: var(--jpfood-radius);
	padding: 16px 42px 16px 16px !important; margin: 0 0 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06);
	border: 0 !important; list-style: none !important;
}
.jpfood-cart-body li.mini_cart_item::after { content: ""; display: table; clear: both; }
.jpfood-cart-body li.mini_cart_item img { display: none !important; }
.jpfood-cart-body li.mini_cart_item > a:not(.remove) { font-weight: 600; text-decoration: none; color: #222; display: block; }
.jpfood-cart-body li.mini_cart_item dl.variation { margin: 4px 0 0; font-size: .85em; color: #666; }
.jpfood-cart-body li.mini_cart_item dl.variation dt, .jpfood-cart-body li.mini_cart_item dl.variation dd { display: inline; margin: 0; padding: 0; }
.jpfood-cart-body li.mini_cart_item dl.variation dd { margin-right: 6px; }
.jpfood-cart-body li.mini_cart_item dl.variation p { margin: 0; }
.jpfood-cart-body li.mini_cart_item a.remove { position: absolute; top: 14px; right: 12px; width: 24px; height: 24px; line-height: 22px; text-align: center; color: #b0b0b0 !important; font-size: 20px; border-radius: 50%; text-decoration: none; }
.jpfood-cart-body li.mini_cart_item a.remove:hover { color: #dc3232 !important; background: transparent; }
.jpfood-cart-body li.mini_cart_item .quantity { display: none; }

/* Edit-options link + quantity stepper + per-line price */
.jpfood-mc-edit { display: inline-block; margin: 8px 0 8px; font-weight: 700; font-size: .8rem; text-decoration: underline; color: #222; }
.jpfood-mc-edit:hover { color: #7b2ff7; }
.jpfood-mc-qty { display: inline-flex; align-items: stretch; border: 1px solid #7b2ff7; border-radius: var(--jpfood-radius); overflow: hidden; height: 38px; vertical-align: middle; }
.jpfood-mc-btn { width: 36px; border: 0; background: #fff; color: #7b2ff7; font-size: 18px; line-height: 1; cursor: pointer; }
.jpfood-mc-btn:hover { background: #7b2ff7; color: #fff; }
.jpfood-mc-qtyval { width: 44px; text-align: center; border: 0; border-left: 1px solid #eaddfd; border-right: 1px solid #eaddfd; -moz-appearance: textfield; font-size: 15px; }
.jpfood-mc-qtyval::-webkit-outer-spin-button, .jpfood-mc-qtyval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jpfood-mc-price { display: inline-block; margin-left: 10px; color: #444; }
.jpfood-mc-qty.loading { opacity: .5; pointer-events: none; }

/* ================================================================
 * Mobile bottom nav bar (replaces the floating button on phones)
 * ================================================================ */
.jpfood-mbnav { display: none; }
@media (max-width: 767px) {
	.jpfood-cart-toggle { display: none !important; }
	.jpfood-mbnav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; background: #fff;
		box-shadow: 0 -2px 14px rgba(0,0,0,.12); border-radius: 16px 16px 0 0;
		padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px));
	}
	.jpfood-mbnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border: 0; cursor: pointer; text-decoration: none; color: #222; padding: 6px 4px; font-size: .8rem; }
	.jpfood-mbnav-icon { position: relative; display: inline-flex; }
	.jpfood-mbnav-icon svg { width: 24px; height: 24px; fill: #222; }
	.jpfood-mbnav .jpfood-cart-count { position: absolute; top: -8px; left: auto; right: -12px; min-width: 19px; height: 19px; line-height: 15px; padding: 0 4px; border-radius: 50%; background: #fff; border: 2px solid #7b2ff7; color: #7b2ff7; font-size: 11px; font-weight: 700; text-align: center; }
}

/* ================================================================
 * Sheet motion, toast, badge bump, drag handle
 * ================================================================ */
@keyframes jpfood-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes jpfood-sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes jpfood-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jpfood-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes jpfood-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes jpfood-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes jpfood-badge-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }

.jpfood-modal.is-open .jpfood-modal-overlay { animation: jpfood-fade-in .28s ease; }
.jpfood-modal.is-closing .jpfood-modal-overlay { animation: jpfood-fade-out .2s ease forwards; }
.jpfood-modal.is-open .jpfood-modal-content { animation: jpfood-sheet-up .3s cubic-bezier(.22,.61,.36,1); }
.jpfood-modal.is-closing .jpfood-modal-content { animation: jpfood-sheet-down .22s ease forwards; }
@media (min-width: 768px) {
	.jpfood-modal.is-open .jpfood-modal-content { animation: jpfood-pop-in .2s ease; }
	.jpfood-modal.is-closing .jpfood-modal-content { animation: jpfood-pop-out .18s ease forwards; }
}

/* Drag handle (mobile sheets only) */
.jpfood-sheet-handle { display: none; }

/* Toast */
.jpfood-toast {
	position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(16px);
	background: #222; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: .9rem; font-weight: 600;
	z-index: 2147483001; opacity: 0; pointer-events: none; max-width: 90vw; text-align: center;
	transition: opacity .25s ease, transform .25s ease; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.jpfood-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 768px) { .jpfood-toast { bottom: 32px; } }

.jpfood-cart-count.jpfood-bump { animation: jpfood-badge-bump .45s ease; }

/* ================================================================
 * Mobile refinements: sticky chips, bottom-sheet cart, bigger touch
 * targets, no iOS zoom, tighter spacing
 * ================================================================ */
@media (max-width: 767px) {
	/* Sleeker, more compact */
	.jpfood-menu { margin-bottom: 1.25rem; }
	.jpfood-grid { gap: 1rem; }
	.jpfood-item-grid .jpfood-body { padding: 14px 14px 18px; }
	.jpfood-item-grid .jpfood-title { font-size: 1.3rem; }
	.jpfood-menu-section { margin-bottom: 2rem; }

	/* Sticky, horizontally-scrollable category chips */
	.jpfood-menu-nav {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		position: sticky; top: 0; z-index: 30; background: #fff; margin: 0 -12px 1.25rem; padding: 10px 12px;
	}
	.jpfood-menu-nav::-webkit-scrollbar { display: none; }
	.jpfood-menu-nav a { flex: 0 0 auto; white-space: nowrap; }

	/* Cart becomes a bottom sheet */
	.jpfood-cart-panel {
		top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; height: auto; max-height: 85vh;
		border-radius: 18px 18px 0 0; transform: translateY(100%);
	}
	.jpfood-cart-panel.is-open { transform: translateY(0); }
	.jpfood-cart-head { position: relative; }
	.jpfood-cart-head:before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.6); }

	/* Product sheet drag handle */
	.jpfood-sheet-handle { display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.22); z-index: 10; }
	.jpfood-modal-media { padding-top: 6px; }

	/* Touch targets >= 44px */
	.jpfood-plus { width: 44px; height: 44px; }
	.jpfood-acc-toggle { width: 44px; height: 44px; }
	.jpfood-optgroup-head { padding: 14px; }
	.jpfood-modal-close { width: 40px; height: 40px; line-height: 40px; }
	.jpfood-mc-qty { height: 44px; }
	.jpfood-mc-btn { width: 44px; }
	.jpfood-cart-body li.mini_cart_item a.remove { width: 32px; height: 32px; line-height: 30px; font-size: 22px; }
	.jpfood-order .quantity { height: 48px; }
	.jpfood-qtybtn { width: 48px; }

	/* Prevent iOS zoom-on-focus (needs >= 16px) */
	.jpfood-select, .jpfood-freeinput,
	.jpfood-order input, .jpfood-order select, .jpfood-order textarea,
	.jpfood-mc-qtyval, .jpfood-order .quantity input.qty { font-size: 16px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.jpfood-modal-content, .jpfood-modal-overlay, .jpfood-cart-panel, .jpfood-cart-overlay,
	.jpfood-cart-count, .jpfood-item-grid .jpfood-img img, .jpfood-toast { animation: none !important; transition: none !important; }
}

/* ================================================================
 * Delivery slot picker (checkout) - mobile-first
 * ================================================================ */
.jpfood-slots { margin: 1.25rem 0; }
.jpfood-slots-heading { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .03em; }
.jpfood-slots-heading .required { color: #e0402f; text-decoration: none; }

.jpfood-slots-types { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.jpfood-slots-type {
	flex: 1 1 auto; min-height: 44px; padding: 10px 18px; border: 1px solid var(--jpfood-border, #e3e3e3);
	background: #fff; border-radius: var(--jpfood-radius, 8px); cursor: pointer; font-weight: 600; color: #333;
}
.jpfood-slots-type.is-active { background: #7b2ff7; border-color: #7b2ff7; color: #fff; }

.jpfood-slots-dates { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 1rem; }
.jpfood-slots-dates::-webkit-scrollbar { display: none; }
.jpfood-slots-date {
	flex: 0 0 auto; min-width: 84px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--jpfood-border, #e3e3e3);
	background: #fff; border-radius: var(--jpfood-radius, 8px); cursor: pointer; text-align: center; line-height: 1.25;
	font-size: .9rem; white-space: nowrap; color: var(--jpfood-accent);
}
.jpfood-slots-date.is-active { background: #7b2ff7; border-color: #7b2ff7; color: #fff; }

.jpfood-slots-times { display: flex; flex-wrap: wrap; gap: 8px; }
.jpfood-slots-time {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
	border: 1px solid var(--jpfood-border, #e3e3e3); background: #fff; border-radius: var(--jpfood-radius, 8px);
	cursor: pointer; font-size: .95rem; color: var(--jpfood-accent);
}
.jpfood-slots-time.is-active { background: #7b2ff7; border-color: #7b2ff7; color: #fff; }
.jpfood-slots-fee { font-size: .82rem; opacity: .85; }
.jpfood-slots-none, .jpfood-slots-empty { color: var(--jpfood-muted, #666); margin: .5rem 0; }
.jpfood-slots-loading { min-height: 60px; }
.jpfood-slots-loading:after { content: ""; display: block; width: 28px; height: 28px; margin: 1rem auto; border: 3px solid #ddd; border-top-color: #7b2ff7; border-radius: 50%; animation: jpfood-spin .8s linear infinite; }
@media (max-width: 767px) {
	.jpfood-slots-time { flex: 1 1 calc(50% - 8px); justify-content: center; font-size: 16px; }
}

/* ---- Slot date calendar ---- */
.jpfood-cal { max-width: 340px; margin: 0 0 1.25rem; }
.jpfood-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.jpfood-cal-title { font-weight: 700; font-size: 1rem; }
.jpfood-cal-nav { width: 40px; height: 40px; border: 1px solid var(--jpfood-border, #e3e3e3); background: #fff; border-radius: var(--jpfood-radius, 8px); font-size: 20px; line-height: 1; cursor: pointer; color: #333; }
.jpfood-cal-nav[disabled] { opacity: .35; cursor: default; }
.jpfood-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jpfood-cal-dow { text-align: center; font-size: .7rem; text-transform: uppercase; color: var(--jpfood-muted, #666); padding: 4px 0; }
.jpfood-cal-day { aspect-ratio: 1 / 1; min-height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--jpfood-border-light, #eee); background: #fff; border-radius: var(--jpfood-radius, 8px); cursor: pointer; font-size: .95rem; padding: 0; color: var(--jpfood-accent); }
.jpfood-cal-day.is-disabled { border-color: transparent; background: transparent; color: #c9c9c9; cursor: default; pointer-events: none; }
.jpfood-cal-day.is-past { color: #d7d7d7; text-decoration: line-through; }
.jpfood-cal-day.is-active { background: #7b2ff7; border-color: #7b2ff7; color: #fff; font-weight: 700; }
.jpfood-cal-day:not(.is-disabled):not(.is-active):hover { border-color: #7b2ff7; }

/* Slot "saved" confirmation (order editing) */
.jpfood-slots-saved { display: inline-block; margin-top: 8px; color: #1a7f37; font-weight: 600; opacity: 0; transition: opacity .2s ease; }
.jpfood-slots-saved.is-visible { opacity: 1; }

/* ---- Slot picker popup (trigger field + bottom-sheet / popover) ---- */
.jpfood-slots-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--jpfood-border, #e3e3e3); background: #fff; border-radius: var(--jpfood-radius, 8px); cursor: pointer; font-size: 1rem; color: #333; text-align: left; }
.jpfood-slots-trigger.is-set { border-color: #7b2ff7; font-weight: 600; }
.jpfood-slots-trigger-caret { width: 9px; height: 9px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg); flex: 0 0 auto; margin-top: -3px; }

.jpfood-slots-pop { position: fixed; inset: 0; z-index: 100050; }
.jpfood-slots-pop[hidden] { display: none; }
.jpfood-slots-pop-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; }
.jpfood-slots-pop.is-open .jpfood-slots-pop-overlay { opacity: 1; }
.jpfood-slots-pop-panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; padding: 16px clamp(16px,5vw,24px) calc(20px + env(safe-area-inset-bottom,0px)); max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.jpfood-slots-pop.is-open .jpfood-slots-pop-panel { transform: translateY(0); }
.jpfood-slots-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jpfood-slots-pop-title { font-weight: 700; font-size: 1.05rem; }
.jpfood-slots-pop-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #333; padding: 0 4px; }
.jpfood-slots-pop .jpfood-cal { max-width: none; margin-bottom: 1rem; }
body.jpfood-slots-open { overflow: hidden; }
@media (min-width: 768px) {
	.jpfood-slots-pop-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: 400px; max-width: calc(100% - 2rem); border-radius: 12px; transform: translate(-50%, -46%); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
	.jpfood-slots-pop.is-open .jpfood-slots-pop-panel { transform: translate(-50%, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .jpfood-slots-pop-panel, .jpfood-slots-pop-overlay { transition: none !important; } }

/* ---- Opening-hours banner ---- */
.jpfood-hours-banner { background: #fff4e5; border: 1px solid #f0c98a; color: #8a5a00; border-radius: var(--jpfood-radius, 8px); padding: 12px 16px; margin: 0 0 1.25rem; font-size: .95rem; }

/* ---- Cart-page slot summary row ---- */
.jpfood-cart-slot th { text-align: left; }
.jpfood-cart-slot-empty { color: var(--jpfood-muted, #666); font-style: italic; }

/* ---- Block checkout wrapper ---- */
.jpfood-slots-block { margin: 1.25rem 0; }

/* ---- Calendar keyboard focus ---- */
.jpfood-cal-day:focus-visible, .jpfood-slots-time:focus-visible, .jpfood-slots-trigger:focus-visible, .jpfood-slots-type:focus-visible, .jpfood-cal-nav:focus-visible { outline: 2px solid var(--jpfood-accent, #7b2ff7); outline-offset: 2px; }

/* ---- Slot debug panel (admin only) ---- */
.jpfood-slots-debug { margin-top: 1rem; padding: 12px; border: 1px dashed #b0b0b0; border-radius: 8px; background: #fafafa; font-size: 12px; color: #333; line-height: 1.5; }
.jpfood-slots-debug strong { display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.jpfood-slots-debug table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.jpfood-slots-debug th, .jpfood-slots-debug td { border: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; }
.jpfood-slots-debug .jpf-dbg-ok td { background: #edf9ed; }
.jpfood-slots-debug .jpf-dbg-no td { background: #fdeded; color: #7a2a2a; }

/* ---- Slot debug panel table (scroll on mobile) ---- */
.jpfood-slots-debug-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jpfood-slots-debug-scroll table { min-width: 640px; }
.jpfood-slots-debug .jpf-dbg-src { color: #888; font-size: 10px; }

/* ---- Slot debug: resolved config section ---- */
.jpfood-dbg-cfg { margin: 8px 0; padding: 8px 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; }
.jpfood-dbg-cfg > div { margin: 2px 0; }
.jpfood-dbg-cfg ul { margin: 4px 0 6px 18px; padding: 0; }
.jpfood-dbg-cfg li { margin: 1px 0; }

/* Shown in place of the menu when online ordering is switched off entirely. */
.jpfood-closed-notice{padding:16px 18px;border:1px solid var(--jpfood-accent,#7b2ff7);border-radius:8px;background:rgba(0,0,0,.03);font-weight:600}