/* ==========================================================================
   Flowhub Archive Widget — "Neon dispensary" (moss green), matching the
   card/slider/modal/PDP/age-gate design already built for this site.

   Every selector here is scoped under .flowhub-archive — a class added in
   PHP (widgets/class-archive.php::render_flowhub_archive() and
   render_mobile_filters_modal()) ONLY when this specific widget instance's
   "Data Source" setting is "Flowhub Products". The archive widget's chrome
   classes (.product-archive-title, .custom-dropdown-toggle, .accordion-
   button, .offers-toggle-*, .filters-search-box, …) are shared verbatim
   with the Dispense/iHeartJane render path AND with any other archive
   widget instance on this same Flowhub site still using a WP_Query/real-
   taxonomy data source (this site has migrated product-category/brand
   terms — see the puf-plug-archive skill) — so bare unscoped rules here
   would leak onto those. The .flowhub-archive wrapper is the only thing
   that's actually unique to "this instance, in Flowhub mode", which is why
   file-level conditional enqueue (like flowhub-product-card.css) alone
   isn't enough here the way it is for the card.

   Every rule is a plain, non-!important default — if a future site admin
   configures this widget's own Elementor Style tab (which already has
   extensive controls for all of this chrome, many using !important), that
   per-instance CSS correctly wins over this fallback.
   ========================================================================== */

.flowhub-archive {
	font-family: 'Space Grotesk', sans-serif;
}

/* ── Header: back link + title ────────────────────────────────────────── */

.flowhub-archive .product-archive-back-link {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #7f8a72;
	text-decoration: none;
}

.flowhub-archive .product-archive-back-link:hover {
	color: #b3cd98;
}

.flowhub-archive .product-archive-title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	color: #f4f7ee;
}

/* ── "Offers Only" toggle ──────────────────────────────────────────────────
   render_archive_styles() (widgets/class-archive.php) prints an inline
   <style> block meant to be Elementor's {{WRAPPER}}-scoped per-instance
   CSS, but it's a plain PHP echo, not run through Elementor's CSS
   pipeline — {{WRAPPER}} never gets substituted, and thanks to how
   browsers recover from that malformed selector, ".offers-toggle-wrapper"
   etc. end up applying completely unscoped/global anyway (44×24 track,
   #ccc background, bright #4CAF50 when checked). That's a pre-existing
   bug outside this file's scope to fix at the source, so every property
   below is !important to guarantee it wins regardless — matching
   specificity against a moving/broken target isn't reliable here. */
.flowhub-archive .offers-toggle-wrapper {
	display: flex !important;
	align-items: center !important;
}

.flowhub-archive .offers-toggle-container {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer;
	margin: 0 !important;
}

.flowhub-archive .offers-toggle-label {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #aeb7a2 !important;
	white-space: nowrap;
}

.flowhub-archive .offers-toggle-icon {
	display: flex !important;
	align-items: center !important;
	color: #7f8a72 !important;
}

.flowhub-archive .offers-toggle-input {
	display: none !important;
}

.flowhub-archive .offers-toggle-switch {
	position: relative !important;
	display: inline-block !important;
	width: 38px !important;
	height: 22px !important;
	border-radius: 22px !important;
	background-color: #232a1c !important;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

.flowhub-archive .offers-toggle-slider {
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background-color: #aeb7a2 !important;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.flowhub-archive .offers-toggle-input:checked + .offers-toggle-switch {
	background-color: #597d36 !important;
}

.flowhub-archive .offers-toggle-input:checked + .offers-toggle-switch .offers-toggle-slider {
	transform: translateX(16px) !important;
	background-color: #eef4e2 !important;
}

/* ── Mobile "Filtros" trigger ──────────────────────────────────────────── */

.flowhub-archive .mobile-filters-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #232a1c;
	border-radius: 20px;
	padding: 8px 16px;
	background: #171c13;
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 600;
}

.flowhub-archive .mobile-filters-trigger:hover {
	border-color: #597d36;
}

/* ── Sort dropdown (.custom-dropdown / #sort-dropdown) ────────────────── */

.flowhub-archive .custom-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #232a1c;
	border-radius: 20px;
	padding: 8px 16px;
	background: #171c13;
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 600;
}

/* background-color/color explicitly repeated on :hover/:focus, not just
   border-color — this button is a real <button>, and the theme's
   reset.css ships "button:hover,button:focus{background-color:#c36;
   color:#fff}" (the same fuchsia conflict fixed elsewhere in this design
   system). Nothing else in the cascade sets background-color/color for
   this element's hover/focus state, so without repeating them here the
   theme's rule is the only declaration touching those two properties and
   wins regardless of specificity. */
.flowhub-archive .custom-dropdown-toggle:hover,
.flowhub-archive .custom-dropdown-toggle:focus {
	background-color: #171c13;
	color: #f4f7ee;
	border-color: #597d36;
}

.flowhub-archive .dropdown-chevron {
	color: #7f8a72;
	font-size: 11px;
}

.flowhub-archive .custom-dropdown-menu {
	background: #171c13;
	border: 1px solid #232a1c;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 6px;
}

.flowhub-archive .custom-dropdown-item {
	padding: 10px 16px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	color: #aeb7a2;
}

.flowhub-archive .custom-dropdown-item:hover {
	background: rgba(89, 125, 54, 0.14);
	color: #f4f7ee;
}

.flowhub-archive .custom-dropdown-item.active {
	background: rgba(89, 125, 54, 0.14);
	color: #b3cd98;
	font-weight: 700;
}

/* ── Active filter chips ───────────────────────────────────────────────── */

.flowhub-archive .filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #232a1c;
	border-radius: 20px;
	padding: 5px 6px 5px 12px;
	background: #171c13;
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	margin: 0 8px 8px 0;
}

.flowhub-archive .filter-chip .chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #232a1c;
	color: #aeb7a2;
	font-size: 10px;
}

.flowhub-archive .filter-chip .chip-remove:hover {
	background: #597d36;
	color: #eef4e2;
}

/* ── Sidebar: search box ───────────────────────────────────────────────── */

.flowhub-archive .filters-search-box .search-field {
	width: 100%;
	border: 1px solid #3a4630;
	border-radius: 20px;
	padding: 10px 16px;
	/* Lighter than the other dark controls (#171c13) on purpose — a search
	   input needs to read as "enterable" against the sidebar's near-black
	   background, and #7f8a72 placeholder text on #171c13 was too low
	   contrast to feel legible/inviting. */
	background: #232a1c;
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
}

.flowhub-archive .filters-search-box .search-field::placeholder {
	color: #7f8a72;
}

.flowhub-archive .filters-search-box .search-field:focus {
	outline: none;
	border-color: #597d36;
}

/* ── Sidebar: Category / Brand accordion ──────────────────────────────────
   Bootstrap 5's accordion is built almost entirely on --bs-accordion-*
   custom properties (confirmed in the bundled bootstrap.min.css) —
   overriding them here re-themes the component's own generated CSS
   (background, borders, the chevron icon's baked-in SVG fill color)
   without fighting each Bootstrap declaration property-by-property. */
.flowhub-archive #accordionFilters {
	--bs-accordion-bg: transparent;
	--bs-accordion-border-color: #232a1c;
	--bs-accordion-color: #f4f7ee;
	--bs-accordion-btn-color: #f4f7ee;
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-active-color: #b3cd98;
	--bs-accordion-active-bg: rgba(89, 125, 54, 0.14);
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23aeb7a2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23597d36'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* products.css (shared with Dispense — see this file's header comment)
   sets ".accordion-item{background-color:#fff;border:1px solid #e8e8e8;}"
   and ".accordion-body{background-color:#fafafa}" as PLAIN literal
   properties, not through the --bs-accordion-* vars overridden above —
   the var override alone can't touch these, they need a direct property
   override at higher specificity instead. Same story for
   ".accordion-body label{color:#333}" (unreadable on a dark background)
   and the checkbox, which was still rendering as the browser's native
   widget because the ".fh-filter-check" rule never set appearance:none. */
.flowhub-archive .accordion-item {
	background-color: #232a1c;
	border: 1px solid #232a1c;
	border-radius: 12px;
}

.flowhub-archive .accordion-item:hover {
	border-color: #3a4630;
	box-shadow: none;
}

.flowhub-archive .accordion-body {
	background-color: transparent;
}

.flowhub-archive .accordion-button {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 14px;
}

.flowhub-archive .accordion-button:focus {
	box-shadow: none;
}

.flowhub-archive .filter-count-badge {
	background: #597d36;
	color: #eef4e2;
}

.flowhub-archive .filter-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	color: #aeb7a2 !important;
	cursor: pointer;
}

.flowhub-archive .filter-item:hover {
	color: #f4f7ee !important;
	background-color: transparent !important;
	padding-left: 0 !important;
}

.flowhub-archive .fh-filter-check {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid #3a4630 !important;
	background-color: #171c13 !important;
	outline: none !important;
	box-shadow: none !important;
	position: relative;
	flex-shrink: 0;
	margin: 0;
}

/* !important throughout — the browser's native default focus ring for a
   checkbox (drawn even with appearance:none, since that only affects the
   widget's own fill/border, not the UA's separate focus-outline layer) is
   a blue "celeste" that doesn't come from any rule in this codebase, so
   there's nothing to out-specificity; only outline:none / a real
   competing box-shadow stops it. */
.flowhub-archive .fh-filter-check:hover {
	border-color: #597d36 !important;
}

.flowhub-archive .fh-filter-check:focus {
	border-color: #597d36 !important;
	box-shadow: 0 0 0 2px rgba(89, 125, 54, 0.35) !important;
}

.flowhub-archive .fh-filter-check:checked {
	background-color: #597d36 !important;
	border-color: #597d36 !important;
}

.flowhub-archive .fh-filter-check:checked::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #eef4e2;
	font-size: 11px;
	font-weight: bold;
}

/* ── Pagination ────────────────────────────────────────────────────────── */

.flowhub-archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 8px;
	color: #aeb7a2;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
}

.flowhub-archive .pagination .page-numbers.current {
	background: #597d36;
	color: #eef4e2;
}

.flowhub-archive .pagination .page-numbers:not(.current):hover {
	background: #171c13;
	color: #f4f7ee;
}

/* ── Mobile filters drawer ─────────────────────────────────────────────── */

.flowhub-archive.mobile-filters-sidebar {
	background: #12160f;
}

.flowhub-archive.mobile-filters-sidebar .mobile-filters-header {
	border-bottom: 1px solid #232a1c;
}

.flowhub-archive.mobile-filters-sidebar .mobile-filters-header h3 {
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
}

.flowhub-archive.mobile-filters-sidebar .mobile-filters-close {
	color: #aeb7a2;
}

.flowhub-archive.mobile-filters-sidebar .mobile-filters-close:hover {
	color: #f4f7ee;
}