/**
 * ChapChap Overflow Fix
 * ---------------------------------------------------------------------
 * Root cause, from real evidence this time (not a guess): an ad title
 * ("TOYOTA HIACE DIESEL TOUR VAN 40% DEPOSIT QUICK SALE. CARS FROM
 * 150K...") was rendering as one long unbroken line running off the
 * right edge of the screen instead of wrapping. A single element doing
 * that is enough to force the ENTIRE PAGE wider than the viewport --
 * by default, browsers don't hide or shrink overflowing content, they
 * just let the whole document grow to fit it and allow horizontal
 * scroll. That's very likely also the real explanation for the
 * repeated "ads shifted right, empty space on left" pattern: the page
 * itself is wider than the phone screen, and what's been shown in
 * screenshots is just the left portion of an over-wide page, not a
 * missing grid.
 *
 * Two-part fix:
 *  1. A universal safety net: hide any horizontal overflow at the
 *     document level, so no single element (a long title, an oversized
 *     image, anything) can ever force the whole page wider than the
 *     screen again, regardless of what causes it in the future.
 *  2. The actual root-cause fix: make long text genuinely WRAP onto
 *     multiple lines (titles, descriptions, prices, breadcrumbs)
 *     instead of running off the edge in the first place -- so content
 *     that used to overflow is now just readable across a couple of
 *     lines, the way it should be.
 */

html, body {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

/* Long, unbroken text (a title with no spaces near the wrap point, a
   long URL-like string, etc.) needs an explicit break permission --
   normal word-wrap only breaks at existing spaces, which isn't always
   enough for the kind of long, keyword-stuffed titles this site uses. */
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
.classiera-box-div, .classiera-box-div * {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Images and embeds should never be able to force page width either --
   a photo uploaded at native camera resolution, without an explicit
   width, is a common independent cause of the same symptom. */
img, iframe, video, embed, object, table {
	max-width: 100% !important;
	height: auto;
}

/**
 * Sidebar / "Recently Viewed" panel overlapping the main content.
 * ---------------------------------------------------------------------
 * Seen directly in a screenshot: a "Recently Viewed" side panel
 * visually overlapping the ad description/contact-buttons content
 * instead of sitting below it on a narrow screen -- a classic sign of
 * a sidebar built with float/absolute-positioning for a desktop
 * two-column layout that isn't being told to stack full-width on
 * mobile. Forces any element that looks like a sidebar to behave: full
 * width, normal document flow, no floating or overlapping position.
 */
@media (max-width: 991px) {
	aside,
	[class*="sidebar" i],
	[id*="sidebar" i],
	[class*="recently-viewed" i],
	[id*="recently-viewed" i] {
		position: static !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		clear: both !important;
	}
}