/*  max-width: 559px */
@media only screen and (max-width: 559px) {
	.woocommerce-menu-container {
		max-height: 80vh;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* / min-width: 560px */
@media only screen and (min-width: 560px) {
	.woocommerce-menu-item .sub-menu {
		max-height: 80vh;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* Yoyogi Sushi - broaden fix: hide scrollbar visuals on ALL descendants inside mobile menu container and cart dropdown, in case an inner wrapper has its own separate scrollbar. Scrolling function is not changed. */
.woocommerce-menu-container,
.woocommerce-menu-container *,
.woocommerce-menu-item .sub-menu,
.woocommerce-menu-item .sub-menu * {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.woocommerce-menu-container::-webkit-scrollbar,
.woocommerce-menu-container *::-webkit-scrollbar,
.woocommerce-menu-item .sub-menu::-webkit-scrollbar,
.woocommerce-menu-item .sub-menu *::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
/* Yoyogi Sushi - hide order details overview table (order number/date/email/total/payment method) on order-received and view-order pages due to mobile layout breaking with long email/payment text */
body.woocommerce #page .woocommerce-order-overview.order_details,
.woocommerce-order-overview.order_details {
	display: none !important;
}

/* 2026-10-24：放回取餐时间那一行（p.ysp-pickup-line）。要退回旧行为，把下面两行的 :not(.ysp-pickup-line) 删掉即可 */
.woocommerce-order-received .woocommerce-order > p:not(.ysp-pickup-line) { display: none !important; }
.woocommerce-order-received .woocommerce-order-details > p:not(.ysp-pickup-line) { display: none !important; }

/* Yoyogi Sushi - Checkout page "Your order" table: receipt-style layout, product name/qty stays left-aligned, price column right-aligned */
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
.woocommerce-checkout-review-order-table tfoot tr.tax-total td,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	text-align: right;
}

/* Yoyogi Sushi - Checkout page "Your order" table: hide the original
 *    trailing quantity (e.g. "x 1") since a PHP filter now shows the
 *    quantity as a prefix before the product name instead (receipt-style) */
.woocommerce-checkout-review-order-table td.product-name strong.product-quantity {
	display: none;
}


/* Yoyogi Sushi - Checkout page "Your order" table: on mobile, keep the
 *    Tip row (No Tip / 10% / 15% / 20% / Custom $) on a single line just
 *    like on tablet/desktop, by stacking the row label above the button
 *    group (giving it the full row width) and shrinking button/input
 *    spacing slightly so everything fits without wrapping. */
@media only screen and (max-width: 559px) {
	.woocommerce-checkout-review-order-table tr.ysp-tip-row th,
	.woocommerce-checkout-review-order-table tr.ysp-tip-row td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.woocommerce-checkout-review-order-table tr.ysp-tip-row th {
		padding-bottom: 4px;
	}
	.woocommerce-checkout-review-order-table tr.ysp-tip-row td {
		padding-top: 0;
	}
	.ysp-tip-options {
		flex-wrap: nowrap;
		gap: 4px;
	}
	.ysp-tip-options .ysp-tip-btn {
		padding: 4px 8px;
		font-size: 12px;
		white-space: nowrap;
	}
	.ysp-tip-options .ysp-tip-custom {
		width: 60px;
		min-width: 0;
		font-size: 12px;
		padding: 4px 6px;
	}
}

/* Yoyogi Sushi 2026-08-03 - hide header cart. Homepage: hidden for everyone. Other pages: hidden for guests only, logged-in users still see it for testing. Cart/checkout functions are NOT disabled. */
body.home .woocommerce-menu-container { display: none !important; }
body:not(.logged-in) .woocommerce-menu-container { display: none !important; }

/* Yoyogi Sushi 2026-08-05 - page 453 (yoyogi sushi @ USA): put the Location line
   directly under the page title, centered on desktop and tablet. On small phones
   keep it on ONE line by shrinking the font instead of wrapping. */
.page-id-453 .entry-content { margin-top: 12px; }
.page-id-453 .entry-content > p.ysp-loc {
	text-align: center;
	margin-top: 0;
}
@media only screen and (max-width: 480px) {
	.page-id-453 .entry-header .entry-title {
		white-space: nowrap;
		font-size: min(9.2vw, 44.79px);
	}
	.page-id-453 .entry-content > p.ysp-loc {
		white-space: nowrap;
		font-size: min(3.7vw, 18px);
	}
}