* {
			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: 0 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;
		}
		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: 5px;

			/* border: 1px solid red; */
			/* margin-bottom: 5px; */
		}
		.row_inner { /* ............. Overrides .checkout_row above */
			/* border: none; */
			padding: 5px;
			flex-wrap: nowrap;
		}
		.spacer_1 {
			min-width: 2.4%;
			/* border: 1px dashed red; */
			margin: 0 5px;
		}
		.spacer_2 {
			min-width: 1.7%;
			/* border: 1px dashed red; */
			margin-left: 5px;
		}
		.zoom_spacer {
			min-width: 2.5%;
			/* border: 1px solid red; */
			margin-right: 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;
      margin-bottom: 0;

			width: 510px;
			flex-grow: 1;

      overflow-x: auto;
		}
		.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;
    }
    .description_text {
      line-height: 120%;
    }
    #prod_description_heading_div {
      padding: 4px 13px 4px 13px; /* top .. right .. bottom .. left */
      margin-bottom: 3px;

      /* border: 1px solid blue; */
    }
    h2#prod_description_heading {
      font-size: 20px;
      text-decoration: underline;
      color: #017b05;
      margin: 0;
    }
    #prod_description_text {
      font-size: 16px;
      font-family: arial;

      padding: 3px;
      /* border: 1px solid orange; */
    }
    #prod_description_text li {
      color: #CE7403;
      margin-bottom: 15px;
      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 & Thumbnails --- START --- */

		.product_thumbnail {
			border: 1px solid black;
			padding: 5px;
			width: 20%;
			z-index: 35; /* 35 & 40 ... "product_thumbnail" = child of = "row_inner" ... "Z" is simply relative to: parent container */

      min-height: 175px; /* 2024 thumbnail scrollbar... in JS (see JS notes) you've added: "my_image.complete" and "my_image.onload", because without them... */
                         /* product_thumbnail could load with 0 height if JS computed it before "myimage" had finished loading. Therefore this acted as a... */
      overflow-y: auto;  /* backup by keeping the height at a reasonable minimum value. However, I've decided to leave this min-height: 175px enabled anyway */
		}
		.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 */
		}
		.img-zoom-container {
			position: relative;
			width: 80%;
			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%;

			-ms-transform: scale(1.0); /* IE 9 */
			-webkit-transform: scale(1.0); /* Safari 3-8 */
			transform: scale(1.0);
			transition: .5s ease;
		}

		/* Product Image & Thumbnails --- END --- */

		.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: "[object 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;
		}
    #proportional_discount_div {
      /* border: 1px solid gray; */
      margin: 0 0 20px 0; /* top .. right .. bottom .. left */
      text-align: center;
    }
    #discount_message_span {
      color: green;
    }
		table#prod_detail_tbl {
			width:100%;
			font-size: 11px; /* changed to 13px for larger than 700px wide viewport in @media further down */
			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: 5px 5px 5px 5px; /* changed for larger than 700px wide viewport in @media further down */
			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(7) td {
			background-color: #F5F5F5;
		}
		.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: 15px;

			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 5px 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: 0 10px 0 10px; /* top .. right .. bottom .. left */

			width: 250px;
			flex-grow: 1;
		}
		.info_link_button {
			width: 100%;
			background-color: #436595;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: 3px 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;
		}

    /* Image Figures Gallery */

		#image_container_header_text { /* this is the text above the images */
			font-size: 20px;
			text-align: center;
			text-decoration: underline;

      padding: 5px 10px 5px 10px;
			margin: 0 20px 15px 20px; /* top .. right .. bottom .. left */
      color: #017b05;
      /* border: 1px solid green; */
		}
    #images_grid_container_outer {
      position: relative;
      /* border: 3px solid green; */
      transition: height 0.75s ease;
    }
    #images_grid_container_outer img {
      max-width: 100%;
    }
    #gallery_overlay {
      position: absolute;
      background-color: #000000;

      opacity: 0;

      /* border: 3px solid green; */
      height: 100%;
      width: 100%;

      z-index: 5;

      transition: opacity 0.75s ease;

      display: none;
    }
		#images_grid_container, #images_grid_container_2 {
			/* relative is needed so that absolute is relative to "images_grid_container" instead of to the whole page... "$(this).css({ position: "absolute", left: 0 })" */
			position: relative;

			display: grid;
      grid-template-columns: 0.723fr 0.723fr 1fr 1fr;
      /* grid-template-rows: 1fr 1fr; */ /* this is controlled in the JS */
			column-gap: 9px;
			row-gap: 9px;

			/* border: 1px dashed red; */
			transition: height 0.75s ease;
		}
    #images_grid_container_2 {
      margin-top: 9px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
		}
    #clone {
      z-index: 10;
    }
		.clone_class /* note that this class (i.e. notice the green font) seems to override figure, even though figure is listed after this */
		{
			transition: opacity 0.75s ease, left 0.75s ease, top 0.75s ease, width 0.75s ease, height 0.75s ease;
		}
		figure {
			border: 1px solid #C0C0C0;
			margin: 0;
		}
		figcaption {
			text-align: center;
			padding: 0 0 3px 0; /* note that "auto" is not a valid value for padding, hence I'm using 0 instead */
			margin: auto 7px auto 7px; /* top .. right .. bottom .. left */
		}
		.image_figures {
			font-size: 10px;
			color: rgb(118, 0, 118);
		}
		.toggle_enlarge_text { /* this class is toggled on/off in JS when a figure is clicked on */
			font-size: 15px;
			color:rgb(255, 255, 255);
		}

    /* Responsive @media CSS */

		@media only screen and (min-width: 700px)	{
			.image_figures {
				font-size: 14px;
			}
			.toggle_enlarge_text {
				font-size: 22px;
				color:rgb(255, 255, 255);
			}
      table#prod_detail_tbl {
        font-size: 13px;
      }
      table#prod_detail_tbl th, table#prod_detail_tbl td {
        padding: 7px 5px 7px 10px; /* top .. right .. bottom .. left */
      }
		}
		@media only screen and (min-width: 1200px) {
			.image_figures {
				font-size: 16px;
			}
			.toggle_enlarge_text {
				font-size: 26px;
				color:rgb(255, 255, 255);
			}
		}

		/* Container queries only works for elements with so-called "definite size". So it turns out that if apply them to: <figure class="image_figures">, they collapse */
		/* #images_grid_container
		{
			container-type: inline-size;
		}
		@container (min-width: 700px)
		{
			.image_figures
			{
				font-size: 13px;
			}
		}
		@container (min-width: 1200px)
		{
			.image_figures
			{
				font-size: 16px;
			}
		} */