* {
			box-sizing: border-box;
		}
		
		body {
			font-family: Arial;
			margin: 0;
		}

		#gtm_logo {
			position: relative;
			width: 95%;
			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
		}

		#gtm_logo img
		{
			max-width: 65%;
		}
		
		/* ....... Main columns */ /* ... DON'T FORGET You can use ... WORD-WRAP! ... https://www.w3schools.com/cssref/css3_pr_word-wrap.asp */	
		
		#prod_detail_container {		 
			 position: relative;
			 width: 95%;
			 /* margin: 50px auto 10px auto; */ /* top .. right .. bottom .. left */
			 margin: 12px auto 10px auto; /* top .. right .. bottom .. left */
			 padding: 2px;		 
			 border: 1px solid green;
			 
			 z-index: 40;
		 }
		 
		#product_cat_block { /* width commented in ... navbar_middle_mega.css ... because it is controlled here */
			 width: 95%;
		}
		
		#navbar_top_inner { /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
			width: 95%;
		}
		 
		 @media only screen and (min-width: 1600px) { /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
			#gtm_logo, #prod_detail_container, #product_cat_block, #navbar_top_inner, #footer_inner {
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... home_page.css */
				width: 70%;
			}
		}
		
		/* ...................................... BREADCRUMBS - Start ........................................ */
		
			/* (Link 2) https://www.w3schools.com/howto/howto_css_breadcrumbs.asp */				
			/* (Link 1) https://www.w3schools.com/cssref/css_entities.asp */
	
		ul.breadcrumb {
			padding: 10px 16px;
			list-style: none;
			background-color: #eee;				
			border: 1px solid green;
			margin: 5px auto 6px auto; /* top .. right .. bottom .. left */
		}
		ul.breadcrumb li {
			display: inline;
			/* font-size: 18px; */ /* commented 06-06-2024 */
		}
		ul.breadcrumb li+li:before {
			padding: 8px;
			color: black;
			content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
		}
		ul.breadcrumb li a {
			color: #0275d8;
			text-decoration: none;
		}
		ul.breadcrumb li a:hover {
			color: #F29445;
			text-decoration: underline;
		}
		ul.breadcrumb li#fixed_text {
			color: #74730E;
		}
		
		/* ...................................... BREADCRUMBS - End .......................................... */
		
	  .prod_detail_row, .row_inner { /* .............. https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_justify-content */
			display: -webkit-flex; /* Safari */
			-webkit-justify-content: center; /* Safari 6.1+ */
			
			display: flex;
			flex-wrap: wrap;
			justify-content: centre;
			
			padding: 10px;		  
			/* border: 1px dashed green; */
			
			margin-bottom: 5px;
		}	
		
		.row_inner { /* ............. Overrides .checkout_row above */
			/* border: none; */
			padding: 5px;
			flex-wrap: nowrap;
		}
		
		.spacer_1 {
			min-width: 6.0%;
			/* border: 1px dashed red; */
			margin: 0 5px;
		}
		
		.spacer_2 {
			min-width: 5.5%;
			/* border: 1px dashed red; */
			margin-left: 5px;
		}
			 
		.prod_detail_col {			
			padding: 5px;
			border: 1px solid blue;	 		
			/* width: 50%; */ /* 100% produces same result ... if commented then the images determine the left column to be much larger than the right column */
			margin: 3px;
			
			width: 510px;
			flex-grow: 1;
		}
		
		.prod_detail_title
		{ 
			padding: 5px;
			margin: 0 0 7px 0; /* top .. right .. bottom .. left */
			
			/* border: 1px dotted blue; */
			
			text-align: center;
			text-decoration: underline;
		}
		
		h1
		{
			color: #3916A2;
			
			font-size: 24px;
			font-family: arial;
			font-weight: bold;
			
			margin: 0;
		}
		
		#prod_description_container
		{
			padding: 3px;
			border: 1px solid green;
			margin-top: 15px;
		}		
			p:first-of-type
			{
				margin-top: 6px;
			}
			
			p:last-of-type
			{
				margin-bottom: 6px;
			}
		
			p 
			{
				margin: 10px;
			}
		
			#prod_description_heading_div
			{				
				padding: 4px 13px 4px 13px; /* top .. right .. bottom .. left */
				margin-bottom: 3px;
				
				/* border: 1px solid blue; */
			}

			h2#prod_description_heading
			{
				color: #3916A2;
				
				font-size: 19px;
				font-family: arial;
				font-weight: bold;
				text-decoration: underline;
				
				margin: 0;
			}
		
			#prod_description_text
			{
				font-size: 16px;
				font-family: arial;
				
				padding: 3px;
				/* border: 1px solid orange; */
			}
		
			#prod_description_text li
			{
				color: #CE7403;
				/* margin: 0; */				
				
				line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
			}
			
			#prod_description_text li span
			{
				color: black;
				line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
			}
		
		/* ...................................... PRODUCT IMAGE SECTION - Start ........................................ */			
		
		.product_thumbnail {
			border: 1px solid black;
			padding: 5px;
			width: 19%;
			z-index: 35; /* 35 & 40 ... "product_thumbnail" = child of = "row_inner" ... "Z" is simply relative to: parent container */
		}
		
		.thumbnail_box {
			/* border: 1px solid blue; */ /* Reduces image with by 1px ... which scales height accordingly ... resulting in white region at bottom of image = All Normal! */
			padding: 2px;
			margin-bottom: 10px;
		}
		
		.thumbnail_box img {
			width: 100%; /* sets (restricts) the image to its container size ... else it's massive and covers the screen */
			opacity: 1.0;
			transition: 0.5s ease;			
		}
		
		.thumbnail_box img:hover { /* scaling ... Or! ... border ... requires ... stacking contexts */
									 /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
									 /* https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate */
			opacity: 0.75;
				/* border: 1px solid red; */
			-ms-transform: scale(1.02); /* IE 9 */
			-webkit-transform: scale(1.02); /* Safari prior 9.0 */			
			transform: scale(1.02); /* Standard syntax */ /* https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate */
		}
		
		/* ...................................... PRODUCT IMAGE SECTION - End .......................................... */		
				
		/* ...................................... IMAGE ZOOM - Start ................................................... */
			
		.zoom_spacer {
			min-width: 7%;
			/* border: 1px dashed red; */
			margin-right: 5px;
		}		
	
		.img-zoom-container {
			position: relative;				

			/* border: 1px solid green; */ /* Reduces image with by 1px ... which scales height accordingly ... resulting in white region at bottom of image = All Normal! */
			
			/* padding: 5px; */ /* Don't do this ... Explanation: (If you do the lens doesn't line up perfectly with image)
			/* ----------------------------------------------------------------------------------------------------------- */
			/* 1) The lens pops into existance when mouse is over ... image Parent! container
			   2) The lens default position therefore is: top-left (0,0) relative to the parent container
			   3) The lens size & position are based on the image size
			   4) Adding padding moves image from edges ... BUT! lens position is calculated relative to parent container without padding */ 
			   
			width: 60%;	
			
			z-index: 40; /* 35 & 40 ... "img-zoom-container" = child of = "row_inner" ... "Z" is simply relative to: parent container */
		}		
		.img-zoom-container img {
			/* border-radius: 8px; */
			
			max-width: 100%; /* sets (restricts) the image to its container size ... else its massive and covers the screen */
			/* height: auto; ... didn't fix Firefox BUG! ... SEE NOTES IN: product_detail_page.php ... the issue is ...
			/* ------------------------------------- */
			/* IMAGE HEIGHT GETS REPORTED AS Zero about 1/2 the time ... but setting "backgroundSize" which uses it ... to "AUTO" by only */
			/* stating the width fixes the issue */
			
			-ms-transform: scale(1.0); /* IE 9 */
			-webkit-transform: scale(1.0); /* Safari 3-8 */
			transform: scale(1.0);				
			transition: .5s ease;
		}		
		.img-zoom-result
		{
			visibility: hidden;
			
			position: absolute;
			left: 110%;
			top: -5%;
			
			border: 1px solid #d4d4d4;
			
			/* set the size of the result div */
			width: 110%;
			height: 110%;
		}
	
		.img-zoom-lens-control {			
			visibility: hidden;
			
			position: absolute;
			border: 1px solid #d4d4d4;
			cursor: crosshair;
			background-color: red;
			opacity: 0.15;
			filter: alpha(opacity=15); /* For IE8 and earlier */				

			/*set the size of the lens:*/
			width: 50%;
			height: 50%;
			
			z-index: 10;
		}

		.img-zoom-lens-see {			
			visibility: hidden;
			
			position: absolute;
			border: 1px solid red;        

			/*set the size of the lens:*/
			width: 50%;
			height: 50%;
			
			z-index: 10;
		}			
			
		/* ...................................... IMAGE ZOOM - End ................................................... */
			
		/* ...................................... OLD CHECKOUT STUFF .......................................... */	
		
		.options_container {
			padding: 10px;
			border: 1px solid gray;
			margin-bottom: 15px;
		}
		
		.dropdown_container {
			margin-bottom: 5px;
		}
		
		select {
		/* display: inline-block; ... Not needed! ... window.getComputedStyle(size, null).getPropertyValue("display") ... reports: "[objetc HTMLSelectElement]" */
			width: 100%;
			padding: 7px 15px;
			margin: 8px 0;																	
			border: 1px solid #ccc;
			border-radius: 4px;																	  
			font-size: 15px;
		}
		
		.dropdown_heading {
			text-decoration: underline;
		}
		
		.table_container {
			padding: 10px;
			/* border: 1px solid gray; */
			overflow-x: auto; /* Not really required because flex responsiveness already moves column to next row down */
			
			transition: 0.5s;
		}
		
		table#prod_detail_tbl {
			width:100%;
			font-size: 13px;
			font-family: Arial;
			margin-bottom: 17px;
		}
		
		table#prod_detail_tbl, table#prod_detail_tbl th, table#prod_detail_tbl td {
			border: 1px solid gray;
			border-collapse: collapse;
		}
		
		table#prod_detail_tbl th, table#prod_detail_tbl td {
			padding: 7px 5px 7px 10px; /* top .. right .. bottom .. left */
			text-align: left;
		}
		
		.main_heading {			
			color: #8B008B;
			font-size: 15px;
			font-style: italic;
			text-decoration: underline;
			margin: 0;
		}
		
		.data_title {			
			color: #336BB1;
			font-size: 13px;
			text-decoration: underline;
			margin: 0;
		}		
		
		table#prod_detail_tbl tr:nth-child(1) td {			
			background-color: #F5F5F5;
		}
		
		table#prod_detail_tbl tr:nth-child(1n + 2) td {			
			background-color: #FEFEFD;
		}
		
		table#prod_detail_tbl tr:nth-child(1n + 2) th {			
			background-color: #FDFDFE;
		}
		
		table#prod_detail_tbl tr:nth-child(6) td {			
			background-color: #F5F5F5;
		}
		
		/* input[type=submit] { */ /* https://www.w3schools.com/css/tryit.asp?filename=trycss_forms */
		/* width: 100%;
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			
			margin: 35px 0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 17px;
			transition: 0.5s;
		}
		
		input[type=submit]:hover {
			background-color: #d88838;
		} */	
		
		.qty_price_div {
			margin: 0 auto 20px 20px; /* top .. right .. bottom .. left */
		}
		
		#enter_qty, #product_code { 
			color: green;
			font-style: none;			
			text-decoration: none;
		}
		
		#kit_price_span, #kit_price {			
			color: #C93E3E;
			font-size: 19px;
			font-style: italic;
			/*font-weight: bold;*/
			text-decoration: underline;		
		}
		
		#kit_price_span { margin-left: 10px; }
		
		.submit_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
			width: 100%;			
			border: 1px solid gray;
			border-radius: 4px;
			background-color: #4CAF50;

			margin-bottom: 20px;
			
			color: #FFFFFF;
			text-align: center;
			font-size: 17px;
			padding: 10px;
			
			transition: all 0.5s;
			cursor: pointer;			
		}
		
		.submit_button:hover {
			background-color: #d88838;
		}
		
		.submit_button span {
			cursor: pointer;
			display: inline-block; /* somehow corrects vertical alignment discrepancy of ">>" character */
			position: relative;			
			transition: padding-right 0.5s; /* transition all ... to also slowly change colour*/
		}
		
		.submit_button:hover span {
			padding-right: 25px; /* Magic!: moves "Submit" text left ... padding does effect document flow ... even when position is: absolute ... */
		}
		
		.submit_button span::after {
			content: '\00bb';
			position: absolute; /* like for zoom-image ... this stops this! element from effecting the document flow ... so keeps "Submit" text in the middle */
			opacity: 0;					/* But! see how padding below ... does its Magic! */
			top: 0;
			right: -20px; /* offsets ">>" character to the right side of span ... "+" = to the left ... "-" = to the right ... a bit strange */
			transition: right 0.5s; /* transition all ... to also slowly change colour*/
		}
		
		.submit_button:hover span::after {
			opacity: 1;
			right: 0; /* moves ">>" character left */
		}			
		
		.info_link_container {
			padding: 5px 25px 15px 25px; /* top .. right .. bottom .. left */
			
			/*padding: 5px;*/
			border: 1px solid blue;	 		
			/* width: 50%; */ /* 100% produces same result ... if commented then the images determine the left column to be much larger than the right column */
			margin: 3px;
			
			width: 250px;
			flex-grow: 1;
		}
		
		.info_link_button {
			width: 100%;
			background-color: #436595;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: 2px solid #16d0d0;
			border-radius: 4px;
			cursor: pointer;
			font-size: 24px;
			box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
			transition: 0.5s;			
		}
		
		.info_link_button:hover {
			background-color: #d07316;
		}