/*
 * mobile.css - phone/tablet overrides for the 960 grid skin (960.css + os_960.css).
 * Everything is inside max-width media queries, so desktop (>= 960px) is untouched.
 */
@media (max-width: 959px) {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

	/* ---- 960 grid -> single fluid column ---- */
	.container_16 {
		width: auto;
		max-width: 100%;
		padding: 0 8px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.container_16 .grid_1, .container_16 .grid_2, .container_16 .grid_3, .container_16 .grid_4,
	.container_16 .grid_5, .container_16 .grid_6, .container_16 .grid_7, .container_16 .grid_8,
	.container_16 .grid_9, .container_16 .grid_10, .container_16 .grid_11, .container_16 .grid_12,
	.container_16 .grid_13, .container_16 .grid_14, .container_16 .grid_15, .container_16 .grid_16 {
		width: auto;
		float: none;
		display: block;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}
	.container_16 [class*="prefix_"] { padding-left: 0; }
	.container_16 [class*="suffix_"] { padding-right: 0; }
	.container_16 [class*="push_"], .container_16 [class*="pull_"] { left: 0; }

	/* left sidebar (rendered before the content in the DOM) goes after it, above the footer */
	.container_16 > .grid_2 { order: 1; }
	.container_16 > #footer { order: 2; }

	/* content column scrolls sideways instead of widening the page */
	.container_16 > .grid_14:not(#footer),
	.container_16 > .grid_16:not(#navbar):not(.camera_wrap) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* ---- hard-coded widths from os_960.css ---- */
	#navbar_top, #navbar { width: auto; }
	.btn { width: 300px; max-width: 100%; }
	.region_width { max-width: 100%; }
	#s3slider1, #s3slider1Content { width: auto; max-width: 100%; }
	.s3slider1Image span { width: auto; right: 0; }
	.logo { height: auto; }

	/* ---- media ---- */
	img, iframe, video, embed, object { max-width: 100%; }
	img[width] { height: auto; }  /* camera.js sizes its slides with inline styles, so they are unaffected */

	/* ---- tables ---- */
	table { max-width: 100%; }
	.container_16 td[width], .container_16 th[width] { width: auto; }

	/* ---- navbar: logo splash scales, menu cells wrap into a grid ---- */
	/* the logo splash moves from the table onto the (home-only) logo cell so it scales and never peeks behind the wrapped menu */
	#navbar table { background-image: none; }
	#navbar table, #navbar tbody { display: block; width: 100%; }
	#navbar tr { display: flex; flex-wrap: wrap; width: 100%; }
	#navbar table td { flex: 0 0 100%; box-sizing: border-box; padding: 0; }
	#navbar td.logo {   /* top 600/940 of menu_bgLogo.jpg: circle + slogan */
		height: 0;
		padding-top: 64%;
		background: url(../img/menu_bgLogo.jpg) no-repeat center top;
		background-size: 100% auto;
	}
	#navbar td.logo_hide { display: none; }           /* empty 0px-high cell */
	#navbar td.menubutton {
		flex: 0 0 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 0;
		margin: 0;
		border: 1px solid #fff;
		box-sizing: border-box;
	}
	#navbar td.menubutton a {
		display: block;
		width: 100%;
		min-height: 40px;
		padding: 6px 2px;
		box-sizing: border-box;
		line-height: 1.4;
	}

	/* ---- sidebar: centred, links get tap room ---- */
	.container_16 > .grid_2 { text-align: center; padding: 8px 0; border-top: 1px solid #ddd; }
	.container_16 > .grid_2 > img[src*="left_colA"] { display: none; }  /* 120x400 decorative strip */
	.container_16 > .grid_2 a { display: inline-block; padding: 6px 4px; }

	/* ---- /products: search box + category thumbnail grid (5 fixed columns -> wrapping cells) ---- */
	.product_search #query { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; padding: 6px; } /* >=16px: no iOS zoom on focus */
	.Product_Type table { display: block; width: 100%; }
	.Product_Type tbody { display: flex; flex-wrap: wrap; width: 100%; }
	.Product_Type tr { display: contents; }  /* the template emits 5 cells per <tr>; flow all cells as one grid so rows stay full */
	.Product_Type td { display: block; flex: 0 0 25%; box-sizing: border-box; padding: 6px; text-align: center; }
	.Product_Type td a { display: block; }
	.Product_Type td img { width: 100%; height: auto; max-width: 160px; }  /* sources are 100x75 */

	/* ---- /ptags/index/N: 3 products per row as (thumb, name) cell pairs -> one product per row,
	   image 40% / text 60%. The template serves the full product image via srcset at this width. ---- */
	.related table, .related tbody { display: block; width: 100%; }
	.related tr { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #ddd; }
	.related td { display: block; box-sizing: border-box; height: auto; padding: 8px 4px; }
	.related td:nth-child(odd) { flex: 0 0 40%; max-width: 40%; text-align: center; }
	.related td:nth-child(even) { flex: 0 0 60%; max-width: 60%; }
	.related td:nth-child(odd) img { width: 100%; height: auto; max-width: 220px; }

	/* ---- footer: stack the three cells ---- */
	#footer table, #footer tbody, #footer tr, #footer td { display: block; width: auto; }
	#footer td { text-align: center; padding: 6px 0; }
}

@media (max-width: 599px) {
	body { font-size: 16px; line-height: 1.6; }
	#navbar td.menubutton { flex-basis: 33.3333%; font-size: 13px; }
	.Product_Type td { flex-basis: 33.3333%; }
	#navbar td.menubutton a { min-height: 44px; }
	#footer td a, .container_16 > .grid_2 a { display: inline-block; padding: 8px 4px; }
	table th, table td { padding: 4px 3px; }
}