/* Keep the classic layout readable on screens narrower than the desktop grid. */
@media (max-width: 979px) {
	*, *::before, *::after { box-sizing: border-box; }
	body { font-size: 15px; overflow-wrap: anywhere; }
	:focus-visible { outline: 2px solid #203fa0; outline-offset: 2px; }
	img, video, iframe { max-width: 100%; }
	img, video { height: auto; }

	#top_content, #main_header, #main_content, #main_foot {
		width: auto;
		margin-left: 12px;
		margin-right: 12px;
	}
	#top_bar { height: auto; }
	#top_bar a { display: inline-block; padding: 5px 0; }
	#logo img { max-width: min(100%, 240px); }
	#search_block { margin-bottom: 12px; }
	#searchForm { display: flex; align-items: stretch; gap: 8px; }
	#searchForm .search_input {
		flex: 1;
		width: 0;
		min-width: 0;
		height: 44px;
		margin: 0;
		padding: 0 8px;
		font-size: 16px;
	}
	#searchForm #searchbutton { height: auto !important; flex-shrink: 0; }
	.header_contact { font-size: 14px; }
	.nav {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: auto;
		margin: 12px 0;
		padding: 0;
	}
	.nav li { float: none; height: auto; padding: 0; }
	.nav li:last-child { grid-column: 1 / -1; }
	.nav li a, .nav li a:hover {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 6px 2px;
		font-size: 14px;
		text-align: center;
	}

	#main_content { display: flex; flex-direction: column; }
	.main_left, .main_right, .index_left, .index_right {
		float: none;
		width: 100%;
		min-width: 0;
		overflow: visible;
	}
	.main_left, .index_left { order: 1; margin-top: 16px; }
	#main_content > .link { order: 2; }
	.pos_nav { width: auto; }
	.sub_menu, .ubb_post { max-width: 100%; }
	.categy_list li.categy_li, .factory_list li.factory_li { width: 50%; padding-right: 8px; }
	#categy_py_ul li, #factory_py_ul li { width: auto; min-width: 28px; text-align: center; }
	.page_nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
	.page_nav li { margin: 0; }
	.page_nav a { display: block; margin: 0; padding: 5px 8px; }

	/* A product row becomes a card with its photo beside the name and price. */
	#prdt_list, #prdt_list tbody, .cart-items, .cart-items tbody {
		display: block;
		width: 100%;
		border: 0;
	}
	#prdt_list thead, .cart-items thead { display: none; }
	#prdt_list tbody tr, .cart-items tbody tr {
		display: grid;
		grid-template-columns: minmax(64px, 24%) minmax(0, 1fr);
		gap: 8px 12px;
		padding: 12px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
	}
	#prdt_list td, .cart-items td { width: auto; min-width: 0; padding: 0; border: 0; }
	#prdt_list td:nth-child(n+3), #prdt_list td[colspan] { grid-column: 1 / -1; }
	#prdt_list img { width: 100%; }
	.cart-items td:first-child:not([colspan]) { display: none; }
	.cart-items td:nth-child(3) { grid-area: 1 / 1; }
	.cart-items td:nth-child(2), .cart-items td:nth-child(n+4) { grid-column: 2; }
	.cart-items td[colspan] { grid-column: 1 / -1; }
	.cart-items td:nth-child(4)::before { content: "数量"; margin-right: 8px; }
	.cart-items td:nth-child(5)::before { content: "备注"; display: block; }
	.cart-items td:nth-child(5) input { width: 100%; }

	/* Imported technical tables can scroll inside the content section. */
	.description, .news_content, .gonggao, .tuijian, .side_block,
	.main_right > form > table, .main_right > table { max-width: 100%; overflow-x: auto; }
	.main_right > form > table, .main_right > table { display: block; }
	.main_right input, .main_right textarea, .main_right select { max-width: 100%; font-size: 16px; }
	form[action="/order/create/"] > table:last-of-type { display: table; width: 100%; table-layout: fixed; }
	form[action="/order/create/"] > table:last-of-type td:first-child { width: 30%; }
	form[action="/order/create/"] > table:last-of-type input:not([type="submit"]) { width: 100%; }
	#product-downloads a { display: inline-block; padding: 8px 0; }
}