/*
 * shop.css — Shop page layout, filter pills, and overrides.
 *
 * Page hero styles now use global .page-hero from pages.css (single source).
 * Product card base styles live in components.css (shared with home page).
 * Filter bar search styles (lc-search-wrapper, lc-no-results, load-more-btn,
 *   filterIn keyframe) come from learning-center.css.
 *
 * This file adds:
 *   1. Category filter pill grid
 *   2. Product grid layout
 *   3. object-fit:contain override (full image visible, no cropping)
 *   4. Shop CTA button
 *   5. Foliage z-index overrides
 */

/* ============================================================
   2. FILTER BAR OVERRIDES (uses shared .lc-filters from learning-center.css)
   Shop filter bar is now a dropdown + search, same as LC/Testimonies.
   ============================================================ */

/* 3-column filter: category (left) | search (center) | sort (right) */
.shop-page .filter-row {
	justify-content: space-between;
}

.shop-page .lc-search-wrapper {
	flex: 1;
	max-width: 320px;
}

/* ============================================================
   3. MAIN CONTENT + STATUS
   ============================================================ */

.shop-main {
	background: var(--color-cream);
	padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.shop-main > .container {
	max-width: 1400px;
}

.shop-showing {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-md) 0;
	text-align: center;
}

.shop-showing span {
	font-weight: 600;
	color: var(--color-sage);
}

/* ============================================================
   4. PRODUCTS GRID
   ============================================================ */

.shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	align-items: start;
}

/* ============================================================
   5. PRODUCT IMAGE — show FULL image, no cropping
      Overrides object-fit:cover from components.css
   ============================================================ */

.shop-page .product-card__image {
	padding: 1.25rem;
	background: var(--color-cream-dark);
}

.shop-page .product-card__image img {
	object-fit: contain;
}

/* No-image placeholder */
.product-card__no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ============================================================
   6. SHOP "VIEW PRODUCT" BUTTON
   ============================================================ */

.shop-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: var(--space-sm);
	padding: 0.4375rem 1.125rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-white);
	background-color: var(--color-sage);
	border: 1.5px solid var(--color-sage);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition:
		background-color var(--transition-base),
		border-color     var(--transition-base),
		box-shadow       var(--transition-base),
		transform        var(--transition-base);
	outline: none;
}

.shop-btn:hover,
.shop-btn:focus-visible {
	background-color: var(--color-sage-dark);
	border-color:     var(--color-sage-dark);
	box-shadow: 0 4px 14px rgba(92, 122, 89, 0.25);
	transform: translateY(-1px);
	color: var(--color-white);
}

.shop-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.shop-page .lc-search-wrapper { max-width: none; }
}

@media (max-width: 1200px) {
	.shop-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.shop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}

@media (max-width: 480px) {
	.shop-grid       { grid-template-columns: 1fr; gap: 1.25rem; }
	.shop-main       { padding: var(--space-md) var(--space-sm) var(--space-lg); }
}

/* ============================================================
   8. FOLIAGE Z-INDEX OVERRIDES
   Allow foliage to show alongside all content, including
   content revealed by Load More.
   ============================================================ */

/* Let foliage layer show through by keeping main at z-index auto */
.siahus-shop .site-main {
	z-index: auto;
}

.siahus-shop .site-main > * {
	position: relative;
	z-index: auto;
}

/* Page hero + main grid area: no stacking context, foliage shows through */
.siahus-shop .page-hero,
.siahus-shop .shop-main {
	position: relative;
	z-index: auto;
	/* Ensure background doesn't paint over foliage — background stays
	   but stacking context remains auto so foliage (z-index:1) shows */
}

/* Filter section needs higher z-index for sticky behavior */
.siahus-shop .lc-filters {
	position: sticky;
	z-index: 500;
}

/* Cards and interactive elements above foliage */
.siahus-shop .product-card {
	position: relative;
	z-index: 101;
}

.siahus-shop .load-more-wrapper {
	position: relative;
	z-index: 101;
}

.siahus-shop .lc-no-results {
	position: relative;
	z-index: 101;
}

.siahus-shop .shop-showing {
	position: relative;
	z-index: 101;
}