/* ==================================================================
   Isolation: every rule below is scoped under .waf-block and most are
   two classes deep, so they consistently outrank the single-class /
   bare-element rules themes and Elementor's own defaults use. The
   stylesheet is also enqueued after the theme's and Elementor's own
   styles (see class-waf-frontend.php), so equal-specificity rules
   still resolve in our favor by source order.
   ================================================================== */

.waf-block {
	--waf-columns: 4;
	--waf-card-bg: #f5f5f5;
	--waf-ink: #111111;
	--waf-muted: #6b6b6b;
	--waf-border: #e3e3e3;
	--waf-radius: 2px;
	display: block;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--waf-ink);
	text-align: left;
	background: transparent;
}
.waf-block, .waf-block *, .waf-block *::before, .waf-block *::after { box-sizing: border-box; }

/* Neutral reset for elements themes/Elementor commonly restyle globally. !important here is
   deliberate: a theme's own form/button reset frequently carries !important too (Elementor's
   global "a" styles, WooCommerce-theme button resets, etc.), and only a matching !important can
   guarantee we win regardless of source order or how deeply nested our markup sits in the page. */
.waf-block button,
.waf-block input,
.waf-block select {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font: inherit !important;
	line-height: normal !important;
	color: inherit !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none !important;
}
/* Native rendering is kept for checkbox/radio (they carry the filter's checked state visually) —
   only text-like inputs and range sliders get their appearance reset, each explicitly below. */
.waf-block input[type="range"] { -webkit-appearance: none; appearance: none; }
.waf-block ul, .waf-block li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.waf-block button { cursor: pointer !important; }
.waf-block img { max-width: 100% !important; height: auto !important; display: block !important; }
.waf-block h1, .waf-block h2, .waf-block h3, .waf-block h4, .waf-block p { margin: 0 !important; padding: 0 !important; font: inherit !important; }
.waf-block a:focus-visible,
.waf-block button:focus-visible,
.waf-block input:focus-visible { outline: 2px solid var(--waf-ink); outline-offset: 1px; }

.waf-block.is-loading .waf-results { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

body.waf-no-scroll { overflow: hidden; }

/* ---------------------------------------------------------------- Filter bar */
.waf-block .waf-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--waf-border);
}
.waf-block .waf-filter-bar__left,
.waf-block .waf-filter-bar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.waf-block .waf-filter-bar__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--waf-ink);
	white-space: nowrap;
}

.waf-block .waf-mobile-filter-btn {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--waf-ink);
	cursor: pointer;
}
.waf-block .waf-mobile-panel-header,
.waf-block .waf-filter-backdrop { display: none; }

.waf-block .waf-dd { position: relative; }
.waf-block .waf-dd__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.waf-block .waf-dd__chevron { transition: transform .15s ease; flex: none; }
.waf-block .waf-dd.is-open .waf-dd__chevron { transform: rotate(180deg); }

.waf-block .waf-dd__panel {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 40;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--waf-border);
	border-radius: var(--waf-radius);
	box-shadow: 0 12px 28px rgba(0,0,0,.08);
	padding: 10px;
}
.waf-block .waf-dd--sort .waf-dd__panel { left: auto; right: 0; }
.waf-block .waf-dd.is-open .waf-dd__panel { display: block; }
/* .waf-dd__panel--swatches needs display:grid instead of the default block, but only once open —
   this used to be unconditional and was the "colors always visible" bug. */
.waf-block .waf-dd.is-open .waf-dd__panel--swatches { display: grid; }
.waf-block .waf-dd__panel--swatches { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }

.waf-block .waf-dd__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	font-size: 13px;
	border-radius: var(--waf-radius);
	cursor: pointer;
	white-space: nowrap;
}
.waf-block .waf-dd__option:hover { background: #f5f5f5; }
.waf-block .waf-dd__option em { font-style: normal; color: var(--waf-muted); font-size: 12px; margin-left: 2px; }
.waf-block .waf-dd__option input { accent-color: var(--waf-ink); width: auto; }

.waf-block .waf-dd__swatch-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	font-size: 13px;
	border-radius: var(--waf-radius);
	cursor: pointer;
}
.waf-block .waf-dd__swatch-option:hover { background: #f5f5f5; }
.waf-block .waf-dd__swatch-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.waf-block .waf-dd__swatch-option input:checked + .waf-swatch { outline: 2px solid var(--waf-ink); outline-offset: 2px; }

/* Filter dropdown's own color indicator — used only inside the Color filter panel, never on a
   product card. Deliberately not shared with .waf-variation-dot below so the two can never
   affect each other, by name or by rule. */
.waf-block .waf-swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: none;
	display: inline-block;
	border: 1px solid rgba(0,0,0,.12);
}

/* Price slider */
.waf-block .waf-price { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.waf-block .waf-price__value { font-size: 13px; color: var(--waf-ink); white-space: nowrap; }
.waf-block .waf-price__slider { position: relative; width: 140px; height: 20px; }
.waf-block .waf-price__track,
.waf-block .waf-price__range {
	position: absolute;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	border-radius: 2px;
}
.waf-block .waf-price__track { left: 0; right: 0; background: var(--waf-border); }
.waf-block .waf-price__range { background: var(--waf-ink); }
.waf-block .waf-price__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}
.waf-block .waf-price__input::-webkit-slider-runnable-track { -webkit-appearance: none; background: none; }
.waf-block .waf-price__input::-webkit-slider-thumb {
	pointer-events: all;
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--waf-ink);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--waf-ink);
	cursor: pointer;
	margin-top: 3px;
}
.waf-block .waf-price__input::-moz-range-track { background: none; border: none; }
.waf-block .waf-price__input::-moz-range-thumb {
	pointer-events: all;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--waf-ink);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--waf-ink);
	cursor: pointer;
}

.waf-block .waf-count { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--waf-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- Grid */
.waf-block .waf-grid {
	/* Many themes ship a !important WooCommerce loop reset (e.g. "ul.products{display:flex!important}")
	   that would otherwise silently break this grid — matched with !important here too. */
	display: grid !important;
	grid-template-columns: repeat(var(--waf-columns), 1fr) !important;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.waf-block .waf-grid__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--waf-muted);
}

.waf-block .waf-card {
	position: relative;
	background: var(--waf-card-bg);
	padding: 24px 24px 28px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center
	width: auto !important;
	float: none !important;
	margin: 0;
	list-style: none;
}
.waf-block .waf-card__wishlist {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--waf-ink);
	z-index: 2;
}
.waf-block .waf-card__wishlist svg path { transition: fill .15s ease; }
.waf-block .waf-card__wishlist.is-active svg path { fill: var(--waf-ink); }

.waf-block .waf-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: 16px;
	-webkit-user-select: none;
	user-select: none;
}
.waf-block .waf-card__image img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.waf-block .waf-card__image--draggable { cursor: grab; touch-action: pan-y; }
.waf-block .waf-card__image--draggable:active { cursor: grabbing; }

.waf-block .waf-card__swatches { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-bottom: 14px; }

/* Card variation dot — a fully independent class from the filter bar's .waf-swatch, with its
   own complete rule set (nothing borrowed), so filter-bar styling can never reach the card. */
.waf-block .waf-variation-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: none;
	display: inline-block;
	border: 1px solid rgba(0,0,0,.12);
	cursor: pointer;
	transition: transform .1s ease;
}
.waf-block .waf-variation-dot:hover { transform: scale(1.15); }
.waf-block .waf-variation-dot.is-active { outline: 2px solid var(--waf-ink); outline-offset: 2px; }

.waf-block .waf-card__price {
	display: block;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}
.waf-block .waf-card__price ins { text-decoration: none; }
.waf-block .waf-card__price del { color: var(--waf-muted); font-weight: 400; margin-right: 6px; }

.waf-block .waf-card__title {
	display: block;
	width: 100%;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--waf-ink);
	margin-bottom: 18px;
	font-weight:500;
}
.waf-block .waf-card__title:hover { text-decoration: underline; }

.waf-block .waf-card__cart { width: 100%; margin-top: auto; display: flex; align-items: center; gap: 10px; }
.waf-block .waf-card__add-to-cart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
	background: var(--waf-ink);
	color: #fff;
	border-radius: 999px;
	padding: 13px 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.waf-block .waf-card__add-to-cart-label { flex: 1 1 auto; }
.waf-block .waf-card__add-to-cart:hover { opacity: .85; color: #fff; }
.waf-block .waf-card__add-to-cart::after {
	content: '\2192';
	font-size: 14px;
	margin-left: 10px;
	flex: none;
}
/* A custom Add to Cart icon (rendered server-side as a real element) replaces the default arrow. */
.waf-block .waf-card__add-to-cart.has-custom-icon::after { content: none; }
.waf-block .waf-card__add-to-cart-icon { margin-left: 10px; font-size: 14px; line-height: 1; flex: none; display: inline-flex; align-items: center; }
.waf-block .waf-card__add-to-cart-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Wishlist-page-only remove ("×") button, sits beside Add to Cart in .waf-card__cart. */
.waf-block .waf-card__remove {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--waf-border);
	background: #fff;
	color: var(--waf-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.waf-block .waf-card__remove:hover { background: var(--waf-ink); color: #fff; border-color: var(--waf-ink); }

/* Wishlist-page title, shown in place of the (hidden) filter dropdowns. */
.waf-block .waf-wishlist-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Wishlist header widget
   Deliberately NOT scoped under .waf-block — this renders standalone (e.g. in a header/
   Elementor template), wherever [wc_wishlist_widget] is placed. */
.waf-wishlist-widget {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	padding: 4px; /* clickable-area spacing; the Elementor widget's "Spacing" control overrides this */
}
.waf-wishlist-widget svg { width: 20px; height: 20px; }
.waf-wishlist-widget__count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 600;
}
.waf-wishlist-widget.is-empty .waf-wishlist-widget__count { display: none; }

/* ---------------------------------------------------------------- Pagination */
.waf-block .waf-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}
.waf-block .waf-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 4px;
	border-radius: 50%;
	font-size: 13px;
	color: var(--waf-ink);
	cursor: pointer;
}
.waf-block .waf-pagination__link:hover { background: #f0f0f0; }
.waf-block .waf-pagination__link.is-active { background: var(--waf-ink); color: #fff; }
.waf-block .waf-pagination__link.waf-pagination__arrow { background: #f0f0f0; border-radius: 999px; width: 40px; }
.waf-block .waf-pagination__link.waf-pagination__arrow:hover { background: #e6e6e6; }
.waf-block .waf-pagination__link.waf-pagination__arrow.is-active { background: var(--waf-ink); }
.waf-block .waf-pagination__dots { padding: 0 4px; color: var(--waf-muted); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
	.waf-block .waf-grid { grid-template-columns: repeat(min(3, var(--waf-columns)), 1fr); }
}

/* The off-canvas mobile layout (filter drawer, backdrop, hide/show at a configurable
   breakpoint) is generated per-instance by WAF_Renderer::instance_style() instead of a
   fixed @media rule here — the Elementor widget's "Mobile Breakpoint" / "Filter
   Visibility" controls need an actual px value in the @media condition, which a shared
   stylesheet's CSS variables can't provide. See class-waf-renderer.php. */

@media (max-width: 480px) {
	.waf-block .waf-grid { grid-template-columns: 1fr; }
}