:root {
	--bs-primary: #097B6C;
	--bs-primary-rgb: 9, 123, 108;
	accent-color: #097B6C;
}
.form-control:focus,
.form-select:focus {
	border-color: #097B6C;
	box-shadow: 0 0 0 0.2rem rgba(9, 123, 108, 0.25);
}

.pfs-main-background {
	position: relative;
	background-color: #f6f7f8;
}

.pfs-main-background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("/Images/Background.ashx"); /* Selects a random picture from ~/App_Data/<TenantCode>/Backgrounds */
	background-size: cover;
	background-position: center;
	opacity: 0.05;
	pointer-events: none;
}

.pfs-main-background > * {
	position: relative;
	z-index: 1;
}

.pfs-main-scroll {
	overflow-y: auto;
	padding-top: 90px; /* adjust to your navbar height */
	padding-bottom: 60px; /* adjust to your footer height */

	/* This does not seem to work */
	background-color: #f6f7f8;
	background-image: linear-gradient(#f6f7f8 30%, rgba(246,247,248,0)), linear-gradient(rgba(246,247,248,0), #f6f7f8 70%) 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 32px, 100% 32px;
	background-attachment: local, local;
}

/* Product cards */
.pfs-product-tile-mini {
	height: 260px;
}

.pfs-product-tile-mini img {
	height: 120px;
	object-fit: contain;
}

.pfs-product-tile-mini .pfs-product-description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Category cards */
.pfs-category-card {
	height: 320px; /* uniform card height */
	border: none;
	overflow: hidden;
}

/* Image dominates the card */
.pfs-category-card-image {
	flex: 1 1 auto;
	background-color: #f8f9fa; /* subtle neutral backdrop */
}

.pfs-category-card-image img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Bottom band */
.pfs-category-card-footer {
	padding: 0.75rem;
	background-color: #ffffff;
	transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
	border-top: 1px solid #e9ecef;
	font-size: 0.95rem;
}

/* Hover affordance */
.pfs-category-card-link:hover .pfs-category-card {
	/*transform: translateY(-2px);*/
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.pfs-category-card:hover .pfs-category-card-footer {
	background-color: #097B6C; /* your company green */
	color: #ffffff;
}

/* Override bootstrap default */
.btn-primary {
	--bs-btn-bg: #097B6C;
	--bs-btn-border-color: #097B6C;
	--bs-btn-hover-bg: #076456;
	--bs-btn-hover-border-color: #076456;
	--bs-btn-active-bg: #065246;
	--bs-btn-active-border-color: #065246;
	--bs-btn-disabled-bg: #9fcfc7;
	--bs-btn-disabled-border-color: #9fcfc7;
	--bs-btn-disabled-color: #ffffff;
}
/* Footer links: brand green, no underline by default */
footer a {
	color: #097B6C;
	text-decoration: none;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

/* Underline and slightly darken on hover */
footer a:hover,
footer a:focus-visible {
	color: #075f54; /* slightly darker green */
	text-decoration: underline;
}

.pfs-navbar {
	background-color: #eef1f3; /* subtly darker than main content */
	border-bottom: solid 1px #097B6C;
}
.pfs-footer {
	background-color: #e9edef;
	border-top: solid 1px #097B6C;
}

.pfs-cart-preview-scroll {
	max-height: 650px; /* tune: 240–320px works well */
	overflow-y: auto;
}

.btn-primary {
	/* Base */
	--bs-btn-bg: #097B6C;
	--bs-btn-border-color: #097B6C;
	--bs-btn-color: #ffffff;
	/* Hover */
	--bs-btn-hover-bg: #076456;
	--bs-btn-hover-border-color: #076456;
	--bs-btn-hover-color: #ffffff;
	/* Active (pressed) */
	--bs-btn-active-bg: #065246;
	--bs-btn-active-border-color: #065246;
	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 9, 123, 108;
	/* Disabled */
	--bs-btn-disabled-bg: #9fcfc7;
	--bs-btn-disabled-border-color: #9fcfc7;
	--bs-btn-disabled-color: #ffffff;
}

.btn-outline-primary {
	/* Base */
	--bs-btn-color: #097B6C;
	--bs-btn-border-color: #097B6C;
	/* Hover */
	--bs-btn-hover-bg: #097B6C;
	--bs-btn-hover-border-color: #097B6C;
	--bs-btn-hover-color: #ffffff;
	/* Active (pressed) */
	--bs-btn-active-bg: #076456;
	--bs-btn-active-border-color: #076456;
	--bs-btn-active-color: #ffffff;
	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 9, 123, 108;
	/* Disabled */
	--bs-btn-disabled-color: #7fbfb3;
	--bs-btn-disabled-border-color: #7fbfb3;
}
.btn-danger {
	/* Base */
	--bs-btn-bg: #CE3200;
	--bs-btn-border-color: #CE3200;
	--bs-btn-color: #ffffff;
	/* Hover */
	--bs-btn-hover-bg: #b52b00;
	--bs-btn-hover-border-color: #b52b00;
	--bs-btn-hover-color: #ffffff;
	/* Active (pressed) */
	--bs-btn-active-bg: #9c2500;
	--bs-btn-active-border-color: #9c2500;
	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 206, 50, 0;
	/* Disabled */
	--bs-btn-disabled-bg: #e6a08a;
	--bs-btn-disabled-border-color: #e6a08a;
	--bs-btn-disabled-color: #ffffff;
}
.btn-outline-danger {
	/* Base */
	--bs-btn-color: #CE3200;
	--bs-btn-border-color: #CE3200;
	/* Hover */
	--bs-btn-hover-bg: #CE3200;
	--bs-btn-hover-border-color: #CE3200;
	--bs-btn-hover-color: #ffffff;
	/* Active (pressed) */
	--bs-btn-active-bg: #b52b00;
	--bs-btn-active-border-color: #b52b00;
	--bs-btn-active-color: #ffffff;
	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 206, 50, 0;
	/* Disabled */
	--bs-btn-disabled-color: #c98a75;
	--bs-btn-disabled-border-color: #c98a75;
}

/* GridView sortable header links */
.table th a {
	color: #097B6C;
	text-decoration: none;
	font-weight: 600;
	position: relative;
	padding-right: 1rem;
}

/* Hover / focus state */
.table th a:hover,
.table th a:focus {
	color: #076456; /* slightly darker green */
	text-decoration: none; /* still no underline */
}

/* Optional: active sort indication */
.table th a:active {
	color: #065246;
}
.table th a:hover {
	background-color: rgba(9, 123, 108, 0.08);
	border-radius: 0.25rem;
}

/* Ascending arrow */
th.SortAscendingCell a::after {
	content: "▲";
	font-size: 0.65em;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}

/* Descending arrow */
th.SortDescendingCell a::after {
	content: "▼";
	font-size: 0.65em;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}

/* Hero carousel caption: frosted dark glass */
.pfs-hero-caption {
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 0.75rem;
	padding: 1.25rem 2rem;
	max-width: 700px;
	text-shadow: none;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	margin-left: auto;
	margin-right: auto;
}

	/* Improve text readability */
	.pfs-hero-caption h2,
	.pfs-hero-caption p {
		color: #ffffff;
	}

/* Better spacing on mobile */
@media (max-width: 768px) {
	.pfs-hero-caption {
		padding: 1rem 1.25rem;
	}
}