@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@400&display=swap');

/*
*
* Used for all pages
*
*/
	:root {
		--dark-background: #384151; /* #333344 #313140 #333344*/
		--light-background: #ffffff;

	}

	* {
		box-sizing: border-box;
	}

	/* Stock warning text */
	.stockwarning {
		color: red;
		font-size: 0.7em;
	}

	/* Tooltip texts */
	.tooltip {
		position: relative;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: 300px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		position: absolute;
		z-index: 1;
		bottom: 125%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.tooltip .tooltiptext::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	/* Links */
	 /* unvisited link */
	a:link {
		color: green;
	}

	/* visited link */
	a:visited {
		color: #131304;
	}

	/* mouse over link */
	a:hover {
		font-weight: bold;
	}

	/* selected link */
	a:active {
		color: blue;
	}

	.admin-catalog-actions {
		background: #f4f7fb;
		border: 1px solid #cbd5e1;
		border-radius: 4px;
		margin-bottom: 12px;
		padding: 8px;
	}

	.admin-catalog-actions p {
		margin: 0 0 7px;
	}

	.admin-catalog-actions a {
		display: inline-block;
		margin: 0 10px 5px 0;
	}

	.admin-catalog-actions small {
		display: block;
	}

	.admin-content-action {
		background: #f4f7fb;
		border: 1px solid #cbd5e1;
		border-radius: 4px;
		padding: 8px;
	}


	/* Style the body */
	body {
		font-family: 'Roboto', sans-serif;
		margin: 0;
		color: black;
	}

	/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 1081px) {
		.content {
			flex-direction: column;
		}
	}

	/* Header */
	.header {
		padding: 5px;
		text-align: center;
		background: var(--dark-background); /*#1abc9c*/
		color: white;
		height: 84px;
		flex-direction: row;
		display: flex;
		align-items: top;
	}

	/* Logo */
	.headerlogo {
		display: flex;
		padding: 8px;
		text-align: center;
		flex-grow: 4;
	}

	/* User */
	.headeruser {
		display: flex;
		padding: 5px;
		text-align: center;
		flex-grow: 1;
		align-items: center;
	}

	/* Language / currency */
	.headerlang {
		display: flex;
		padding: 5px;
		text-align: center;
		flex-grow: 1;
		align-items: center;
	}

	/* Checkout */
	.headercheckout {
		display: flex;
		flex-direction: row;
		padding: 5px;
		flex-grow: 1;
		align-items: center;

	}

	/* Page content. Container for columns. */
	.content {
		display: flex;
		height: 80%;
		/*flex-wrap: wrap;*/
		padding: 20px;
	}

	/* Footer */
	.footer {
		padding: 8px;
		text-align: center;
		background: var(--dark-background);
		color: white;
		height: 40px;
	}

	/* Whole page */
	.page {
		display: -webkit-flex;
		display: flex;
	}

	.header a:link {
		color: green;
	}
	.header a:visited {
		color: #bdbdae;
	}
	.header a:hover {
		font-weight: bold;
	}
	.header a:active {
		color: blue;
	}

	.footer a:link {
		color: green;
	}
	.footer a:visited {
		color: #bdbdae;
	}
	.footer a:hover {
		font-weight: bold;
	}
	.footer a:active {
		color: blue;
	}


/*
*
* Used only for single column pages (login, register, checkout etc.)
*
*/

	/* Single column for pages without side menu */
	.centercol {
		background-color: var(--light-background); /* #99CCCC */
		color: black;
		font-family: 'Roboto', sans-serif;
		padding: 20px;
		margin: 20px;
		border: 1px solid black;
		/*box-shadow:0px 0px 20px #000; 0610*/
		/*height: 50vh;*/
	}

	/* Single column for pages without side menu */
	.sidepad {
		flex: 20;
		background-color:var(--light-background);
		padding: 20px;
		align: center;
	}




/*
*
* Used only for pages with two columns (menu + content) ie. index.php
*
*/

	/* Sidebar/left column */
	.side {
		flex: 10%;
		background-color: var(--light-background); /* #0f0f1e; */
		color: black;
		font-family: 'Encode Sans Semi Condensed', sans-serif;
		font-weight: 400;
		padding: 20px;
		margin: 20px;
		border: 0px solid black;
		/*box-shadow:0px 0px 20px #000;*/
	}

	.product-search-main {
		display: none;
	}

	.product-search-row {
		display: block;
	}

	.product-search-row input[type="text"] {
		display: block;
		margin-bottom: 5px;
	}




	/* Main column */
	.main {
		display: flex;
		flex-direction: column;
		flex: 65%;
		background-color: var(--light-background);;
		padding: 20px;
		margin: 20px;
		border: 0px solid black;
		/*box-shadow:0px 0px 20px #000;*/
	}

	.right_side {
		flex: 15%;
		background-color: var(--light-background); /* #0f0f1e; */
		color: black;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		padding: 20px;
	}

	.intro {
		background-color: grey; /* #0f0f1e; */
		color: black;
		font-family: 'Roboto', sans-serif;
		padding: 20px;
	}


/*
*
* Only for prouct listing <--- outdated other things got mized in here
*
*/

	.productlisting {
		display: flex;
		flex-direction: row;
		align-content: stretch;
		/* justify-content: flex-end; space-between*/
		padding: 2px; /*5*/
		margin: 0px; /*10*/
		margin-bottom: 40px;
		/*border: 1px solid green;*/
	}

	.plimage {
		display: flex;
		flex-direction: column;
		padding: 20px; /*20*/
		margin: 0px; /*0*/
		/*border: 5px solid blue;*/
	}

	.plsub {
		display: flex;
		flex-direction: column;
		padding: 20px; /*20*/
		margin: 0px; /*0*/
		/*border: 5px solid blue;*/
	}

	.plbuysub {
		display: flex;
		flex-direction: column;
		float: right;
		padding: 5px; /*5*/
		margin: 0px;
		/*border: 5px solid red;*/
		margin-left: auto;
	}


/*
*
* Only for product page
*
*/

	.product_top {

	}

	.product_main {
		display: flex;
		flex-direction: row;
		padding: 5px;
	}

	.product_right {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 5px;
	}

	.product_left {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.product_buy {
		display: flex;
		flex-direction: column;
		padding: 20px;
		border: 1px solid DimGray;
		/*box-shadow:0px 0px 20px #000;*/
	}

	.product_stock {
		display: flex;
		padding: 5px;
	}

	.product_form {
		display: flex;
		padding: 5px;
		/* width: 300px; */
	}

	.product_script {
		display: flex;
		padding: 20px;
	}

	.product_text {
		padding: 5px;

	}

	.cart_table {
		border-spacing: 10px 0px;
	}

	.num_fd {
		text-align: right;
	}


	/* Used in:	Laser cutting script
				Login
				Register customer
	*/
	.c_row {
		display: flex;
		flex-direction: row;
		padding: -8px;
		padding-left: 8px;
		padding-right: 8px;
		margin: -8px;
		justify-content: space-between;
		align-items: baseline;
	}

	.t_row {
		display: flex;
		flex-direction: row;
		padding: 0px;
		justify-content: space-between;
		align-items: baseline;
	}

	.t_col {
		align-items: left;
		padding: 5px;
		text-align:left;
		flex-grow: 30;
	}

	.t_col2 {
		float: right;
		padding: 5px;
		text-align:right;
		flex-grow: 10;
	}

	.spacer_box {
		display: flex;
		flex-direction: column;
		margin: 10px;
		padding: 10px;
	}

	.shipping_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0px;
		padding: 0px;
	}

	.shipping_outer {
		display: flex;
		flex-direction: column;
		margin: 10px;
		padding: 10px;
	}

	.shipping-method-prompt {
		margin: 0 0 8px 0;
	}

	.shipping-method-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 8px 0 12px 0;
		max-width: 680px;
	}

	.shipping-method-choice {
		align-items: center;
		border: 1px solid #d4d8de;
		border-radius: 6px;
		cursor: pointer;
		display: grid;
		grid-template-columns: 28px 116px minmax(0, 1fr) auto;
		gap: 10px;
		min-height: 58px;
		padding: 9px 12px;
		transition: background-color 0.15s ease, border-color 0.15s ease;
		width: 100%;
	}

	.shipping-method-choice:hover {
		background-color: #f6f8fb;
		border-color: #9ca7b5;
	}

	.shipping-method-choice.selected {
		background-color: #eef8ee;
		border-color: #4aa84a;
	}

	.shipping-method-choice.shipping-method-hidden {
		display: none;
	}

	.shipping-method-choice input[type=radio] {
		height: 18px;
		margin: 0;
		width: 18px;
	}

	.shipping-carrier-logo {
		display: block;
		height: 30px;
		object-fit: contain;
		width: 104px;
	}

	.shipping-carrier-badge {
		align-items: center;
		background-color: #f1f3f5;
		border: 1px solid #d4d8de;
		border-radius: 4px;
		color: #333;
		display: inline-flex;
		font-size: 0.85rem;
		font-weight: 700;
		height: 30px;
		justify-content: center;
		padding: 0 8px;
		width: 104px;
	}

	.shipping-method-copy {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.shipping-method-name {
		font-weight: 700;
		line-height: 1.25;
	}

	.shipping-method-meta {
		color: #606a76;
		font-size: 0.85rem;
		line-height: 1.35;
		margin-top: 2px;
	}

	.shipping-method-price {
		font-weight: 700;
		text-align: right;
		white-space: nowrap;
	}

	button.shipping-show-all-button {
		background-color: #efefef;
		border: 1px solid #9ca7b5;
		color: #222;
		margin: 0 0 12px 0;
		padding: 8px 12px;
		width: auto;
	}

	.shipping-loading,
	.shipping-message {
		color: #606a76;
		margin: 0 0 12px 0;
		max-width: 680px;
	}

	.shipping-loading {
		align-items: center;
		display: flex;
		gap: 8px;
	}

	.shipping-loading-spinner {
		animation: shipping-loading-spin 0.8s linear infinite;
		border: 2px solid #d4d8de;
		border-top-color: #2c75ff;
		border-radius: 50%;
		display: inline-block;
		height: 14px;
		width: 14px;
	}

	@keyframes shipping-loading-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.option_box {
		display: flex;
		flex-direction: row;
		margin: 2px;
		padding: 2px;
	}

	.cart_btn {
		width: 250px;
	}

	.quote_download_form {
		margin-top: 12px;
		padding: 10px;
		border: 1px solid #d7dde5;
		background: #fafbfc;
	}

	input[type=submit].quote_download_button {
		width: auto;
		background: #eaf2ff;
		color: #174ea6;
		border: 1px solid #7aa7e8;
		border-radius: 4px;
		padding: 7px 12px;
		font-size: 0.9em;
	}

	input[type=submit].quote_download_button:hover {
		background: #d8e8ff;
	}

	/*
	*
	* Front page
	*
	*/
	.front-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
		gap: 28px;
		align-items: center;
		background: #f3f6f4;
		border-left: 6px solid #4CAF50;
		padding: 32px;
		margin-bottom: 34px;
	}

	.front-hero-no-image {
		grid-template-columns: 1fr;
	}

	.front-hero h1 {
		margin: 0 0 14px 0;
		font-size: 2.1rem;
		line-height: 1.12;
	}

	.front-hero p {
		font-size: 1.05rem;
		line-height: 1.55;
		max-width: 620px;
	}

	.front-button {
		display: inline-block;
		background: #2f6f3e;
		color: white !important;
		padding: 10px 16px;
		border-radius: 4px;
		text-decoration: none;
		margin-top: 8px;
	}

	.front-hero-media img {
		width: 100%;
		max-height: 310px;
		object-fit: contain;
		background: white;
		border: 1px solid #dce3df;
	}

	.front-section {
		margin-bottom: 36px;
	}

	.front-section h2 {
		margin: 0 0 16px 0;
		font-size: 1.55rem;
	}

	.front-category-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 16px;
	}

	.front-category {
		display: grid;
		grid-template-rows: 150px auto;
		border: 1px solid #d7dde5;
		border-radius: 6px;
		background: white;
		text-decoration: none;
		overflow: hidden;
		min-height: 205px;
	}

	.front-category img {
		width: 100%;
		height: 150px;
		object-fit: contain;
		padding: 12px;
		background: #fafafa;
	}

	.front-category span {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 55px;
		padding: 10px;
		text-align: center;
		font-weight: bold;
		color: #1f2a37;
	}

	.front-selling-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		border-top: 1px solid #d7dde5;
		padding-top: 18px;
	}

	.front-selling-point h3 {
		margin: 0 0 8px 0;
		font-size: 1.08rem;
		color: #1f2a37;
	}

	.front-selling-point p {
		margin: 0;
		line-height: 1.5;
	}

	@media screen and (max-width: 820px) {
		.front-hero {
			grid-template-columns: 1fr;
			padding: 22px;
		}

		.front-hero h1 {
			font-size: 1.65rem;
		}

		.front-selling-grid {
			grid-template-columns: 1fr;
		}
	}


	/*
	*
	* Blog
	*
	*/
	.blog_entry {
		padding-bottom: 50px;
	}

	/*
	*
	* Other style elements
	*
	*/
	.featured_product {
		padding: 5px;
	}



	/*	May be comined with row/column below?
		Used to align labels and form elements in two columns.
	*/
	.f-row {
		display: flex;
		flex-direction: row;
		padding: 0px;
		justify-content: space-between;
		align-items: baseline;
	}

	.f-left {
		align-items: left;
		padding: 5px;
		text-align:left;
		flex-grow: 30;
	}

	.f-right {
		float: right;
		padding: 5px;
		text-align:right;
		width: 300px;
	}


	/* Align form content in columns and rows */
	.column {
		display: flex;
		flex-direction: column;
		align-items: baseline;
		padding: 5px;

	}

	/* Align form content in columns and rows */
	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px;
	}


	/* */
	.payment_method {
		font-size: small;
		display: flex;
		flex-direction: column;
		padding: 20px;
		margin: 10px;
		border: 1px solid black;
		text-align:center;
	}

	.payment_button {
		display: flex;
		padding: 20px;
		border: 1px solid gray;
	}

	.payment_info {
		font-size: small;
		display: flex;
		padding: 20px;
		border: 1px solid orange;
	}


	.payment_container {
		display: flex;
		flex-direction: column;
		padding: 20px;
		border: none;
	}

	.card_logos {
		display: flex;
		flex-direction: row;
		padding: 5px;
	}


/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  background-color: white;
  height:40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}


/*
* Forms
*/
input {
    padding: 2px 3px;
    margin: 0px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


input[type=select] {

}


input[type=text], select {
    /* width: 100%; */
}


input[type=number] {
	width: 65px;
}

input[type=password] {
    /*width: 100%;*/
}

input[type=email] {
    /*width: 100%;*/
}

input[type=submit] {
    width: 65%;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button {
    width: 65%;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.product-search-button {
    align-items: center;
    background-color: #efefef;
    border: 1px solid #767676;
    border-radius: 2px;
    color: #111;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.product-search-button svg {
    display: block;
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 22px;
}

.product-search-button svg circle,
.product-search-button svg line {
    fill: none;
}

input[type=submit]:hover {
    background-color: #45a049;
}


/*
*	For customer.php
*/
.grid-container-form {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  border: 0px solid rgba(0, 255, 0, 0.8);
  padding: 4px;
}

.grid-container-orders {
  display: inline-grid;
  grid-template-columns: auto auto;
  border: 0px solid rgba(0, 255, 0, 0.8);
  padding: 4px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 255, 0.8);
  padding: 4px;
  /*font-size: 30px;*/
  text-align: left;
}

.grid-help {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 255, 0.8);
  padding: 4px;
  font-size: 11px;
  text-align: left;
}

.flex-container {
	display: flex;
	column-gap: 30px;
}

/*
Back link for all checkout Pages
*/
.checkout-back {
	padding: 20px;
	text-align: center;
}

/*
*
* Do I need this stuff?
*
*/

/*

	Style the top navigation bar
	.navbar {
		display: flex;
		background-color: #333;
	}

	Style the navigation bar links
	.navbar a {
		color: white;
		padding: 14px 20px;
		text-decoration: none;
		text-align: center;
	}

	Change color on hover
	.navbar a:hover {
		background-color: #ddd;
		color: black;
	}

	Fake image, just for this example
	.fakeimg {
		background-color: #aaa;
		width: 100%;
		padding: 20px;
	}

	*/




/*
	ul, #myUL {
	  list-style-type: none;
	}

	#myUL {
	  margin: 0;
	  padding: 0;
	}

	.caret {
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	.caret::before {
	  content: "\25B6";
	  color: black;
	  display: inline-block;
	  margin-right: 6px;
	}

	.caret-down::before {
	  -ms-transform: rotate(90deg);
	  -webkit-transform: rotate(90deg);
	  transform: rotate(90deg);
	}


	.nested {
	  display: none;
	}

	.active {
	  display: block;
	}
*/

/*
 * Customer-facing visual system
 *
 * Scoped to .customer-site because several admin pages also load style.css.
 */
.customer-site {
	--customer-primary: #2E7D32;
	--customer-primary-hover: #1B5E20;
	--customer-primary-soft: #eef8ee;
	--customer-ink: #000000;
	--customer-muted: #606a76;
	--customer-border: #d4d8de;
	--customer-surface: #ffffff;
	--customer-surface-alt: #f7f7f7;
	--customer-danger: #b42318;
	--customer-shadow: 0 16px 40px rgba(56, 65, 81, 0.1);
	background: var(--light-background);
	color: var(--customer-ink);
	display: flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	min-height: 100vh;
}

.customer-site h1,
.customer-site h2,
.customer-site h3 {
	color: var(--customer-ink);
	font-family: inherit;
	line-height: 1.2;
}

.customer-site h1 { font-size: clamp(1.75rem, 4vw, 2.35rem); }
.customer-site h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.customer-site h3 { font-size: 1.2rem; }

.customer-site a:link {
	color: green;
	text-decoration-color: rgba(0, 128, 0, 0.4);
	text-underline-offset: 0.16em;
}

.customer-site a:visited {
	color: #131304;
	text-decoration-color: rgba(19, 19, 4, 0.35);
	text-underline-offset: 0.16em;
}

.customer-site a:hover {
	color: green;
	font-weight: inherit;
	text-decoration-color: currentColor;
}

.customer-site a:focus-visible,
.customer-site button:focus-visible,
.customer-site input:focus-visible,
.customer-site select:focus-visible,
.customer-site textarea:focus-visible {
	outline: 3px solid rgba(46, 125, 50, 0.25);
	outline-offset: 2px;
}

.customer-site .header {
	align-items: center;
	background: var(--dark-background);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	height: 88px;
	padding: 10px clamp(18px, 4vw, 56px);
}

.customer-site .headerlogo {
	align-items: center;
	padding: 0;
	text-align: left;
}

.customer-site .headerlogo img {
	display: block;
	height: auto;
	max-height: 58px;
	max-width: min(300px, 48vw);
	object-fit: contain;
}

.customer-site .header h1 { color: #fff; margin: 0; }

.customer-site .header a:link,
.customer-site .footer a:link {
	color: green;
}

.customer-site .header a:visited,
.customer-site .footer a:visited {
	color: #bdbdae;
}

.customer-site .headeruser,
.customer-site .headercheckout {
	gap: 10px;
	justify-content: flex-end;
}

.customer-site .headeruser p { margin: 0; }

.customer-site .desktop-cart-link {
	align-items: center;
	display: inline-flex;
	gap: 12px;
	justify-content: flex-end;
	line-height: 1.25;
	text-align: right;
	text-decoration: none;
	white-space: nowrap;
}

.customer-site .desktop-cart-icon {
	color: #f2f4f7;
	display: block;
	flex: 0 0 auto;
	height: 44px;
	width: 44px;
}

.customer-site > .content,
.customer-site .content {
	flex: 1 0 auto;
	height: auto;
	padding: clamp(20px, 4vw, 48px);
}

.customer-site .centercol {
	background: var(--customer-surface);
	border: 1px solid var(--customer-border);
	border-radius: 14px;
	box-shadow: var(--customer-shadow);
	margin: 0;
	padding: clamp(22px, 4vw, 44px);
}

.customer-site .sidepad {
	background: transparent;
	padding: 20px;
}

.customer-site .footer {
	background: var(--dark-background);
	color: white;
	flex: 0 0 auto;
	font-size: 0.9rem;
	height: auto;
	margin-top: auto;
	min-height: 52px;
	padding: 15px 24px;
}

.customer-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.customer-site select,
.customer-site textarea {
	background: #fff;
	border: 1px solid #b8c5bd;
	border-radius: 8px;
	color: var(--customer-ink);
	font: inherit;
	margin: 0;
	min-height: 44px;
	padding: 9px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-site textarea {
	display: block;
	max-width: 100%;
	min-height: 180px;
	resize: vertical;
	width: 100%;
}

.customer-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.customer-site select:focus,
.customer-site textarea:focus {
	border-color: var(--customer-primary);
	box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.customer-site input[type="checkbox"],
.customer-site input[type="radio"] {
	accent-color: var(--customer-primary);
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	width: 18px;
}

.customer-site input[type="submit"],
.customer-site button,
.customer-site .front-button,
.customer-site .button-primary {
	align-items: center;
	background: var(--customer-primary);
	border: 1px solid var(--customer-primary);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 650;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 10px 18px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	width: auto;
}

.customer-site input[type="submit"]:hover,
.customer-site button:hover,
.customer-site .front-button:hover,
.customer-site .button-primary:hover {
	background: var(--customer-primary-hover);
	border-color: var(--customer-primary-hover);
	box-shadow: 0 6px 14px rgba(46, 125, 50, 0.2);
	color: #fff;
	transform: translateY(-1px);
}

.customer-site .button-secondary,
.customer-site input.button-secondary,
.customer-site button.button-secondary,
.customer-site input[type="submit"].quote_download_button,
.customer-site button.shipping-show-all-button {
	background: #fff;
	border: 1px solid #9eaea4;
	color: var(--customer-ink);
}

.customer-site .button-secondary:hover,
.customer-site input.button-secondary:hover,
.customer-site button.button-secondary:hover,
.customer-site input[type="submit"].quote_download_button:hover,
.customer-site button.shipping-show-all-button:hover {
	background: var(--customer-surface-alt);
	border-color: var(--dark-background);
	box-shadow: none;
	color: var(--dark-background);
}

.customer-site .button-danger,
.customer-site input.button-danger {
	background: #fff;
	border: 1px solid #d6aaa7;
	color: var(--customer-danger);
}

.customer-site fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.customer-site .t_row {
	align-items: center;
	gap: 20px;
	margin-bottom: 14px;
}

.customer-site .t_col,
.customer-site .t_col2 {
	padding: 0;
}

.customer-site .t_col2 input:not([type="checkbox"]):not([type="radio"]),
.customer-site .grid-container-form input:not([type="checkbox"]):not([type="radio"]),
.customer-site .grid-container-form select {
	width: 100%;
}

.customer-site .grid-container-form {
	align-items: center;
	column-gap: 8px;
	padding: 0;
	row-gap: 4px;
}

.customer-site .grid-item { background: transparent; padding: 5px 4px; }
.customer-site .grid-help { background: transparent; color: var(--customer-muted); }
.customer-site .form-section-spacer { grid-column: 1 / -1; height: 8px; }

.customer-site .stockwarning {
	color: var(--customer-danger);
	font-size: 0.82rem;
	font-weight: 600;
}

/* Storefront: retain the established sidebar + main layout while refining it. */
.customer-site.storefront_page .content {
	background: #fff;
	gap: clamp(16px, 3vw, 42px);
	margin: 0 auto;
	max-width: 1500px;
	width: 100%;
}

.customer-site.storefront_page .side {
	border-right: 1px solid var(--customer-border);
	margin: 0;
	padding: 8px clamp(18px, 2vw, 30px) 30px 0;
}

.customer-site.storefront_page .main { margin: 0; padding: 8px 0 30px; }
.customer-site.storefront_page .side h1,
.customer-site.storefront_page .product-search-main h1 { font-size: 1.15rem; margin-top: 22px; }

.customer-site .product-search-row { display: flex; gap: 8px; }
.customer-site .product-search-row input[type="text"] { margin: 0; min-width: 0; }
.customer-site .product-search-row input[type="submit"],
.customer-site .product-search-button {
	background: var(--dark-background);
	border-color: var(--dark-background);
	color: #fff;
	flex: 0 0 auto;
}

.customer-site .product-search-row input[type="submit"]:hover,
.customer-site .product-search-button:hover {
	background: #2d3441;
	border-color: #2d3441;
	box-shadow: 0 4px 10px rgba(56, 65, 81, 0.18);
	color: #fff;
}

.customer-site .front-hero {
	background: #f3f6f4;
	border: 1px solid #dce3df;
	border-left: 5px solid var(--customer-primary);
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba(24, 45, 34, 0.06);
}

.customer-site .front-category {
	border-color: var(--customer-border);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(24, 45, 34, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.customer-site .front-category:hover {
	border-color: #a7c6b3;
	box-shadow: 0 10px 24px rgba(24, 45, 34, 0.1);
	transform: translateY(-2px);
}

.customer-site .productlisting {
	border-bottom: 1px solid var(--customer-border);
	margin-bottom: 20px;
	padding: 18px 0 26px;
}

.customer-site .product_buy {
	background: var(--customer-surface-alt);
	border: 1px solid var(--customer-border);
	border-radius: 10px;
}

/* Checkout and account flows */
.customer-site.checkout_page .centercol { flex: 0 1 1120px; max-width: 1120px; width: 100%; }
.customer-site.checkout_payment_page .centercol { flex: 0 1 760px; max-width: 760px; width: 100%; }
.customer-site.login_page .centercol { align-self: center; flex: 0 1 520px; max-width: 520px; width: 100%; }
.customer-site.reset_password_page .centercol { flex: 0 1 600px; max-width: 600px; width: 100%; }
.customer-site.status_page .centercol,
.customer-site.quote_restore_page .centercol { flex: 0 1 650px; max-width: 650px; width: 100%; }

.customer-site .checkout-steps {
	counter-reset: checkout-step;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.customer-site.checkout_page .checkout-steps,
.customer-site.checkout_payment_page .checkout-steps { margin-top: 28px; }

.customer-site .customer-nav-link:link,
.customer-site .customer-nav-link:visited {
	align-items: center;
	background: #fff;
	border: 1px solid #c5ccd5;
	border-radius: 999px;
	color: var(--dark-background);
	display: inline-flex;
	font-size: 0.92rem;
	font-weight: 500;
	gap: 7px;
	line-height: 1;
	min-height: 40px;
	padding: 8px 13px 8px 10px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-site .customer-nav-link:hover {
	background: var(--customer-surface-alt);
	border-color: #8f99a8;
	box-shadow: 0 3px 10px rgba(56, 65, 81, 0.1);
	color: var(--dark-background);
}

.customer-site .customer-nav-link img {
	display: block;
	height: 20px;
	width: 20px;
}

.customer-site .customer-page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}

.customer-site .checkout-steps li {
	color: var(--customer-muted);
	font-size: 0.84rem;
	font-weight: 650;
	position: relative;
	text-align: center;
}

.customer-site .checkout-steps li::before {
	align-items: center;
	background: #fff;
	border: 2px solid #bdc9c1;
	border-radius: 50%;
	content: counter(checkout-step);
	counter-increment: checkout-step;
	display: flex;
	height: 30px;
	justify-content: center;
	margin: 0 auto 7px;
	position: relative;
	width: 30px;
	z-index: 2;
}

.customer-site .checkout-steps li::after {
	background: #d9e2dc;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 15px;
	width: 100%;
	z-index: 1;
}

.customer-site .checkout-steps li:last-child::after { display: none; }
.customer-site .checkout-steps li.is-complete::before,
.customer-site .checkout-steps li.is-active::before { background: var(--customer-primary); border-color: var(--customer-primary); color: #fff; }
.customer-site .checkout-steps li.is-complete::after { background: var(--customer-primary); }
.customer-site .checkout-steps li.is-active { color: var(--customer-primary-hover); }

.customer-site.checkout_page .centercol > h3 {
	border-top: 1px solid var(--customer-border);
	margin: 34px 0 18px;
	padding-top: 28px;
}

.customer-site .cart_table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 12px 0 18px;
	width: 100%;
}

.customer-site .cart_table th {
	background: var(--customer-surface-alt);
	color: #47564d;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	padding: 11px 10px;
	text-transform: uppercase;
}

.customer-site .cart_table td { border-bottom: 1px solid var(--customer-border); padding: 14px 10px; }
.customer-site .cart_table input[type="number"] { margin: 0; min-height: 40px; width: 72px; }
.customer-site .cart_btn { width: auto; }

.customer-site .shipping-method-choice {
	border-color: var(--customer-border);
	border-radius: 10px;
	min-height: 64px;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-site .shipping-method-choice:hover { background: var(--customer-surface-alt); border-color: #9eb3a6; }
.customer-site .shipping-method-choice.selected { background: var(--customer-primary-soft); border-color: var(--customer-primary); box-shadow: 0 0 0 1px var(--customer-primary); }
.customer-site .shipping-loading-spinner { border-top-color: var(--customer-primary); }

.customer-site #order_sumary_details {
	background: var(--customer-surface-alt);
	border-radius: 10px;
	margin: 8px 0 12px;
	padding: 14px 16px;
}

.customer-site.checkout_page .c_row {
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 6px 8px;
}

.customer-site.checkout_page .c_row .t_col {
	flex: 1 1 auto;
	min-width: 0;
}

.customer-site.checkout_page .c_row .t_col2 {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	width: auto;
}

.customer-site .summary-toggle-row {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
	min-height: 44px;
	padding: 0 8px;
}

.customer-site .summary-toggle-row .t_col2 {
	flex-grow: 0;
	padding: 0;
}

.customer-site #confirmAndPay {
	background: var(--customer-primary-soft);
	border: 1px solid #c5dfcf;
	border-radius: 12px;
	margin-top: 32px;
	padding: 22px;
}

.customer-site #confirmAndPay h3 { margin-top: 0; }
.customer-site #confirmAndPay input[type="submit"] { min-width: 210px; }

.customer-site .quote_download_form {
	align-items: center;
	background: #fff;
	border-color: var(--customer-border);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 16px;
}

.customer-site .payment-summary {
	align-items: baseline;
	background: var(--customer-surface-alt);
	border: 1px solid var(--customer-border);
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	margin: 22px 0;
	padding: 14px 18px;
}

.customer-site .payment-summary strong { font-size: 1.35rem; }
.customer-site .payment_container { gap: 14px; padding: 0; }

.customer-site .payment_method {
	background: #fff;
	border: 1px solid var(--customer-border);
	border-radius: 12px;
	font-size: 0.95rem;
	margin: 0;
	padding: 22px;
	text-align: left;
}

.customer-site .payment_method h2 { font-size: 1.2rem; margin: 0 0 10px; }
.customer-site .payment_method form { display: grid; gap: 8px; }
.customer-site .payment_method form input[type="submit"] { margin-top: 10px; }
.customer-site .card_logos { align-items: center; gap: 18px; justify-content: center; padding: 0 0 18px; }
.customer-site .card_logos img { height: 44px !important; max-width: 110px; object-fit: contain; width: auto !important; }
.customer-site .payment_method button { width: 100%; }

.customer-site .checkout-back { padding: 0; }
.customer-site .checkout-back img { margin-bottom: 6px; opacity: 0.72; width: 34px !important; }

.customer-site .completion-mark {
	align-items: center;
	background: var(--customer-primary-soft);
	border-radius: 50%;
	color: var(--customer-primary);
	display: flex;
	font-size: 2rem;
	font-weight: 700;
	height: 64px;
	justify-content: center;
	margin: 0 auto 20px;
	width: 64px;
}

.customer-site.order_complete_page .centercol { text-align: center; }

.customer-site .wrapper,
.customer-site .content_wrapper {
	background: #fff;
	border: 1px solid var(--customer-border);
	border-radius: 14px;
	box-shadow: var(--customer-shadow);
	margin: clamp(24px, 4vw, 48px) auto;
	max-width: 1120px;
	padding: clamp(22px, 4vw, 44px);
	width: calc(100% - 32px);
}

.customer-site.register_page .flex-container,
.customer-site.customer_page .content_wrapper > .flex-container { align-items: flex-start; gap: clamp(24px, 5vw, 64px); }
.customer-site.register_page .flex-container > div,
.customer-site.customer_page .content_wrapper > .flex-container > div { flex: 1 1 0; }

.customer-site.login_page .centercol > p:first-child,
.customer-site.reset_password_page .centercol > p:first-child { color: var(--customer-muted); }

.customer-site .auth-page-title {
	font-size: 1.8rem;
	margin: 0 0 26px;
}

.customer-site .auth-form .t_row {
	align-items: stretch;
	display: grid;
	gap: 6px;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 16px;
}

.customer-site .auth-form .t_col,
.customer-site .auth-form .t_col2 {
	text-align: left;
	width: 100%;
}

.customer-site .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.customer-site .auth-form input[type="submit"] {
	width: 100%;
}

.customer-site .auth-form > p { margin: 20px 0 0; }

.customer-site .auth-links {
	border-top: 1px solid var(--customer-border);
	display: grid;
	gap: 8px;
	margin-top: 24px;
	padding-top: 20px;
}

.customer-site.contact_page .centercol { flex: 0 1 720px; max-width: 720px; width: 100%; }
.customer-site.contact_page form > p { display: grid; gap: 6px; margin: 0 0 16px; }
.customer-site.contact_page form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { width: 100%; }
.customer-site.contact_page form input[type="submit"] { min-width: 150px; }
.customer-site .checkbox-row { align-items: center; display: flex; gap: 2px; }

.customer-site.newsletter_page {
	justify-content: center;
	padding: 24px;
}

.customer-site.newsletter_page .newsletter-shell {
	background: #fff;
	border: 1px solid var(--customer-border);
	border-radius: 14px;
	box-shadow: var(--customer-shadow);
	margin: auto;
	max-width: 640px;
	padding: clamp(22px, 5vw, 44px);
	width: 100%;
}

@media screen and (max-width: 1023px) {
	.customer-site { padding-top: 72px; }
	.customer-site .header { min-height: 72px; padding: 8px 18px; }
	.customer-site.storefront_page .content { gap: 0; }
	.customer-site.storefront_page .side { border-right: 0; padding: 20px; }
	.customer-site .sidepad { display: none; }
	.customer-site .content > .centercol { flex: 0 1 auto; margin: 0 auto; }
}

@media screen and (max-width: 767px) {
	.customer-site > .content,
	.customer-site .content { padding: 18px 14px 32px; }
	.customer-site .centercol { border-radius: 10px; padding: 22px 18px; }
	.customer-site .t_row { align-items: stretch; flex-direction: column; gap: 5px; }
	.customer-site .t_col2 { text-align: left; width: 100%; }
	.customer-site .grid-container-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3px; width: 100%; }
	.customer-site .grid-container-form > .grid-item,
	.customer-site .grid-container-form > .grid-help { grid-column: 1; width: 100%; }
	.customer-site #billing_address_option,
	.customer-site #billing_address_fields,
	.customer-site #credit_status_message { grid-column: 1 !important; }
	.customer-site .form-section-spacer { grid-column: 1; height: 12px; }
	.customer-site .flex-container { gap: 24px; }
	.customer-site .checkout-steps { margin-bottom: 24px; }
	.customer-site .checkout-steps li { font-size: 0.72rem; }
	.customer-site .cart_table { min-width: 650px; }
	.customer-site .payment_method { padding: 18px 14px; }
	.customer-site .quote_download_form { align-items: stretch; flex-direction: column; }
	.customer-site input[type="submit"],
	.customer-site button { max-width: 100%; }
}

.product-cad {
  margin-top: 24px;
  max-width: 900px;
}

.product-cad h3 {
  margin-bottom: 10px;
}

.product-cad-frame {
  border: 2px solid #9f9f9f;
  background: #fff;
  padding: 10px;
}

.product-cad-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 8px;
}

.product-cad-measurement {
  background: #f7f7f7;
  border: 1px solid #d4d4d4;
  color: #222;
  margin-bottom: 8px;
  min-height: 34px;
  padding: 7px 10px;
}

.product-cad-toolbar button,
.product-cad-download {
  background: #f4f4f4;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  color: #222;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  line-height: 1.2;
  padding: 7px 11px;
  text-decoration: none;
}

.product-cad-toolbar button:hover,
.product-cad-toolbar button:focus,
.product-cad-download:hover,
.product-cad-download:focus {
  background: #e8e8e8;
}

.product-cad-viewer {
  aspect-ratio: 1 / 1;
  border: 1px solid #d4d4d4;
  background: #fff;
  max-height: 75vh;
  width: min(100%, 100vh);
}

.product-cad-viewer x3d {
  display: block;
  width: 100%;
  height: 100%;
}

.product-cad-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/* TEST */