/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0.0
*/

/* ==========================================================================
   Fragrance Notes — inline, clickable notes display
   ========================================================================== */

.shc-fragrance-notes {
	margin: 18px 0;
	padding-top: 14px;
	border-top: 1px solid #E5E5E5;
}

.shc-notes-line {
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
	margin: 4px 0;
}

.shc-notes-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #0C0C0C;
	margin-right: 6px;
}

.shc-notes-line a {
	color: #C1753C;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.shc-notes-line a:hover,
.shc-notes-line a:focus {
	color: #96552A;
	border-bottom-color: #C1753C;
}

/* ==========================================================================
   Product Archive Filters — Shopify-style sidebar filter
   ========================================================================== */

.shc-filter-wrap {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin: 20px 0 60px;
	position: relative;
}

.shc-filter-sidebar {
	flex: 0 0 240px;
	font-family: 'Jost', sans-serif;
}

/* Overlay behind the off-canvas drawer — only used/shown at tablet & mobile. */
.shc-filter-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 1000;
}

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

/* "Filters" toggle button and the close (×) button inside the drawer —
   both hidden on desktop, shown only at tablet/mobile widths below.
   Specificity note: both are real <button type="button"> elements, and
   Hello Elementor's own base stylesheet includes a same-specificity
   reset rule — [type="button"], [type="submit"], button { display:
   inline-block; } — that loads AFTER this stylesheet, so on a tied
   specificity it wins by source order and silently un-hides these
   buttons. Scoping the selector under .shc-filter-wrap plus !important
   guarantees this rule wins regardless of what else is loaded. */
.shc-filter-wrap .shc-filter-toggle,
.shc-filter-wrap .shc-filter-drawer-close {
	display: none !important;
}

.shc-filter-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.shc-filter-group {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #E5E5E5;
}

.shc-filter-heading {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #0C0C0C;
	margin: 0 0 12px;
}

.shc-filter-options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
}

.shc-filter-options li {
	margin: 6px 0;
}

.shc-filter-options label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #333333;
	cursor: pointer;
}

.shc-filter-checkbox {
	accent-color: #C1753C;
	width: 15px;
	height: 15px;
	cursor: pointer;
}

.shc-count {
	color: #999999;
	font-size: 12px;
}

.shc-price-values {
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
}

.shc-price-slider {
	position: relative;
	height: 32px;
}

.shc-range {
	position: absolute;
	width: 100%;
	top: 10px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	margin: 0;
}

.shc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #C1753C;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #C1753C;
}

.shc-range::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #C1753C;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #C1753C;
}

.shc-range::-webkit-slider-runnable-track {
	height: 3px;
	background: #E5E5E5;
}

.shc-range::-moz-range-track {
	height: 3px;
	background: #E5E5E5;
}

.shc-clear-btn {
	background: none;
	border: 1px solid #0C0C0C;
	color: #0C0C0C;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.shc-clear-btn:hover {
	background: #0C0C0C;
	color: #fff;
}

.shc-filter-results {
	flex: 1 1 auto;
	min-width: 0;
}

.shc-filter-count {
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	color: #666666;
}

.shc-product-grid {
	position: relative;
	min-height: 200px;
	transition: opacity 0.2s ease;
}

/* Self-contained responsive grid — deliberately NOT relying on WooCommerce's
   default float-based ".columns-4" math (22.05% width / float:left), since
   that doesn't collapse responsively on its own. This grid controls its own
   column count at every breakpoint below, independent of any Elementor
   widget's own (unrelated) responsive CSS. Product CARD styling itself
   (image, title, price, Add to Cart button) is untouched here — those come
   from the shared WooCommerce/theme classes and already match site-wide. */
.shc-product-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 32px 24px !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shc-product-grid ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.shc-product-grid.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.shc-no-products {
	font-family: 'Jost', sans-serif;
	color: #666666;
	padding: 40px 0;
}

.shc-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 30px 0;
}

.shc-page-btn {
	background: none;
	border: 1px solid #E5E5E5;
	color: #333333;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.shc-page-btn:hover,
.shc-page-btn.is-active {
	border-color: #C1753C;
	color: #C1753C;
}

/* ==========================================================================
   Tablet & mobile — off-canvas filter drawer
   ========================================================================== */

@media ( max-width: 1024px ) {

	.shc-filter-wrap .shc-filter-toggle {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		background: none;
		border: 1px solid #0C0C0C;
		color: #0C0C0C;
		font-family: 'Jost', sans-serif;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		padding: 10px 18px;
		cursor: pointer;
	}

	.shc-filter-toggle::before {
		content: '\2630'; /* simple "hamburger/lines" glyph, no icon font needed */
		font-size: 14px;
	}

	.shc-filter-wrap .shc-filter-drawer-close {
		display: block !important;
		margin: 0 0 20px auto;
		background: none;
		border: none;
		font-size: 28px;
		line-height: 1;
		color: #0C0C0C;
		cursor: pointer;
	}

	.shc-filter-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 85vw;
		background: #FFFFFF;
		z-index: 1001;
		padding: 28px 24px;
		overflow-y: auto;
		transform: translateX( -100% );
		transition: transform 0.3s ease;
		box-shadow: 2px 0 16px rgba( 0, 0, 0, 0.15 );
	}

	.shc-filter-sidebar.is-open {
		transform: translateX( 0 );
	}

	.shc-filter-results {
		width: 100%;
	}

	.shc-product-grid ul.products {
		grid-template-columns: repeat( 3, 1fr );
		gap: 28px 18px !important;
	}
}

@media ( max-width: 600px ) {

	.shc-filter-sidebar {
		width: 280px;
	}

	.shc-product-grid ul.products {
		grid-template-columns: repeat( 2, 1fr );
		gap: 20px 14px !important;
	}

	.shc-filter-toolbar {
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* Lock background scroll while the drawer is open (class toggled by JS). */
body.shc-drawer-open {
	overflow: hidden;
}