/* ============================================
   Homestead Feed & Supply - Warm Premium Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
	--hfs-brown: #5C3D2E;
	--hfs-brown-light: #8B6F47;
	--hfs-brown-dark: #3E2723;
	--hfs-cream: #f5ede0;
	--hfs-cream-dark: #eee5d8;
	--hfs-green: #4A7C59;
	--hfs-green-light: #6B9E76;
	--hfs-green-dark: #2E5339;
	--hfs-rust: #B7472A;
	--hfs-tan: #b8a88a;
	--hfs-tan-light: #d4c4a8;
	--hfs-tan-dark: #a69878;
	--hfs-text: #3E2723;
	--hfs-text-light: #6D4C41;
	--hfs-text-muted: #8B6F47;
	--hfs-border: #ddd5c8;
	--hfs-bg: #f5ede0;
	--hfs-surface: #fff;
}

body {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--hfs-bg);
	color: var(--hfs-text);
}

a { color: var(--hfs-brown); }
a:hover { color: var(--hfs-brown-dark); }


.hfs-hidden { display: none; }

/* ---- Navbar ---- */
.hfs-navbar {
	background: var(--hfs-brown-dark) !important;
	padding: 1rem 0rem 1rem 0rem;
}

.hfs-navbar .navbar-brand {
	display: flex;
	align-items: center;
	padding: 0;
}

.hfs-navbar .navbar-brand img {
	height: 44px;
	width: auto;
}

.hfs-slogan {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	white-space: nowrap;
}

.hfs-slogan-line1 {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #caa64b; 
	text-transform: uppercase;
}

.hfs-slogan-line2 {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #caa64b;
}

.hfs-search-bar {
	max-width: 560px;
}

.hfs-search-bar .form-control {
	border: 2px solid var(--hfs-tan);
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: #4E342E;
	color: #FDF5E6;
	font-size: 0.84rem;
}

.hfs-search-bar .form-control::placeholder { color: var(--hfs-brown-light); }

.hfs-search-bar .form-control:focus {
	box-shadow: 0 0 0 0.15rem rgba(184,168,138,0.3);
	border-color: var(--hfs-tan-light);
	background: var(--hfs-brown);
}

.hfs-search-bar .btn {
	background: var(--hfs-tan);
	border: 2px solid var(--hfs-tan);
	color: var(--hfs-brown-dark);
	border-radius: 0 8px 8px 0;
	font-weight: 700;
}

.hfs-search-bar .btn:hover {
	background: var(--hfs-tan-dark);
	border-color: var(--hfs-tan-dark);
}

.hfs-nav-link {
	color: #D7CCC8 !important;
	font-size: 0.84rem;
	padding: 0.3rem 0.8rem !important;
	transition: color 0.15s;
}

.hfs-nav-link:hover { color: var(--hfs-tan-light) !important; }

.hfs-nav-link .badge {
	background-color: var(--hfs-rust);
	font-size: 0.65rem;
}


/* ---- Category bar ---- */
.hfs-cat-bar {
	background: #4E342E;
	border-bottom: 1px solid var(--hfs-tan);
	padding: 0;
	position: relative;
	z-index: 90;
}

.hfs-cat-bar .cat-all-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
	border: none;
	padding: 10px 18px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
	border-right: 1px solid rgba(255,255,255,0.08);
}

.hfs-cat-bar .cat-all-btn:hover { background: #2E1F19; }
.hfs-cat-bar .cat-all-btn i { font-size: 1rem; }

.hfs-cat-bar .cat-nav-links {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.hfs-cat-bar .cat-nav-links.cat-nav-links--left {
	margin-left: 0;
}
.hfs-cat-bar .cat-nav-links.cat-nav-links--center {
	margin-left: 0;
	flex: 1;
	justify-content: center;
}

.hfs-cat-bar .cat-nav-links a {
	color: #D7CCC8;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 10px 16px;
	transition: all 0.15s;
	white-space: nowrap;
}

.hfs-cat-bar .cat-nav-links a:hover {
	color: var(--hfs-tan-light);
	background: rgba(255,255,255,0.05);
}

/* All categories dropdown */
.hfs-cat-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
	padding: 0.8rem 0;
	min-width: 280px;
	z-index: 200;
}

.hfs-cat-dropdown.open { display: block; }

.hfs-cat-dropdown .cat-group-label {
	padding: 6px 20px 4px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-brown-light);
}

.hfs-cat-dropdown .cat-group-label:not(:first-child) {
	margin-top: 6px;
	border-top: 1px solid var(--hfs-cream-dark);
	padding-top: 10px;
}

.hfs-cat-dropdown a {
	display: flex;
	align-items: center;
	padding: 6px 20px 6px 30px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.84rem;
	font-weight: 500;
	transition: background 0.1s;
}

.hfs-cat-dropdown a:hover { background: var(--hfs-cream); }


/* ---- Hero ---- */
/* ---- Hero Slideshow ---- */
.hfs-hero {
	position: relative;
	overflow: hidden;
	height: 340px;
	background: linear-gradient(135deg, var(--hfs-brown-dark) 0%, var(--hfs-green-dark) 100%);
	color: #FDF5E6;
}

.hfs-hero-slides {
	position: absolute;
	inset: 0;
}

.hfs-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hfs-hero-slide.active { opacity: 1; z-index: 1; }

.hfs-hero-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--hfs-brown-dark);
}

.hfs-hero-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 100%);
}

.hfs-hero-slide-content {
	position: relative;
	z-index: 2;
}

.hfs-hero-slide-content h1 {
	font-family: 'Outfit', sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hfs-hero-slide-content p {
	font-size: 1rem;
	opacity: 0.9;
	margin-top: 0.3rem;
	text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Fallback (shown when no slides exist) */
.hfs-hero-fallback {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hfs-hero-fallback.active { display: flex; }
.hfs-hero-fallback h1 {
	font-family: 'Outfit', sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.5px;
}
.hfs-hero-fallback p {
	font-size: 1rem;
	opacity: 0.85;
	margin-top: 0.3rem;
}

/* Hero CTA button */
.hfs-hero-btn {
	background: var(--hfs-green-dark);
	color: #e8f5e9;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	border: none;
	padding: 0.65rem 2.2rem;
	margin-top: 1rem;
	border-radius: 8px;
	position: relative;
	text-decoration: none;
}
.hfs-hero-btn:hover { background: #1a3a24; color: #fff; }

/* Slideshow dots */
.hfs-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}
.hfs-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.6);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, border-color 0.2s;
}
.hfs-hero-dot.active,
.hfs-hero-dot:hover {
	background: #fff;
	border-color: #fff;
}

/* Slideshow arrows */
.hfs-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(0,0,0,0.3);
	border: none;
	color: #fff;
	font-size: 1.2rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.hfs-hero-arrow:hover { background: rgba(0,0,0,0.6); }
.hfs-hero-arrow--prev { left: 16px; }
.hfs-hero-arrow--next { right: 16px; }

/* ---- Category Bar ---- */
/* ---- Category Section ---- */
.hfs-category-section {
	background: var(--hfs-bg);
	padding: 2rem 0 2.5rem;
}
.hfs-category-section .hfs-section-title {
	margin-bottom: 1.5rem;
}
.hfs-category-bar-inner {
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: 0 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hfs-category-bar-inner::-webkit-scrollbar {
	display: none;
}
.hfs-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hfs-text);
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	transition: transform 0.2s;
}
.hfs-category-tile:hover {
	color: var(--hfs-brown-dark);
}
.hfs-category-tile-img {
	width: 130px;
	height: 130px;
	border-radius: 20%;
	overflow: hidden;
	border: 1px solid var(--hfs-tan);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.hfs-category-tile:hover .hfs-category-tile-img {
	border-color: var(--hfs-brown);
	box-shadow: 0 4px 16px rgba(62, 39, 35, 0.2);
}
.hfs-category-tile::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: var(--hfs-brown-dark);
	transition: width 0.2s ease;
	margin-top: 4px;
}
.hfs-category-tile:hover::after {
	width: 100%;
}
.hfs-category-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Article Listing Page ---- */
.hfs-article-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hfs-article-filter-btn {
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--hfs-tan);
	background: transparent;
	color: var(--hfs-text);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hfs-article-filter-btn:hover {
	border-color: var(--hfs-brown);
	color: var(--hfs-brown-dark);
}
.hfs-article-filter-btn.active {
	background: var(--hfs-brown-dark);
	border-color: var(--hfs-brown-dark);
	color: #fff;
}

.hfs-article-card {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
	text-decoration: none;
	color: var(--hfs-text);
	transition: box-shadow 0.2s, transform 0.2s;
	height: 100%;
}
.hfs-article-card:hover {
	box-shadow: 0 8px 24px rgba(62, 39, 35, 0.12);
	transform: translateY(-2px);
}
.hfs-article-card-img {
	height: 180px;
	overflow: hidden;
}
.hfs-article-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}
.hfs-article-card:hover .hfs-article-card-img img {
	transform: scale(1.05);
}
.hfs-article-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.hfs-article-card-category {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--hfs-brown-light);
	margin-bottom: 6px;
}
.hfs-article-card-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	margin: 0 0 8px;
	line-height: 1.3;
}
.hfs-article-card-excerpt {
	font-size: 0.85rem;
	color: var(--hfs-text-muted);
	line-height: 1.5;
	margin: 0 0 12px;
	flex: 1;
}
.hfs-article-card-meta {
	display: flex;
	gap: 12px;
	font-size: 0.75rem;
	color: var(--hfs-tan-dark);
	margin-top: auto;
}

/* ---- Article Detail Page ---- */
.hfs-article-breadcrumb {
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
}
.hfs-article-breadcrumb a {
	color: var(--hfs-brown-light);
	text-decoration: none;
}
.hfs-article-breadcrumb a:hover {
	color: var(--hfs-brown-dark);
}
.hfs-article-breadcrumb-sep {
	margin: 0 6px;
	color: var(--hfs-tan);
}

.hfs-article-hero {
	border-radius: 10px;
	overflow: hidden;
	max-height: 400px;
}
.hfs-article-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hfs-article-detail-category {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--hfs-brown-light);
	background: var(--hfs-cream);
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.hfs-article-detail-title {
	font-family: 'Outfit', sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: var(--hfs-brown-dark);
	margin: 0 0 12px;
	line-height: 1.2;
}

.hfs-article-detail-byline {
	display: flex;
	gap: 16px;
	font-size: 0.85rem;
	color: var(--hfs-text-muted);
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--hfs-border);
}
.hfs-article-detail-byline i {
	margin-right: 4px;
}

.hfs-article-detail-content {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--hfs-text);
}
.hfs-article-detail-content h2,
.hfs-article-detail-content h3,
.hfs-article-detail-content h4 {
	font-family: 'Outfit', sans-serif;
	color: var(--hfs-brown-dark);
	margin: 1.5rem 0 0.75rem;
}
.hfs-article-detail-content p {
	margin-bottom: 1rem;
}
.hfs-article-detail-content ul,
.hfs-article-detail-content ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}
.hfs-article-detail-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 1rem 0;
}

.hfs-article-detail-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 1rem;
	border-top: 1px solid var(--hfs-border);
}
.hfs-article-tag {
	font-size: 0.75rem;
	padding: 4px 12px;
	border-radius: 20px;
	border: 1px solid var(--hfs-tan);
	color: var(--hfs-brown-light);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.hfs-article-tag:hover {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
}

.hfs-article-back-link {
	font-size: 0.85rem;
	color: var(--hfs-brown-light);
	text-decoration: none;
}
.hfs-article-back-link:hover {
	color: var(--hfs-brown-dark);
}
.hfs-article-back-link i {
	margin-right: 4px;
}
.hfs-article-view-all {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hfs-brown-light);
	text-decoration: none;
}
.hfs-article-view-all:hover {
	color: var(--hfs-brown-dark);
}
.hfs-article-view-all i {
	margin-left: 4px;
}

/* ---- Homepage Review Cards ---- */
.hfs-review-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.hfs-review-stars {
	color: #d4a017;
	font-size: 0.85rem;
	margin-bottom: 6px;
}
.hfs-review-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--hfs-text);
	margin-bottom: 4px;
}
.hfs-review-text {
	font-size: 0.82rem;
	color: var(--hfs-text-light);
	line-height: 1.5;
	flex-grow: 1;
}
.hfs-review-meta {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--hfs-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.72rem;
}
.hfs-review-author {
	font-weight: 600;
	color: var(--hfs-text);
}
.hfs-review-product {
	color: var(--hfs-brown-light);
	text-decoration: none;
}
.hfs-review-product:hover {
	color: var(--hfs-brown-dark);
	text-decoration: underline;
}

/* ---- Intro (kept for Our Store page later) ---- */
.hfs-intro {
	border-bottom: 1px solid rgba(0,0,0,0.08);
	padding-bottom: 2.5rem;
}

.hfs-intro-title {
	font-weight: 700;
	letter-spacing: 0.5px;
}

.hfs-intro-lead {
	font-size: 1.05rem;
	color: #5c3d2e;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

.hfs-product-card {
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	height: 100%;
	box-shadow:
		0 1px 2px rgba(62,39,35,0.06),
		0 4px 8px rgba(62,39,35,0.06),
		0 8px 20px rgba(62,39,35,0.08),
		0 12px 28px rgba(62,39,35,0.04);
}

.hfs-product-card:hover {
	transform: translateY(-5px);
	box-shadow:
		0 2px 4px rgba(62,39,35,0.06),
		0 8px 16px rgba(62,39,35,0.08),
		0 16px 32px rgba(62,39,35,0.1),
		0 24px 48px rgba(62,39,35,0.06);
}

/* Image area */
.hfs-product-card .card-image-area {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: var(--hfs-cream-dark);
	flex-shrink: 0;
}

.hfs-product-card .card-image-area img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	position: relative;
	z-index: 1;
}

.hfs-product-card .card-image-area .product-icon {
	font-size: 3.5rem;
	color: rgba(92,61,46,0.15);
	position: relative;
	z-index: 1;
}

/* Price tag -- hangs from top */
.hfs-product-card .price-tag {
	position: absolute;
	top: 0;
	right: 14px;
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	padding: 8px 14px 6px;
	border-radius: 0 0 8px 8px;
	z-index: 2;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Info section -- category colored, rounded top */
.hfs-product-card .card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 14px 14px 0 0;
	margin-top: -14px;
	z-index: 3;
	padding: 14px 14px 14px;
}

.hfs-product-card .card-category {
	font-family: 'Outfit', sans-serif;
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	margin-bottom: 4px;
}

.hfs-product-card .card-product-name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--c-product-name, #FDF5E6);
	line-height: 1.25;
	margin-bottom: 4px;
	min-height: 2.3em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}

a.card-product-name:hover { color: var(--c-product-name-hover, #fff); text-decoration: none; }

.hfs-product-card .card-product-desc {
	font-size: 0.68rem;
	color: var(--c-desc, #9e9080);
	line-height: 1.4;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 1.9em;
}

/* Detail rows */
.hfs-product-card .card-details {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.hfs-product-card .card-detail-row {
	display: flex;
	align-items: center;
	font-size: 0.68rem;
	padding: 5px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hfs-product-card .card-detail-row:first-child {
	border-top: 1px solid rgba(255,255,255,0.08);
}

.hfs-product-card .card-detail-label {
	flex: 0 0 30%;
	text-align: right;
	padding-right: 10px;
	color: var(--c-detail-label, #8B7A68);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.55rem;
	letter-spacing: 0.5px;
}

.hfs-product-card .card-detail-divider {
	width: 1px;
	height: 14px;
	background: rgba(255,255,255,0.15);
	flex-shrink: 0;
}

.hfs-product-card .card-detail-value {
	flex: 1;
	padding-left: 10px;
	color: var(--c-desc, #D7CCC8);
	font-weight: 500;
}

/* Collapsible details toggle */
.hfs-product-card .card-details-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.6rem;
	color: var(--c-detail-label, #8B7A68);
	cursor: pointer;
	padding: 4px 0 2px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.2s;
}
.hfs-product-card .card-details-toggle:hover { color: var(--c-desc-hover, #D7CCC8); }
.hfs-product-card .card-details-toggle i { font-size: 0.7rem; transition: transform 0.2s; }
.hfs-product-card .card-details-toggle.open i { transform: rotate(180deg); }

.hfs-product-card .card-details-collapsible {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.hfs-product-card .card-details-collapsible.open {
	max-height: 200px;
}

.hfs-product-card .card-detail-value.in-stock { color: #6ee7b7; }
.hfs-product-card .card-detail-value.low-stock { color: #fbbf24; }
.hfs-product-card .card-detail-value.out-of-stock { color: #fca5a5; }

/* Button -- forest green */
.hfs-product-card .card-btn-area { margin-top: auto; }

.hfs-product-card .card-add-btn {
	display: block;
	width: 100%;
	padding: 9px;
	border: none;
	border-radius: 8px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	background: var(--hfs-green-dark);
	color: #e8f5e9;
}

.hfs-product-card .card-add-btn:hover {
	background: var(--c-btn-hover, #1a3a24);
	color: var(--c-btn-text-hover, #ffffff);
	transform: translateY(-1px);
}

.hfs-product-card .card-add-btn:disabled {
	background: #444;
	color: #777;
	cursor: not-allowed;
	transform: none;
}


/* ---- 6 High-Level Category Colors ---- */
.cat-feed-nutrition .card-info { background: linear-gradient(170deg, #4e3733 0%, #3a2b26 100%); }
.cat-feed-nutrition .card-category { color: #d4b87a; }

.cat-pet-animal .card-info { background: linear-gradient(170deg, #5c3618 0%, #4a2810 100%); }
.cat-pet-animal .card-category { color: #f0a05e; }

.cat-health-wellness .card-info { background: linear-gradient(170deg, #244a6e 0%, #1a3a5c 100%); }
.cat-health-wellness .card-category { color: #6cb4e8; }

.cat-farm-ranch .card-info { background: linear-gradient(170deg, #3a3a42 0%, #2a2a32 100%); }
.cat-farm-ranch .card-category { color: #9ca3af; }

.cat-garden-floral .card-info { background: linear-gradient(170deg, #3a4a28 0%, #2a3a1a 100%); }
.cat-garden-floral .card-category { color: #a3e635; }

.cat-apparel-footwear .card-info { background: linear-gradient(170deg, #3a2d68 0%, #2a2050 100%); }
.cat-apparel-footwear .card-category { color: #a5b4fc; }

.cat-default .card-info { background: linear-gradient(170deg, #4e3733 0%, #3a2b26 100%); }
.cat-default .card-category { color: var(--hfs-tan); }


/* ---- Category sidebar ---- */
.hfs-sidebar {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 1rem;
}

.hfs-sidebar h5 {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	border-bottom: 2px solid var(--hfs-tan);
	padding-bottom: 0.5rem;
	margin-bottom: 0.8rem;
}

.hfs-sidebar .list-group-item {
	border: none;
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
	color: var(--hfs-text);
	cursor: pointer;
	border-radius: 6px;
	background: transparent;
}

.hfs-sidebar .list-group-item:hover,
.hfs-sidebar .list-group-item.active {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
	font-weight: 600;
}


/* ---- Product detail ---- */
.hfs-product-detail .detail-layout {
	display: flex;
	gap: 2rem;
}

.hfs-product-detail .detail-gallery {
	flex: 0 0 auto;
	width: 45%;
	display: flex;
	gap: 12px;
}

.hfs-product-detail .detail-thumb-strip {
	flex: 0 0 64px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
}

.hfs-product-detail .detail-image-wrap {
	flex: 1;
	background: var(--hfs-cream-dark);
	border-radius: 10px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.hfs-product-detail .detail-info {
	flex: 1;
	min-width: 0;
}

.hfs-product-detail .product-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
}

.hfs-product-detail .product-meta-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--hfs-brown);
	margin-bottom: 0.4rem;
}

.hfs-product-detail .product-meta-sep::before {
	content: "\00b7";
	font-weight: 700;
}

.hfs-product-detail .product-meta-brand { font-weight: 600; }

.hfs-product-detail .product-price-large {
	font-family: 'Outfit', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--hfs-green-dark);
}
.hfs-product-detail .product-price-unit {
	font-size: 1rem;
	font-weight: 500;
	color: var(--hfs-text-muted, #6b7280);
}

.hfs-product-detail .stock-status { font-size: 0.9rem; font-weight: 600; }
.hfs-product-detail .stock-status.in-stock { color: var(--hfs-green); }
.hfs-product-detail .stock-status.low-stock { color: #b45309; }
.hfs-product-detail .stock-status.out-of-stock { color: var(--hfs-rust); }

.hfs-product-detail .btn-add-cart-lg {
	background: var(--hfs-green-dark);
	color: #e8f5e9;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.7rem 2.5rem;
	border: none;
	border-radius: 8px;
}

.hfs-product-detail .btn-add-cart-lg:hover { background: #1a3a24; color: #fff; }

.hfs-product-detail .detail-info-box {
	background: var(--hfs-cream);
	border-radius: 8px;
	font-size: 0.88rem;
	padding: 1rem 1.2rem;
	margin-top: 1.5rem;
}

/* Product tabs */
.hfs-product-tabs {
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.hfs-product-tabs .nav-tabs {
	border-bottom: 2px solid var(--hfs-cream-dark);
}

.hfs-product-tabs .nav-tabs .nav-link {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--hfs-brown);
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.6rem 1.2rem;
	margin-bottom: -2px;
}

.hfs-product-tabs .nav-tabs .nav-link:hover {
	color: var(--hfs-brown-dark);
	border-bottom-color: var(--hfs-brown);
}

.hfs-product-tabs .nav-tabs .nav-link.active {
	color: var(--hfs-green-dark);
	border-bottom-color: var(--hfs-green-dark);
	background: transparent;
}

.hfs-product-tabs .product-tab-body {
	padding: 1.5rem 0.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--hfs-brown-dark);
}

/* Product specs table (Details tab) */
.product-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.product-specs-table th,
.product-specs-table td {
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--hfs-cream-dark);
	vertical-align: top;
}

.product-specs-table th {
	font-weight: 600;
	color: var(--hfs-brown-dark);
	width: 35%;
	white-space: nowrap;
}

.product-specs-table td {
	color: var(--hfs-brown);
}

.product-specs-table > tr:last-child > th,
.product-specs-table > tr:last-child > td {
	border-bottom: none;
}

/* Product average rating (near title) */
.product-avg-rating {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
}

.product-avg-rating .avg-rating-stars {
	color: #d4a017;
}

.product-avg-rating .avg-rating-number {
	font-weight: 600;
	color: var(--hfs-brown-dark);
}

.product-avg-rating .avg-rating-count {
	color: var(--hfs-brown);
}

/* Review tab count badge */
.review-tab-count {
	font-size: 0.8rem;
	color: var(--hfs-brown);
}

/* Review cards */
.review-card {
	padding: 1rem 0;
	border-bottom: 1px solid var(--hfs-cream-dark);
}

.review-card:last-child {
	border-bottom: none;
}

.review-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.3rem;
}

.review-card-stars {
	color: #d4a017;
	font-size: 0.95rem;
}

.review-card-date {
	font-size: 0.8rem;
	color: var(--hfs-brown);
}

.review-card-title {
	font-weight: 600;
	color: var(--hfs-brown-dark);
	margin-bottom: 0.3rem;
}

.review-card-text {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--hfs-brown-dark);
	margin-bottom: 0.3rem;
}

.review-card-author {
	font-size: 0.8rem;
	color: var(--hfs-brown);
	font-style: italic;
}

/* Review submission form */
.review-form-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--hfs-brown-dark);
	margin-bottom: 0.8rem;
}

.review-login-prompt {
	font-size: 0.9rem;
	color: var(--hfs-brown);
	padding: 0.5rem 0;
}

.review-login-prompt a {
	color: var(--hfs-green-dark);
	font-weight: 600;
}

/* Interactive star rating input */
.star-input-stars {
	font-size: 1.5rem;
	color: #ccc;
	cursor: pointer;
}

.star-input-stars i {
	transition: color 0.1s;
	margin-right: 2px;
}

.star-input-stars i.bi-star-fill {
	color: #d4a017;
}

.star-input-stars i.bi-star {
	color: #ccc;
}

.star-input-stars i:hover {
	color: #d4a017;
}


/* ---- Cart flyout ---- */
.hfs-cart-flyout {
	position: fixed;
	top: 0;
	right: -420px;
	width: 400px;
	height: 100vh;
	background: var(--hfs-surface);
	box-shadow: -4px 0 30px rgba(0,0,0,0.15);
	z-index: 1050;
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hfs-cart-flyout.open { right: 0; }

.hfs-cart-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 1049;
	display: none;
}

.hfs-cart-overlay.open { display: block; }

.hfs-cart-flyout .cart-header {
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hfs-cart-flyout .cart-items {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.hfs-cart-flyout .cart-footer {
	border-top: 2px solid var(--hfs-border);
	padding: 1rem;
	background: var(--hfs-cream);
}

.hfs-cart-flyout .cart-item {
	display: flex;
	gap: 0.8rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--hfs-border);
}

.hfs-cart-flyout .cart-item img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	background: var(--hfs-cream-dark);
	border-radius: 6px;
}

.hfs-cart-flyout .cart-item-name      { font-weight: 600; font-size: 0.88rem; }
.hfs-cart-flyout .cart-item-price-each { font-size: 0.78rem; color: var(--hfs-text-muted); }
.hfs-cart-flyout .cart-item-line-total { font-weight: 700; color: var(--hfs-green-dark); }

/* Store mode banners */
.hfs-store-banner {
	text-align: center;
	padding: 8px 12px;
	font-size: 0.85rem;
}
.hfs-store-banner--setup   { background: #5C3D2E; color: #FDF5E6; }
.hfs-store-banner--instore { background: #2E5339; color: #FDF5E6; font-size: 0.82rem; padding: 6px 12px; }

.hfs-cart-flyout .btn-checkout {
	background: var(--hfs-green-dark);
	color: #e8f5e9;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	width: 100%;
	padding: 0.7rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
}

.hfs-cart-flyout .btn-checkout:hover { background: #1a3a24; color: #fff; }


/* ---- Checkout ---- */
.hfs-checkout .form-label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--hfs-text-light);
}

.hfs-checkout .order-summary {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 1.2rem;
}

.hfs-checkout .btn-place-order {
	background: var(--hfs-green-dark);
	color: #e8f5e9;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	width: 100%;
	padding: 0.8rem;
	border: none;
	font-size: 1.1rem;
	border-radius: 8px;
}

.hfs-checkout .btn-place-order:hover { background: #1a3a24; color: #fff; }


/* ---- Account pages (account.jsp) ---- */

/* Layout */
.hfs-acct-layout      { display: flex; gap: 2rem; align-items: flex-start; }
.hfs-acct-sidebar     { width: 220px; flex-shrink: 0; }
.hfs-acct-main        { flex: 1; min-width: 0; }

/* Sidebar */
.hfs-acct-avatar      { width: 72px; height: 72px; border-radius: 50%; background: #e8e0d5; display: flex; align-items: center; justify-content: center; margin-bottom: 0.65rem; }
.hfs-acct-avatar i    { font-size: 2rem; color: #a08060; }
.hfs-acct-name        { font-weight: 700; font-size: 1rem; }
.hfs-acct-email-small { font-size: 0.8rem; color: #888; word-break: break-all; margin-bottom: 1.25rem; }

.hfs-acct-nav a             { display: block; padding: 0.45rem 0.6rem; border-radius: 6px; text-decoration: none; color: #444; font-size: 0.92rem; margin-bottom: 2px; }
.hfs-acct-nav a.active      { color: var(--hfs-rust, #c0392b); font-weight: 600; background: rgba(192,57,43,0.07); }
.hfs-acct-nav a:hover:not(.active) { background: #f0ebe3; }
.hfs-acct-signout           { color: var(--hfs-rust, #c0392b) !important; margin-top: 1rem; }

/* Section headings */
.hfs-acct-section-title     { font-weight: 700; margin-bottom: 0.25rem; }
.hfs-acct-section-subtitle  { color: #888; font-size: 0.88rem; margin-bottom: 1.25rem; }

/* Info cards */
.hfs-info-card        { background: #fff; border: 1px solid #e8e3d9; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.85rem; cursor: pointer; transition: box-shadow 0.15s; }
.hfs-info-card:hover  { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.hfs-info-card.editing{ cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.hfs-info-card-static { cursor: default; }
.hfs-card-header      { display: flex; justify-content: space-between; align-items: center; }
.hfs-card-label       { font-weight: 600; font-size: 0.95rem; }
.hfs-card-icon        { color: var(--hfs-rust, #c0392b); font-size: 1.1rem; }
.hfs-card-value       { color: #555; font-size: 0.9rem; margin-top: 0.3rem; }
.hfs-card-hint        { color: #aaa; font-size: 0.8rem; margin-top: 0.3rem; font-style: italic; }
.hfs-card-edit-area   { margin-top: 0.85rem; display: none; }
.hfs-card-edit-area.open { display: block; }
.hfs-card-actions     { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.hfs-pw-header        { cursor: pointer; }

/* Password section */
.hfs-pw-section       { background: #fff; border: 1px solid #e8e3d9; border-radius: 10px; padding: 1.25rem; margin-top: 1rem; }
.hfs-pw-body          { display: none; margin-top: 0.85rem; }
.hfs-pw-msg           { font-size: 0.85rem; }

/* Alert messages inside account page */
.hfs-acct-msg         { padding: 0.4rem 0.75rem; font-size: 0.85rem; margin-bottom: 0.5rem; }

/* Order history rows */
.hfs-order-row        { cursor: default; margin-bottom: 0.6rem; }
.hfs-order-number     { font-weight: 600; font-size: 0.9rem; }
.hfs-order-meta       { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }

/* Account page: override Bootstrap button colors — these rules are later in the
   cascade than Bootstrap and have higher specificity, so no !important needed. */
.hfs-account-card .btn-primary,
.hfs-pw-section .btn-primary,
.hfs-info-card .btn-primary {
	background: var(--hfs-brown);
	border-color: var(--hfs-brown-dark);
	color: var(--hfs-cream);
	font-weight: 700;
}

.hfs-account-card .btn-primary:hover,
.hfs-pw-section .btn-primary:hover,
.hfs-info-card .btn-primary:hover {
	background: var(--hfs-brown-dark);
	border-color: var(--hfs-brown-dark);
	color: var(--hfs-cream);
}

.hfs-account-card .btn-outline-secondary,
.hfs-pw-section .btn-outline-secondary,
.hfs-info-card .btn-outline-secondary {
	color: var(--hfs-brown);
	border-color: var(--hfs-tan);
	background: transparent;
}

.hfs-account-card .btn-outline-secondary:hover,
.hfs-pw-section .btn-outline-secondary:hover,
.hfs-info-card .btn-outline-secondary:hover {
	background: var(--hfs-brown);
	border-color: var(--hfs-brown);
	color: var(--hfs-cream);
}

/* Password show/hide eye toggle — login.jsp and account.jsp */
.input-group .btn-outline-secondary.hfs-pw-toggle {
	color: var(--hfs-brown);
	border-color: var(--hfs-tan);
	background: transparent;
}

.input-group .btn-outline-secondary.hfs-pw-toggle:hover {
	background: var(--hfs-brown);
	border-color: var(--hfs-brown);
	color: var(--hfs-cream);
}

.hfs-account-card h3 {
	font-family: 'Outfit', sans-serif;
	color: var(--hfs-brown-dark);
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.hfs-account-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 2rem;
	max-width: 450px;
	margin: 2rem auto;
}

@media (max-width: 700px) {
	.hfs-acct-layout  { flex-direction: column; }
	.hfs-acct-sidebar { width: 100%; }
}


/* ---- Section headers ---- */
.hfs-section-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	border-left: 4px solid var(--hfs-tan);
	padding-left: 0.8rem;
	margin: 1.5rem 0 1rem;
}

/* Page-level title — larger, no accent bar */
.hfs-page-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--hfs-brown-dark);
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--hfs-tan-light);
}


/* ---- Footer ---- */
.hfs-footer {
	background: var(--hfs-brown-dark);
	color: #D7CCC8;
	padding: 2.5rem 0;
}

.hfs-footer h6 {
	font-family: 'Outfit', sans-serif;
	color: var(--hfs-tan);
	font-weight: 700;
	margin-bottom: 0.8rem;
}

.hfs-footer a {
	color: #D7CCC8;
	text-decoration: none;
	font-size: 0.88rem;
}

.hfs-footer a:hover { color: var(--hfs-tan-light); }

.hfs-footer .footer-bottom {
	border-top: 1px solid var(--hfs-brown);
	padding-top: 1rem;
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.82rem;
	color: var(--hfs-brown-light);
}

.footer-staff-link {
	color: var(--hfs-brown);
	text-decoration: none;
	margin-left: 1.5rem;
	font-size: 0.72rem;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.footer-staff-link:hover { opacity: 1; color: var(--hfs-brown-light); }


/* ---- Utilities ---- */
.hfs-breadcrumb {
	font-size: 0.82rem;
	background: none;
	padding: 0.8rem 0 0.3rem;
}

.hfs-breadcrumb a { color: var(--hfs-text-light); }
.hfs-breadcrumb a:hover { color: var(--hfs-brown-dark); }

.hfs-badge-category {
	background-color: var(--hfs-green);
	font-size: 0.7rem;
}

.loading-spinner {
	text-align: center;
	padding: 3rem;
	color: var(--hfs-text-muted);
}

.loading-spinner .spinner-border {
	color: var(--hfs-tan);
}


/* ---- Pagination ---- */
.hfs-pagination .page-link {
	color: var(--hfs-brown);
}

.hfs-pagination .page-item.active .page-link {
	background-color: var(--hfs-green-dark);
	border-color: var(--hfs-green-dark);
	color: #fff;
}


/* ============================================
   SHARED FLYOUT OVERLAY
   ============================================ */

.hfs-flyout-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.45);
	z-index: 1049;
	display: none;
}

.hfs-flyout-overlay.open { display: block; }


/* ============================================
   CATEGORIES FLYOUT (left side)
   ============================================ */

.hfs-cat-flyout {
	position: fixed;
	top: 0;
	left: -340px;
	width: 320px;
	height: 100vh;
	background: var(--hfs-surface);
	box-shadow: 4px 0 30px rgba(0,0,0,0.15);
	z-index: 1050;
	transition: left 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hfs-cat-flyout.open { left: 0; }

.cat-flyout-header {
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.cat-flyout-header h5 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
}

.cat-flyout-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.cat-flyout-group {
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-brown-light);
	padding: 12px 20px 4px;
}

.cat-flyout-group:not(:first-child) {
	margin-top: 4px;
	border-top: 1px solid var(--hfs-border);
	padding-top: 12px;
}

.cat-flyout-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 20px 8px 28px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition: background 0.1s;
}

.cat-flyout-item:hover {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
}

.cat-flyout-count {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	background: var(--hfs-cream-dark);
	padding: 1px 8px;
	border-radius: 10px;
}


/* ============================================
   MEGA MENU — 3-zone layout
   Left: hero + promo tile | Right: link columns
   ============================================ */

/* ============================================================
   MEGAMENU — full-width three-panel hover layout
   Left: hero + promo  |  Mid: L2 list  |  Right: L3 panel
   No visible hyperlink styling anywhere inside the megamenu.
   ============================================================ */

.hfs-mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 95vw;
	max-width: calc(100vw - 32px);
	background: var(--hfs-surface);
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
	z-index: 89;
	display: none;
	border-bottom: 1px solid var(--hfs-tan);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
@media (min-width: 768px)  { .hfs-mega-menu { width: 90vw; } }
@media (min-width: 1024px) { .hfs-mega-menu { width: 85vw; } }
@media (min-width: 1280px) { .hfs-mega-menu { width: 72vw; } }
@media (min-width: 1600px) { .hfs-mega-menu { width: 64vw; } }
@media (min-width: 1920px) { .hfs-mega-menu { width: 56vw; } }
.hfs-mega-menu.open {
	display: flex;
	flex-direction: column;
}

#megaMenuClose {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	color: var(--hfs-tan-dark);
	opacity: 0.6;
	padding: 0 4px;
	z-index: 10;
}
#megaMenuClose:hover { opacity: 1; color: var(--hfs-brown-dark); }

/* inner wrapper */
.mega-menu-inner {
	width: 100%;
	padding: 0;
	flex: 1 1 auto;
}

/* ── Three-panel body ── */
.mm-body {
	display: flex;
	align-items: stretch;
	min-height: 280px;
}

/* ── Left column: hero + promo ── */
.mm-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 230px;
	flex-shrink: 0;
	padding: 1rem 1rem 1rem 1.25rem;
	border-right: 1px solid var(--hfs-border);
}

.mm-hero {
	position: relative;
	width: 100%;
	height: 160px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	flex-shrink: 0;
	cursor: pointer;
}
.mm-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.mm-hero:hover img { transform: scale(1.06); }
.mm-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30,10,5,0.75) 0%, transparent 55%);
}
.mm-hero-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mm-hero-eyebrow {
	font-size: 0.58rem;
	color: rgba(255,255,255,0.72);
	text-transform: uppercase;
	letter-spacing: 1.2px;
}
.mm-hero-cta {
	font-family: 'Outfit', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	color: #fff;
}

.mm-promo {
	position: relative;
	width: 100%;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-cream-dark);
}
.mm-promo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.mm-promo:hover img { opacity: 0.65; }
.mm-promo-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 6px 12px;
	background: linear-gradient(to top, rgba(30,10,5,0.65) 0%, transparent 100%);
	font-family: 'Outfit', sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
}
.mm-promo-label i { color: var(--hfs-rust); font-size: 0.72rem; }

/* ── Middle column: L2 list ── */
.mm-mid {
	width: 230px;
	flex-shrink: 0;
	padding: 0.6rem 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
}
.mm-mid-title {
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: var(--hfs-text-muted);
	padding: 0.3rem 1rem 0.5rem;
}
.mm-l2-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	overflow-y: auto;
}
.mm-l2-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	color: var(--hfs-text);
	font-size: 0.86rem;
	font-weight: 500;
	gap: 6px;
	border-left: 3px solid transparent;
	white-space: nowrap;
	overflow: hidden;
}
.mm-l2-item:hover,
.mm-l2-item.active {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
	border-left-color: var(--hfs-tan);
}
.mm-l2-item.active {
	border-left-color: var(--hfs-brown);
	background: var(--hfs-cream-dark);
	font-weight: 600;
}
.mm-l2-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.mm-l2-arrow {
	font-size: 0.62rem;
	color: var(--hfs-tan-dark);
	opacity: 0.5;
	transition: opacity 0.12s, transform 0.12s;
	flex-shrink: 0;
}
.mm-l2-item:hover .mm-l2-arrow,
.mm-l2-item.active .mm-l2-arrow {
	opacity: 1;
	transform: translateX(2px);
}

/* ── Right panel: L3 items ── */
.mm-right {
	position: relative;
	padding: 0.85rem 1.25rem;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.mm-r-panel {
	display: none;
	animation: mmFadeIn 0.14s ease;
}
.mm-r-panel.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

@keyframes mmFadeIn {
	from { opacity: 0; transform: translateX(6px); }
	to   { opacity: 1; transform: translateX(0); }
}

.mm-r-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--hfs-border);
	padding-bottom: 0.6rem;
}
.mm-r-heading span {
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
}
/* "See all" link — explicit colour overrides to kill browser defaults */
.mm-r-see-all,
.mm-r-see-all:link,
.mm-r-see-all:visited,
.mm-r-see-all:active {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--hfs-green-dark) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	cursor: pointer;
	white-space: nowrap;
}
.mm-r-see-all:hover { color: var(--hfs-green) !important; }

/* L3 grid — two equal columns, fills L2 height, items wrap within column if needed */
.mm-r-grid {
	columns: 2;
	column-gap: 24px;
	column-fill: auto;
	flex: 1 1 0;
	min-height: 0;
	position: relative;
}
/* Permanent vertical separator at the center — always visible even if second column is empty */
.mm-r-grid::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 1px);
	width: 1px;
	background: var(--hfs-border);
	pointer-events: none;
}
/* Each L3 tile — icon + label, fills columns top-to-bottom */
.mm-r-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 12px;
	border-radius: 7px;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--hfs-text);
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
	break-inside: avoid;
	margin-bottom: 2px;
}
.mm-r-item:hover {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
}
.mm-r-item i {
	font-size: 0.9rem;
	color: var(--hfs-tan-dark);
	opacity: 0.75;
	flex-shrink: 0;
	transition: color 0.1s, opacity 0.1s;
}
.mm-r-item:hover i {
	color: var(--hfs-brown);
	opacity: 1;
}
.mm-r-empty {
	font-size: 0.85rem;
	color: var(--hfs-text-muted);
	padding: 0.5rem 0;
	font-style: italic;
}

/* ── Footer — must sit outside .mega-menu-inner padding ── */
.mm-footer {
	padding: 0.65rem 1.5rem;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-cream);
	width: 100%;
	box-sizing: border-box;
	border-radius: 0 0 10px 10px;
}
.mm-footer a,
.mm-footer a:link,
.mm-footer a:visited {
	color: var(--hfs-green-dark) !important;
	text-decoration: none !important;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.mm-footer a:hover { color: var(--hfs-green) !important; }

.cat-nav-links a.active {
	color: var(--hfs-tan-light) !important;
	background: rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
	.hfs-mega-menu { left: 0; transform: none; width: auto; max-width: 100vw; border-radius: 0; }
	.mm-body { flex-direction: column; }
	.mm-left { width: 100%; flex-direction: row; padding: 0.75rem 1.25rem; border-right: none; border-bottom: 1px solid var(--hfs-border); }
	.mm-hero { flex: 1; height: 110px; }
	.mm-promo { flex: 1; height: 70px; }
	.mm-mid { width: 100%; border-right: none; border-bottom: 1px solid var(--hfs-border); }
	.mm-right { width: 100%; padding: 0.75rem 1.25rem; }
	.mm-r-grid { columns: 2; }
}


/* ============================================
   PRODUCTS PAGE LAYOUT
   ============================================ */

.hfs-products-page {
	width: 100%;
}

.products-layout {
	display: flex;
	max-width: 100%;
	align-items: flex-start;
}

/* Filter sidebar */
.filter-sidebar {
	width: 300px;
	flex-shrink: 0;
	background: var(--hfs-surface);
	border-right: 1px solid var(--hfs-border);
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	display: flex;
	flex-direction: column;
	transition: width 0.25s ease, min-width 0.25s ease;
	overflow: hidden;
}

/* Collapsed state on desktop */
.filter-sidebar.collapsed {
	width: 0;
	min-width: 0;
	border-right: none;
}

/* Sidebar toggle button (visible on desktop, floats on edge) */
.filter-sidebar-toggle {
	position: sticky;
	top: 50%;
	align-self: flex-start;
	z-index: 10;
	width: 24px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hfs-cream-dark);
	border: 1px solid var(--hfs-border);
	border-left: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	color: var(--hfs-text);
	font-size: 0.75rem;
	transition: all 0.15s;
	flex-shrink: 0;
	margin-left: -1px;
}
.filter-sidebar-toggle:hover {
	background: var(--hfs-green-dark);
	color: #fff;
	border-color: var(--hfs-green-dark);
}
.filter-sidebar-toggle i { transition: transform 0.25s; }
.filter-sidebar-toggle.collapsed i { transform: rotate(180deg); }

.filter-sidebar-body {
	padding: 1rem;
	overflow-y: auto;
	flex: 1;
}

.filter-section {
	margin-bottom: 1.2rem;
}

.filter-title {
	font-family: 'Outfit', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--hfs-border);
	margin-bottom: 0.6rem;
}

.filter-title i { font-size: 0.7rem; transition: transform 0.2s; }
.filter-title[aria-expanded="false"] i { transform: rotate(-90deg); }

.filter-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 300px;
	overflow-y: auto;
}

.filter-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	padding: 3px 4px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--hfs-text);
}

.filter-checkbox:hover { background: var(--hfs-cream); }

.filter-checkbox input { accent-color: var(--hfs-green-dark); }

.filter-count {
	color: var(--hfs-text-muted);
	font-size: 0.72rem;
	margin-left: auto;
}

/* Hierarchical category groups in filter */
.filter-cat-group-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-brown-dark);
	padding: 6px 4px 3px;
	margin-top: 4px;
}
.filter-cat-group-label:first-child { margin-top: 0; }

/* L1 root headings */
.filter-cat-l1-heading {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	padding: 7px 4px 4px;
	margin-top: 8px;
	border-bottom: 1px solid var(--hfs-tan-light);
}
.filter-cat-l1-heading:first-child,
.filter-cat-all + .filter-cat-l1-heading,
.filter-specials-label + .filter-cat-l1-heading { margin-top: 0; }
.filter-cat-l1-link {
	color: var(--hfs-brown-dark);
	text-decoration: none;
}
.filter-cat-l1-link:hover {
	color: var(--hfs-brown);
	text-decoration: underline;
}

/* L2 group headings — consistent in all views */
.filter-cat-l2-heading {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--hfs-brown-dark);
	padding: 6px 4px 3px;
	margin-top: 8px;
	border-bottom: 1px solid var(--hfs-tan-light);
}
.filter-cat-l2-heading:first-child { margin-top: 0; }
.filter-cat-l2-heading a,
.filter-cat-l2-link {
	color: var(--hfs-brown-dark);
	text-decoration: none;
}
.filter-cat-l2-heading a:hover,
.filter-cat-l2-link:hover {
	color: var(--hfs-brown);
	text-decoration: underline;
}

/* All Categories link — largest, always has separator line */
.filter-cat-all {
	font-size: 0.82rem;
	font-weight: 700;
	padding: 7px 4px 5px;
	border-bottom: 1px solid var(--hfs-tan-light);
}
.filter-cat-all a {
	color: var(--hfs-brown-dark);
	text-decoration: none;
}
.filter-cat-all a:hover {
	color: var(--hfs-brown);
	text-decoration: underline;
}

.filter-specials-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-brand-accent, #C9A94E);
	padding: 4px 4px 6px;
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.filter-cat-sub {
	padding-left: 10px;
}

/* L3 leaves under L2 headings */
.filter-cat-l3 {
	padding-left: 10px;
}

/* Apply filters button in toolbar */
.filter-apply-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 30px;
	padding: 0 12px;
	border: none;
	border-radius: 6px;
	background: var(--hfs-green-dark);
	color: #e8f5e9;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	transition: all 0.15s;
	white-space: nowrap;
}
.filter-apply-btn:hover { background: #1a3a24; }
.filter-apply-btn.has-changes {
	animation: filter-pulse 0.5s ease;
}
@keyframes filter-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* Dirty indicator when filters changed but not applied */
.filter-dirty-dot {
	display: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hfs-rust);
	flex-shrink: 0;
}
.filter-apply-btn.dirty .filter-dirty-dot { display: inline-block; }

/* Slider disabled state when price presets are active */
.price-slider-track.slider-disabled {
	opacity: 0.35;
	pointer-events: none;
}
.price-slider-track.slider-disabled::after {
	content: '';
}

/* Filter sidebar footer (always visible, both desktop and mobile) */
.filter-sidebar-footer {
	padding: 8px 10px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-cream);
}

.price-range-inputs .input-group-text {
	background: var(--hfs-cream-dark);
	border-color: var(--hfs-border);
	font-size: 0.8rem;
}

.price-range-inputs .form-control {
	font-size: 0.8rem;
}

/* Price slider */
.price-slider-wrap {
	padding: 0.3rem 0;
}

.price-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--hfs-text);
	margin-bottom: 4px;
}

.price-slider-track {
	position: relative;
	height: 28px;
	display: flex;
	align-items: center;
}

.price-slider-range {
	position: absolute;
	height: 4px;
	background: var(--hfs-green-dark);
	border-radius: 2px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.price-slider-input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	z-index: 2;
	margin: 0;
	top: 50%;
	transform: translateY(-50%);
}

.price-slider-input::-webkit-slider-track {
	-webkit-appearance: none;
	height: 4px;
	background: var(--hfs-border);
	border-radius: 2px;
}

.price-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hfs-green-dark);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	cursor: pointer;
	pointer-events: auto;
	margin-top: -7px;
}

.price-slider-input::-moz-range-track {
	height: 4px;
	background: transparent;
	border: none;
}

.price-slider-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hfs-green-dark);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	cursor: pointer;
	pointer-events: auto;
}

.price-preset-checks {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Filter toolbar (sticky at top of sidebar) */
.filter-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	background: var(--hfs-cream-dark);
	border-bottom: 1px solid var(--hfs-border);
	position: sticky;
	top: 0;
	z-index: 5;
}

.filter-tb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	background: var(--hfs-surface);
	color: var(--hfs-text);
	cursor: pointer;
	font-size: 0.82rem;
	transition: all 0.15s;
}

.filter-tb-btn:hover:not(:disabled) {
	background: var(--hfs-green-dark);
	color: #fff;
	border-color: var(--hfs-green-dark);
}

.filter-tb-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.filter-tb-label {
	font-size: 0.65rem;
	color: var(--hfs-text-muted);
	margin-left: auto;
	font-weight: 600;
}

/* Mobile filter footer - now handled by .filter-sidebar-footer */

/* Products main area */
.products-main {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.5rem;
}

.products-toolbar {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

/* Active filter tags */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 1rem;
}

.active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--hfs-cream);
	border: 1px solid var(--hfs-border);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--hfs-text);
}

.active-filter-tag i {
	cursor: pointer;
	font-size: 0.7rem;
	color: var(--hfs-rust);
}

.active-filter-tag i:hover { color: #8b1a1a; }

/* Mobile filter bar */
.filter-toggle-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--hfs-surface);
	border-bottom: 1px solid var(--hfs-border);
}

.btn-filter-toggle {
	background: var(--hfs-cream);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 6px 14px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	cursor: pointer;
	color: var(--hfs-text);
}

.result-count-mobile {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
	flex: 1;
}

.sort-select-mobile {
	font-size: 0.78rem;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	padding: 4px 8px;
	background: var(--hfs-surface);
}

/* Filter sidebar mobile overlay */
.filter-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 1040;
	display: none;
}

.filter-overlay.open { display: block; }

.filter-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
}

.filter-sidebar-header h5 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
}


/* ============================================
   MOBILE NAV HAMBURGER
   ============================================ */

.hfs-nav-hamburger {
	background: transparent;
	border: none;
	color: #FDF5E6;
	font-size: 1.6rem;
	line-height: 1;
	padding: 4px 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 6px;
	transition: background 0.15s;
}
.hfs-nav-hamburger:hover { background: rgba(255,255,255,0.1); }

/* ============================================
   MOBILE NAV FLYOUT (right side)
   ============================================ */

.hfs-nav-flyout {
	position: fixed;
	top: 0;
	right: -105%;
	width: 100%;
	height: 100vh;
	background: var(--hfs-surface);
	box-shadow: -4px 0 30px rgba(0,0,0,0.2);
	z-index: 1051;
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hfs-nav-flyout.open { right: 0; }

.nav-flyout-header {
	background: var(--hfs-brown-dark);
	color: #FDF5E6;
	padding: 0.85rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.nav-flyout-search {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--hfs-border);
	flex-shrink: 0;
	background: var(--hfs-cream);
}

.nav-flyout-search .hfs-search-bar {
	width: 100%;
}

.nav-flyout-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
	background: var(--hfs-cream);
}

.nav-flyout-section-label {
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-brown-light);
	padding: 12px 20px 4px;
	border-top: 1px solid var(--hfs-border);
	margin-top: 4px;
	background: var(--hfs-cream);
}

.nav-flyout-section-label:first-child { border-top: none; margin-top: 0; }

.nav-flyout-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	transition: background 0.1s;
	border: none;
	background: var(--hfs-cream);
	width: 100%;
}

.nav-flyout-item:hover {
	background: var(--hfs-cream-dark);
	color: var(--hfs-brown-dark);
}

.nav-flyout-home {
	font-weight: 600;
}

.nav-flyout-divider {
	height: 1px;
	background: var(--hfs-border);
	margin: 4px 0;
}

/* Category accordion rows */
.nav-flyout-cat-group { border-bottom: 1px solid var(--hfs-border); }

.nav-flyout-cat-root {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.nav-flyout-cat-root:hover {
	background: var(--hfs-cream-dark);
}

.nav-flyout-cat-root-link {
	flex: 1;
	display: block;
	padding: 11px 12px 11px 20px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	background: var(--hfs-cream);
	transition: background 0.1s;
}

.nav-flyout-cat-root:hover .nav-flyout-cat-root-link {
	color: var(--hfs-brown-dark);
}

.nav-flyout-expand-btn {
	background: var(--hfs-cream);
	border: none;
	color: var(--hfs-text);
	padding: 11px 20px 11px 8px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: color 0.15s, background 0.1s;
	flex-shrink: 0;
}

.nav-flyout-expand-btn:hover { color: var(--hfs-brown-dark); }

/* Subcategory panel */
.nav-flyout-cat-subs {
	display: none;
	background: var(--hfs-cream);
	border-top: 1px solid var(--hfs-border);
}

.nav-flyout-cat-subs.open { display: block; }

.nav-flyout-subitem {
	display: flex;
	align-items: center;
	padding: 9px 20px 9px 32px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 400;
	transition: background 0.1s;
}

.nav-flyout-subitem:hover {
	background: var(--hfs-cream-dark);
	color: var(--hfs-brown-dark);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
	/* Hide desktop category bar on mobile — nav flyout handles it */
	.hfs-cat-bar { display: none; }

	/* Filter sidebar becomes mobile drawer */
	.filter-sidebar {
		position: fixed;
		top: 0;
		left: -320px;
		width: 300px;
		height: 100vh;
		z-index: 1045;
		transition: left 0.3s ease;
		border-right: none;
		box-shadow: 4px 0 20px rgba(0,0,0,0.15);
	}

	.filter-sidebar.open { left: 0; }

	.products-main { padding: 0.8rem; }
}

@media (max-width: 768px) {
	.hfs-cart-flyout {
		width: 100%;
		right: -100%;
	}

	.hfs-cat-flyout {
		width: 100%;
		left: -100%;
	}

	.hfs-hero { height: 260px; }
	.hfs-hero-slide-content h1,
	.hfs-hero-fallback h1 { font-size: 1.5rem; }
	.hfs-hero-arrow { display: none; }

	.hfs-category-section {
		display: none;
	}

	.hfs-product-card .card-image-area { height: 160px; }
	.hfs-product-card {
		max-width: 85vw;
		margin-left: auto;
		margin-right: auto;
	}

	.mega-menu-links { grid-template-columns: 1fr 1fr; }
}

/* In-store only mode - no longer hides cart/buttons since checkout is available */

/* ============================================================
   Inline style migrations
   ============================================================ */

/* --- Utility: typography --- */
.hfs-text-sm  { font-size: 0.88rem; }
.hfs-text-xs  { font-size: 0.82rem; }

/* --- Utility: visibility --- */
.hfs-hidden   { display: none; }

/* --- Header --- */
.hfs-search-bar--grow    { flex-grow: 1; }
.hfs-nav-flyout-logo     { height: 32px; }
.hfs-cart-total          { color: var(--hfs-brand); }

/* --- Products page --- */
.hfs-select-auto         { width: auto; }

/* --- Product detail --- */
.detail-main-img         { max-height: 400px; }
.detail-qty-group        { width: 120px; }

/* Hide number input spinners */
.detail-qty-group input[type="number"]::-webkit-outer-spin-button,
.detail-qty-group input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.detail-qty-group input[type="number"] {
	-moz-appearance: textfield;
	background: var(--hfs-cream);
	border-color: var(--hfs-brown);
}

.detail-qty-group .btn-outline-secondary {
	border-color: var(--hfs-brown);
	color: var(--hfs-brown-dark);
}

.detail-qty-group .btn-outline-secondary:hover {
	background: var(--hfs-brown);
	color: var(--hfs-cream);
}

.detail-thumb-img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s;
}

.detail-thumb-img:hover {
	border-color: var(--hfs-brown);
}

.detail-thumb-img.active {
	border-color: var(--hfs-green-dark);
}

/* Responsive: stack gallery above info on smaller screens */
@media (max-width: 767.98px) {
	.hfs-product-detail .detail-layout {
		flex-direction: column;
	}
	.hfs-product-detail .detail-gallery {
		width: 100%;
		flex-direction: column-reverse;
	}
	.hfs-product-detail .detail-thumb-strip {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		flex: 0 0 auto;
	}
}

/* --- Checkout --- */
.co-alert-sm             { font-size: 0.88rem; }
.co-stripe-panel         { margin-top: 12px; }
.co-summary-sticky       { top: 1rem; }
.co-total-label          { font-size: 1.2rem; }
.co-total-amount         { font-size: 1.2rem; color: var(--hfs-rust); }
.co-instore-box          { background: #f5f0e8; border: 1px solid #d4c9a8; }
.co-instore-icon         { color: var(--hfs-brown-dark); }
.co-auth-signed-in       { font-size: 0.88rem; }

/* --- Orders --- */
.hfs-modal-header-dark   { background: var(--hfs-brown-dark); color: var(--hfs-cream); }
.hfs-total-lg            { font-size: 1.3rem; color: var(--hfs-rust); }
.co-notes-box            { background: #f5f0e8; font-size: 0.85rem; }

/* --- Account card narrow (register) --- */
.hfs-account-card--narrow { max-width: 520px; }

/* --- Error pages --- */
.hfs-error-center {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hfs-error-code {
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
}
.hfs-error-code--danger  { color: #dc3545; }
.hfs-error-code--accent  { color: var(--hfs-brand-accent); }
.hfs-error-heading       { margin: 12px 0 8px; }
.hfs-error-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---- Channel badges (Online / In-Store) ---- */
.co-badge-web { background: #2563eb; color: #fff; }
.co-badge-pos { background: #c2620a; color: #fff; }

/* ---- Content Pages (Freemarker-rendered) ---- */
.hfs-content-page {
	line-height: 1.7;
	color: #333;
}
.hfs-content-page h1,
.hfs-content-page h2,
.hfs-content-page h3,
.hfs-content-page h4 {
	color: var(--hfs-brand-dark, #2a1a0a);
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
.hfs-content-page h1:first-child,
.hfs-content-page h2:first-child,
.hfs-content-page h3:first-child {
	margin-top: 0;
}
.hfs-content-page p {
	margin-bottom: 1em;
}
.hfs-content-page img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.hfs-content-page a {
	color: var(--hfs-brand-accent, #c2620a);
}
.hfs-content-page a:hover {
	color: var(--hfs-brand-dark, #2a1a0a);
}
.hfs-content-page table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}
.hfs-content-page th,
.hfs-content-page td {
	padding: 8px 12px;
	border: 1px solid #ddd;
	text-align: left;
}
.hfs-content-page th {
	background: #f8f5f0;
	font-weight: 600;
}
.hfs-content-page ul,
.hfs-content-page ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}
.hfs-content-page blockquote {
	border-left: 4px solid var(--hfs-brand-accent, #c2620a);
	padding: 12px 20px;
	margin: 1em 0;
	background: #f8f5f0;
	border-radius: 0 6px 6px 0;
}
.hfs-content-page hr {
	border: none;
	border-top: 1px solid #ddd;
	margin: 2em 0;
}

/* ---- Coming Soon page ---- */
.hfs-coming-soon {
	text-align: center;
	padding: 3rem 1rem;
}
.hfs-coming-soon h1 {
	margin-bottom: 0.5rem;
}
.hfs-coming-soon-tagline {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--hfs-tan-dark);
	margin-bottom: 1.5rem;
	letter-spacing: 0.05em;
}

/* ---- Our Store page ---- */
.hfs-our-store .hfs-store-contact p {
	margin-bottom: 0.4rem;
}
.hfs-our-store .hfs-store-contact i {
	color: var(--hfs-brown-light);
	width: 20px;
	text-align: center;
	margin-right: 4px;
}

/* Hours card — warm styled card with alternating rows */
.hfs-hours-card {
	max-width: 400px;
	background: var(--hfs-cream);
	border-radius: 10px;
	padding: 4px 0;
	border: 1px solid var(--hfs-border);
}
.hfs-hours-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 20px;
	font-size: 0.92rem;
}
.hfs-hours-row:nth-child(odd) {
	background: var(--hfs-cream-dark);
}
.hfs-hours-row span:first-child {
	font-weight: 600;
	color: var(--hfs-brown-dark);
}
.hfs-hours-row span:last-child {
	color: var(--hfs-text-light);
}
.hfs-hours-closed span:last-child {
	color: var(--hfs-rust);
	font-weight: 500;
}

/* ============================================
   SEARCH RESULTS PAGE
   Compact list rows for products and articles.
   Layout mirrors products-layout with filter sidebar.
   ============================================ */
.hfs-search-page {
	padding-bottom: 3rem;
}
.srch-layout {
	display: flex;
	gap: 0;
	min-height: 60vh;
}
.srch-main {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.5rem;
}
.srch-header {
	margin-bottom: 0.5rem;
}
.srch-title {
	font-family: var(--hfs-heading-font, Georgia, serif);
	font-size: 1.5rem;
	color: var(--hfs-brown-dark);
	margin-bottom: 0.25rem;
}
.srch-summary {
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}

/* Sections */
.srch-section {
	margin-bottom: 2.5rem;
}
.srch-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--hfs-tan, #C9A94E);
}
.srch-section-title {
	font-family: var(--hfs-heading-font, Georgia, serif);
	font-size: 1.15rem;
	color: var(--hfs-brown-dark);
	margin: 0;
}
.srch-section-title i {
	color: var(--hfs-tan-dark, #8B7A68);
	margin-right: 4px;
}
.srch-section-count {
	font-size: 0.78rem;
	color: var(--hfs-brown-light, #8B7A68);
}

/* Compact result rows */
.srch-list {
	display: flex;
	flex-direction: column;
}
.srch-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-bottom: 1px solid #e8e0d4;
	text-decoration: none;
	color: var(--hfs-brown-dark, #3E2723);
	transition: background 0.12s;
}
.srch-row:hover {
	background: var(--hfs-cream, #FAF3E0);
	color: var(--hfs-brown-dark, #3E2723);
	text-decoration: none;
}
.srch-row-img {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f0e8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.srch-row-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srch-row-icon {
	font-size: 1.4rem;
	color: var(--hfs-tan-dark, #8B7A68);
	opacity: 0.5;
}
.srch-row-body {
	flex: 1;
	min-width: 0;
}
.srch-row-name {
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.3;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.srch-row-excerpt {
	font-size: 0.78rem;
	color: var(--hfs-brown-light, #8B7A68);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}
.srch-row-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	color: var(--hfs-brown-light, #8B7A68);
	flex-wrap: wrap;
}
.srch-row-meta span:not(:last-child)::after {
	content: '\00b7';
	margin-left: 6px;
	color: #c4b8a8;
}
.srch-row-sku {
	font-family: monospace;
	font-size: 0.7rem;
}
.srch-row-price {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--hfs-green-dark, #2E5E3F);
	white-space: nowrap;
}
.srch-row-stock {
	font-size: 0.68rem;
	font-weight: 600;
}
.srch-row-stock.out-of-stock { color: var(--hfs-rust, #c0392b); }
.srch-row-stock.low-stock { color: var(--hfs-gold, #c89a30); }

/* Pagination */
.srch-pagination {
	margin-top: 1rem;
}
.srch-pag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid #e8e0d4;
}
.srch-pag-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}
.srch-pag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--hfs-tan, #C9A94E);
	border-radius: 4px;
	background: var(--hfs-cream, #FAF3E0);
	color: var(--hfs-brown-dark, #3E2723);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.srch-pag-btn:hover:not([disabled]):not(.active) {
	background: var(--hfs-tan, #C9A94E);
	color: #fff;
}
.srch-pag-btn.active {
	background: var(--hfs-brown-dark, #3E2723);
	border-color: var(--hfs-brown-dark, #3E2723);
	color: #fff;
}
.srch-pag-btn[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}
.srch-pag-ellipsis {
	padding: 0 6px;
	color: var(--hfs-brown-light, #8B7A68);
	font-size: 0.85rem;
}
.srch-pag-info {
	font-size: 0.78rem;
	color: var(--hfs-brown-light, #8B7A68);
	white-space: nowrap;
}
.srch-pag-range {
	color: var(--hfs-brown-light, #8B7A68);
	opacity: 0.7;
}
.srch-pag-size {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--hfs-brown-light, #8B7A68);
}
.srch-pag-select {
	padding: 2px 6px;
	border: 1px solid var(--hfs-tan, #C9A94E);
	border-radius: 4px;
	background: var(--hfs-cream, #FAF3E0);
	color: var(--hfs-brown-dark, #3E2723);
	font-size: 0.78rem;
	cursor: pointer;
}

/* Category filter indentation */
.srch-cat-root { font-weight: 600; }
.srch-cat-l2 { padding-left: 24px !important; }
.srch-cat-l3 { padding-left: 40px !important; font-size: 0.82rem; }

/* No results */
.srch-no-results {
	text-align: center;
	padding: 3rem 1rem;
}
.srch-no-results i {
	font-size: 3rem;
	color: var(--hfs-tan, #C9A94E);
	opacity: 0.4;
	display: block;
	margin-bottom: 1rem;
}
.srch-no-results h3 {
	font-family: var(--hfs-heading-font, Georgia, serif);
	color: var(--hfs-brown-dark);
	margin-bottom: 0.5rem;
}

/* Filter count badge in sidebar */
.filter-count {
	font-size: 0.72rem;
	color: var(--hfs-brown-light, #8B7A68);
	margin-left: 4px;
}

/* Search page uses same filter-sidebar as products page */
.hfs-search-page .filter-sidebar {
	width: 260px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border, #ddd);
	padding: 0;
	background: var(--hfs-cream, #FAF3E0);
}
.hfs-search-page .filter-sidebar-body {
	padding: 1rem;
}

/* Mobile responsive */
@media (max-width: 991.98px) {
	.srch-layout {
		flex-direction: column;
	}
	.hfs-search-page .filter-sidebar {
		position: fixed;
		top: 0;
		left: -300px;
		width: 280px;
		height: 100%;
		z-index: 1050;
		transition: left 0.3s ease;
		overflow-y: auto;
	}
	.hfs-search-page .filter-sidebar.open {
		left: 0;
	}
	.srch-main {
		padding: 0.8rem;
	}
	.srch-row-img {
		width: 44px;
		height: 44px;
	}
	.srch-row-name {
		font-size: 0.82rem;
	}
	.srch-row-price {
		font-size: 0.85rem;
	}
}

/* ============================================================
   Product Variation Selector
   ============================================================ */

.product-variation-selector {
	margin-top: 4px;
}
.product-variation-selector .form-label {
	font-size: 0.85rem;
	margin-bottom: 6px;
}

.variation-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.variation-btn {
	padding: 6px 14px;
	border: 2px solid var(--hfs-brown-light, #8B7A68);
	border-radius: 4px;
	background: transparent;
	color: var(--hfs-text, #333);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
}
.variation-btn:hover {
	border-color: var(--hfs-brand-accent, #C9A94E);
	background: rgba(201, 169, 78, 0.08);
}
.variation-btn.active {
	border-color: var(--hfs-brand-accent, #C9A94E);
	background: var(--hfs-brand-accent, #C9A94E);
	color: #1a1a1a;
}

/* Cart variation label */
.cart-item-variant {
	font-size: 0.78rem;
	line-height: 1.2;
}

/* ============================================================
   Article Comments — Chat-style bubbles
   ============================================================ */

.hfs-article-comments {
	border-top: 1px solid var(--hfs-border, #ddd);
	padding-top: 1.5rem;
}
.hfs-article-comments-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.hfs-article-comments-count {
	font-weight: 400;
	font-size: 0.9rem;
	color: #888;
}
.hfs-article-comments-empty {
	font-style: italic;
}

/* Chat bubbles */
#articleCommentThread {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hfs-comment-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 0.9rem;
	line-height: 1.5;
}
.hfs-comment-bubble--customer {
	align-self: flex-start;
	background: #f5f0eb;
	border: 1px solid #e0d6cc;
	border-bottom-left-radius: 4px;
}
.hfs-comment-bubble--staff {
	align-self: flex-end;
	background: var(--hfs-brown-deep, #3a2b26);
	color: #FDF5E6;
	border-bottom-right-radius: 4px;
}
.hfs-comment-bubble-author {
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 3px;
}
.hfs-comment-bubble--customer .hfs-comment-bubble-author {
	color: #4e3733;
}
.hfs-comment-bubble--staff .hfs-comment-bubble-author {
	color: #d4b87a;
}
.hfs-comment-bubble--staff .hfs-comment-bubble-author i {
	color: #d4b87a;
}
.hfs-comment-bubble-text {
	word-wrap: break-word;
}
.hfs-comment-bubble-text p {
	margin: 0 0 0.4em;
}
.hfs-comment-bubble-text p:last-child {
	margin-bottom: 0;
}
.hfs-comment-bubble-meta {
	font-size: 0.7rem;
	margin-top: 4px;
	opacity: 0.6;
}
.hfs-comment-bubble--staff .hfs-comment-bubble-meta {
	text-align: right;
}

/* Comment login prompt */
.hfs-comment-login-prompt {
	padding: 12px 0;
	font-size: 0.9rem;
	color: #666;
}
.hfs-comment-login-prompt a {
	color: var(--hfs-brand-accent, #C9A94E);
	font-weight: 600;
}

/* Comment submit form */
.hfs-comment-submit {
	border-top: 1px solid var(--hfs-border, #ddd);
	padding-top: 1rem;
}
.hfs-comment-submit-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

/* Article card comment count */
.hfs-article-card-comments {
	color: var(--hfs-brand-accent, #C9A94E);
	font-weight: 600;
}
.hfs-article-card-comments i {
	font-size: 0.85em;
	margin-right: 2px;
}