/**
 * Brina — phone horizontal overflow / side-drift fixes (owner, 2026-10-05).
 *
 * PHONE ONLY: every rule is inside @media (max-width: 767px), the Bricks
 * "Mobile landscape" breakpoint (small phone = "Mobile portrait", 478px).
 * Tablet (768–1200px) and desktop are not affected.
 *
 * Audit (45 routes × 320/360/390/430/478/767, plus 51 open-UI states and a
 * long-content stress test) found two components that make the document
 * wider than the phone viewport. They are corrected at their source first;
 * the root guard at the end is defensive only.
 */

@media (max-width: 767px) {

	/* 1. Dokan store listing (/store-listing/): Dokan gives the list wrapper
	      Bootstrap-style "margin: 0 -15px"; on phones its parent has no
	      side padding to absorb it, so the list stuck out 15px on both
	      sides (scrollWidth = viewport + 15px). */
	body #dokan-seller-listing-wrap {
		margin-right: 0;
		margin-left: 0;
	}

	/* 2. Order received / Thank You: the phone overview grid uses
	      "grid-template-columns: 1fr", whose minimum is the longest
	      unbreakable value — a long email address made the column (and the
	      page) ~625px wide. Let the column shrink and long values wrap. */
	body .woocommerce-order-overview.order_details {
		grid-template-columns: minmax(0, 1fr);
	}

	body .woocommerce-order-overview.order_details > li,
	body .woocommerce-order-overview.order_details > li strong {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/*    Same page, customer details: the billing/shipping address and the
	      email line kept long unbreakable values (company name, email) on
	      one line, past the viewport (~560px). */
	body .woocommerce-customer-details address,
	body .woocommerce-customer-details address p {
		overflow-wrap: anywhere;
	}

	/* 3. Defensive root guard (same as the approved phone homepage lock,
	      without its touch-action rule). No phone page measured wider than
	      the viewport after 1–2, but the root was unlocked (overflow-x:
	      visible, overscroll-behavior-x: auto), which lets a diagonal swipe
	      move / rubber-band the page sideways on a real phone and lets any
	      device-only overflow widen it.
	      - overflow-x: clip — the document can never be wider than the
	        viewport; clip creates no scroll container, so sticky headers,
	        sticky bars and vertical scrolling are unaffected;
	      - overscroll-behavior-x: none — no sideways bounce of the page.
	      Rails, carousels and galleries scroll inside their own containers
	      and keep their horizontal swipe (no touch-action change here).
	      Not applied to the Dokan seller dashboard (separate seller
	      architecture; not audited, its tables may rely on page scrolling). */
	html:has(body:not(.dokan-dashboard)),
	body:not(.dokan-dashboard) {
		max-width: 100%;
		overflow-x: hidden; /* fallback for browsers without overflow: clip */
		overflow-x: clip;
		overscroll-behavior-x: none;
	}
}