/**
 * SHOP PAGE — Grid, toolbar, sidebar filters, offcanvas, product rows, list view
 * Sections 6, 7, 8 of main.css (lines 944–2010)
 */

/* ===========================================================================
   SHOP PAGE SHELL & INTRO
   =========================================================================== */

.shop-page-shell {
	background: linear-gradient(180deg, rgba(247, 243, 238, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ===========================================================================
   FLOATING FILTER BUTTON & MOBILE OVERRIDES
   =========================================================================== */

/* Floating Filter Button - Mobile Only (Thumb Zone) */
.shop-floating-filter {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: var(--z-navbar);
	display: none;
}

@media (max-width: 991px) {
	.shop-floating-filter {
		display: block;
	}

	.shop-floating-filter .btn {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--text-lg);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.shop-floating-filter .btn:active {
		transform: scale(0.95);
	}

	.shop-floating-filter .btn:hover {
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
	}

	/* Hide desktop sidebar on mobile */
	.shop-sidebar {
		display: none;
	}

	/* Optimize vertical flow on mobile */
	.shop-page-shell {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
}

/* ===========================================================================
   FILTERS SIDEBAR
   =========================================================================== */

.filters-sidebar {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 6.5rem;
}

.filters-sidebar.filters-sidebar-dark {
	background: var(--luxury-black);
	border-color: rgba(197, 163, 90, 0.2);
}

.filters-offcanvas.filters-sidebar-dark {
	background: var(--luxury-black);
}

.filters-offcanvas.filters-sidebar-dark .offcanvas-header {
	background: var(--luxury-black);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filters-offcanvas.filters-sidebar-dark .offcanvas-title,
.filters-sidebar-dark h5,
.filters-sidebar-dark h6,
.filters-sidebar-dark .filter-group-title,
.filters-sidebar-dark .filter-sidebar-heading-text {
	color: var(--luxury-white) !important;
}

.shop-sidebar-heading {
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-subtle);
}

.shop-active-filter {
	padding: 0.9rem 1rem;
	background: rgba(197, 163, 90, 0.08);
	border: 1px solid rgba(197, 163, 90, 0.18);
	border-radius: var(--radius-sm);
}

.shop-active-filter strong {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-display);
	font-size: var(--text-base);
	color: var(--color-ink);
}

.filter-group {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-subtle);
}

.filter-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.filter-group-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-semi);
	color: var(--color-ink);
	margin-bottom: 0.85rem;
}

.filters-sidebar .list-group-item,
#filtersOffcanvas .list-group-item {
	padding: 0.85rem 0;
	border-color: var(--color-border-subtle);
	color: var(--color-text-secondary);
	background: transparent;
}

.filters-sidebar .list-group-item .badge,
#filtersOffcanvas .list-group-item .badge {
	background: rgba(17, 24, 39, 0.08) !important;
	color: var(--color-ink) !important;
	font-weight: var(--weight-semi);
}

.filters-sidebar .list-group-item:hover,
#filtersOffcanvas .list-group-item:hover {
	color: var(--color-link);
	background: transparent;
}

.filters-sidebar .list-group-item.active,
#filtersOffcanvas .list-group-item.active {
	color: var(--color-link);
	background: transparent;
	font-weight: var(--weight-semi);
}

.filters-sidebar .list-group-item.active .badge,
#filtersOffcanvas .list-group-item.active .badge {
	background: rgba(197, 163, 90, 0.18) !important;
	color: var(--luxury-gold-dark) !important;
}

/* Dark mode overrides for filter options in sidebar */
.filters-sidebar .filter-option {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
}

.filters-sidebar .filter-option:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--luxury-white);
}

.filters-sidebar .filter-option.active {
	background: var(--luxury-gold-dark);
	border-color: var(--luxury-gold-dark);
	color: var(--luxury-white);
}

/* ===========================================================================
   SHOP TOOLBAR
   =========================================================================== */

.shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--space-md);
}

.shop-toolbar .form-select {
	min-width: 150px;
}

.shop-toolbar-primary,
.shop-toolbar-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.results-count {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
}

.results-count strong {
	font-family: var(--font-display);
	font-size: var(--text-md);
	color: var(--color-ink);
}

/* ===========================================================================
   FILTERS OFFCANVAS DRAWER
   =========================================================================== */

.filters-offcanvas {
	width: 360px;
	max-width: 90vw;
}

.filters-offcanvas .offcanvas-header {
	background: linear-gradient(135deg, var(--color-surface-section) 0%, var(--luxury-white) 100%);
	border-bottom: 1px solid var(--color-border-subtle);
	padding: 1.5rem;
}

.filters-offcanvas .offcanvas-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-ink);
	font-weight: var(--weight-semi);
}

.filters-offcanvas .offcanvas-body {
	padding: 1.5rem;
}

/* Filter Section */
.filter-section {
	border-bottom: 1px solid var(--color-border-subtle);
	padding-bottom: 1.5rem;
}

.filter-section:last-of-type {
	border-bottom: none;
}

.filter-section-title {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-semi);
	color: var(--color-ink);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	margin-bottom: 1rem;
}

/* Filter Options - Clean List */
.filter-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.filter-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--color-surface-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.2s ease;
}

.filter-option:hover {
	background: var(--luxury-gold-extra-light);
	border-color: rgba(197, 163, 90, 0.3);
	transform: translateX(2px);
}

.filter-option.active {
	background: var(--luxury-gold-dark);
	border-color: var(--luxury-gold-dark);
	color: var(--luxury-white);
}

.filter-option-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.filter-option-count {
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	padding: 0.25rem 0.5rem;
	background: rgba(0, 0, 0, 0.08);
	border-radius: var(--radius-md);
	min-width: 28px;
	text-align: center;
}

.filter-option.active .filter-option-count {
	background: rgba(255, 255, 255, 0.25);
	color: var(--luxury-white);
}

/* Price Range Slider */
.price-range-wrapper {
	padding: 0.5rem 0;
}

.price-range-slider {
	height: 6px;
	background: linear-gradient(to right, var(--color-border-subtle) 0%, var(--luxury-gold-light) 100%);
	border-radius: var(--radius-xs);
}

.price-range-slider::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	background: var(--luxury-gold);
	border: 3px solid var(--luxury-white);
	box-shadow: 0 2px 8px rgba(197, 163, 90, 0.3);
	cursor: pointer;
}

.price-range-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--luxury-gold);
	border: 3px solid var(--luxury-white);
	box-shadow: 0 2px 8px rgba(197, 163, 90, 0.3);
	cursor: pointer;
}

.price-range-slider::-webkit-slider-thumb:hover {
	background: var(--luxury-gold-dark);
	transform: scale(1.1);
}

.price-range-slider::-moz-range-thumb:hover {
	background: var(--luxury-gold-dark);
	transform: scale(1.1);
}

.price-range-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semi);
	color: var(--color-text-secondary);
}

/* Filter Actions */
.filter-actions {
	position: sticky;
	bottom: 0;
	background: var(--luxury-white);
	padding: 1rem 0 0;
	border-top: 1px solid var(--color-border-subtle);
	margin-top: auto;
}

/* ===========================================================================
   SHOP FILTER ACTIVE STATES
   =========================================================================== */

.filter-group.active {
	background: var(--luxury-gold-extra-light);
	border-color: var(--luxury-gold);
}

.filter-group.active .form-range::-webkit-slider-thumb {
	background: var(--luxury-gold);
}

.filter-group.active .form-range::-moz-range-thumb {
	background: var(--luxury-gold);
}

/* ===========================================================================
   SHOP HELP PANEL
   =========================================================================== */

.shop-help-section {
	padding-top: 4rem !important;
	padding-bottom: 4.5rem !important;
}

.shop-help-panel {
	padding: calc(var(--space-md) + 0.5rem) calc(var(--space-lg) - 0.25rem);
	background: var(--color-surface-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.shop-help-panel .text-muted {
	max-width: 42rem;
	line-height: var(--leading-loose);
}