#mini_bask_container
		{
			position: relative;
			width: 100%;
			background-color: #2d5c52;
			margin: 7px auto 0 auto; /* top .. right .. bottom .. left */

			/* border: 2px solid orange; */ /* Important ... !!!!! Enable! This! to see the: ... Outer! Division ... to help understand layout !!!!! */
			/* padding: 3px; */

					z-index: 60; /* 30; */
		}

		@media only screen and (min-width: 1600px) /* Changed from 1450 to 1600 on 18-05-2024... to match: product_detail_page.css */
		/* @media only screen and (min-width: 1450px) */
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */

			#mini_bask_container
			{
				width: 70%;
			}
		}

		#mini_bask_price_parent
		{
			display: flex;
			justify-content: space-between;

			position: relative;
			font-size: 0.94em;

			/* padding: 3px 3px; */ /* vertical ... horizontal */

			/* border: 1px solid blue; */
		}

		nav /* controls the spread of the buttons */
		{
			/* border: 1px solid yellow; */

			flex-grow: 0.55;
		}

		.dropbtn:hover, .dropbtn_2:hover, .dropbtn_3:hover, .dropbtn_4:hover, .dropbtn_5:hover
		{
			cursor: cell;
		}

		#site_info_buttons_div
		{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			color: white;
			text-decoration: none;
		}

		.site_info_buttons
		{
			display: block;

			padding: 9px;
			color: white;

			margin-top: 0;
			margin-bottom: 0;
			font-size: 18px;
			text-decoration: none;
			/* border: 1px solid pink; */ /* #2d5c52; */
			border: 1px solid #2d5c52;
		}

		.site_info_buttons:hover
		{
			background-color: #6a936a;
			border: 1px solid orange;
		}

		#mini_bask_price
		{
			color: white;
			background-color: #337b88;
			border: 1px solid #585858;
			font-size: 17px;
			padding: 9px 7px; /* make 5px vertical: same value as ... ".site_info_buttons" ... above */

			transition: 0.5s;
		}


				@media only screen and (max-width: 1200px)
				{
					.site_info_buttons
					{
						font-size: 12px;
						padding: 6px;
					}

					#mini_bask_price
					{
						font-size: 12px;
					}
				}


		#mini_bask_price:hover
		{
			cursor: cell;

			color: #812573;
			background-color: #D3F1D8;

			border: 1px solid #BE04AE;
		}

		#mini_basket /* Note ... JS is used to trigger: "mini_basket" ... because "mini_basket" is NOT! within "mini_basket_price" */
		{
			overflow: hidden; /* "overflow: hidden" is required ... else the entire div content (apart from background color) is still visible ... however ... when more than 2 to 3 items in the basket ... its 100% height which is actually 100% of its: banner image parent element (in the case of homepage) is simply not enough height ... therefore use: 1) scroll ... or 2) auto ... BUT!!! auto is set in JS which: "stops scroll bar displaying ... during mini basket: 0 to 100% height transition" */

			max-height: 0;

			position: absolute;

			background-color: orange;

			right: 0;
			transition: 0.5s;

			border: none; /* set in ... mini_basket_container.php */
		}

		.mini_bask_item_title
		{
			/* padding: 3px 9px; */ /* vertical ... horizontal */

			font-style: italic;
			text-align: center;
			padding: 3px 9px; /* vertical ... horizontal */
		}

		table.mini_bask_tbl
		{
			font-family: arial, sans-serif;
			border-collapse: collapse;
			background-color: #f0f0f5;
			width: 100%;
		}

		table.mini_bask_tbl td, table.mini_bask_tbl th
		{
			border: 1px solid #dddddd;
			background-color: #f0f0f5;
			text-align: left;
			padding: 5px 7px; /* vertical ... horizontal */
		}

		table.mini_bask_tbl td.feature_row
		{
			font-size: 15px;
			background-color: #F4EFD4;
		}

		#mini_bask_cost_div
		{
			padding: 3px 9px; /* vertical ... horizontal */
			color: white;
			background-color: blue;
			text-align: center;
		}

		#mini_bask_cost_btns_div
		{
			display: flex;
			justify-content: space-around;

			background-color: #FEE4BF;
			text-align: center;

			padding: 0 3px 0 3px; /* top .. right .. bottom .. left */
		}

		#mini_bask_cost_btns_div > div /* mini basket "View Basket" & "Checkout" buttons */
		{
			background-color: #D2EEDE;

			border: 1px solid green;

			margin: 6px 3px 6px 3px; /* top .. right .. bottom .. left */

			padding: 3px;
			flex-grow: 1;
			transition: 0.5s;
		}

		#mini_bask_cost_btns_div > div:hover
		{
			background-color: #87A932;
		}

		#mini_bask_cost_btns_div a
		{
			color: 4E4E62;

			font-family: arial;

			transition: 0.5s;
		}

		#mini_bask_cost_btns_div > div:hover a /* ... "> div:hover a" ... makes the text color change when the mouse enters Divs instead */
		{									   /* of having to wait until the mouse pointer hovers over the actual text */
			color: white;
		}

		.mini_bask_add_item_clone_me
		{
			display: none;
		}

		/* #basket_cost_buttons button
		{
			font-size: 15px;
			margin-top: 5px;
			margin-bottom: 5px;
		} */