/* === RWD patch (non-invasive) for seansean.com.tw ===
   Goal: keep original layout & image positions as much as possible,
   while making pages usable on phones/tablets.
   Loaded AFTER style.css so it can override safely.
*/
html {
	-webkit-text-size-adjust: 100%;
}

/* Avoid global overflow-x: visible;because it can visually clip pills/shadows.
   Instead, keep layout within viewport via max-width rules below. */
body {
	margin: 0;
	max-width: 100%;
	overflow-x: visible;
}

img {
	max-width: 100%;
	height: auto;
}

/* Keep desktop max width, but allow shrinking */
.main,
#main {
	width: 100% !important;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding-left: 12px;
	padding-right: 12px;
}

/* Footer: remove fixed width & negative offset on small screens */
#footer {
	width: 100% !important;
	max-width: 1000px;
	box-sizing: border-box;
}

/* Products area: allow it to shrink */
#products {
	width: auto !important;
	max-width: 766px;
	box-sizing: border-box;
}

/* Info area */
#info table {
	max-width: 100%;
}

/* Generic safety: prevent long words/urls from breaking layout */
* {
	word-wrap: break-word;
}

a {
	word-break: break-word;
}

/* ====== Breakpoints ====== */
@media (max-width: 992px) {
	#top-menu {
		letter-spacing: normal;
	}
}

@media (max-width: 768px) {
	/* Remove table-driven multi-column layout on phones */
	#info table,
	#info tbody,
	#info tr,
	#info td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Clear floats so columns stack */
	#products {
		float: none !important;
		max-width: none;
		background: none;
	}

	#products td table[width="670"],
	#products td table[width="670"] tbody,
	#products td table[width="670"] tr,
	#products td table[width="670"] td {
		display: block;
	}

	#products td table[width="670"] td {
		width: 47%;
		display: inline-block;
	}

	/* Slideshow: don't force fixed height */
	#slideshow {
		height: auto !important;
	}

	/* Footer: make it flow naturally */
	#footer {
		position: static !important;
		top: auto !important;
		left: auto !important;
		height: auto !important;
		padding: 10px 12px !important;
	}

	/* Top menu: center & wrap */
	#top-menu {
		height: auto !important;
		text-align: center !important;
		padding: 0 !important;
		line-height: 1.8;
	}
}

@media (max-width: 480px) {
	.main,
	#main {
		padding-left: 10px;
		padding-right: 10px;
	}
	#products td table[width="670"] td {
		width: 100%; 
	}
}