/* ==========================================================================
   Hardware Catalog — Products page (EN 107 / KH 1849)
   The layout reuses the Events archive stylesheet (event-archive-style.css)
   so the page looks identical to /category/event/. This file only contains
   hardware-specific tweaks on top of that shared design
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page container
   Keep the catalog content centered at 1440px. The hero background breaks
   out to the viewport edges below.
   -------------------------------------------------------------------------- */
.sp-hw-catalog {
	max-width: 1440px;
	margin: 0 auto;
}

/* Keep the hardware catalog content section transparent. */
.sp-hw-catalog .sp-events__section {
	background: transparent !important;
}

/* Match the Insights & Updates banner with a full-viewport hardware hero. */
.sp-hw-catalog > .sp-hw-hero {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

/* Keep support information below the full-width catalog. */
.sp-hw-catalog-sidebar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	align-items: start;
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Product card images — square (1:1) media area
   The image keeps square bottom corners so it sits flush against the body;
   the outer card wrapper rounds all four corners like the event cards.
   (overrides the shared 16:10 events-card ratio on this products page)
   -------------------------------------------------------------------------- */
.sp-hw-catalog .sp-events__media {
	aspect-ratio: 1 / 1;
	/* !important: bottom-left & bottom-right must stay square at every
	   breakpoint; no other class / media query may round them. */
	border-radius: 16px 16px 0 0 !important;
	background: #f8fafc;
}

/* List view uses a product gallery photo where available; grid view keeps
   the featured promotional artwork. */
.sp-hw-catalog .sp-hw-list-image {
	display: none !important;
}
.sp-hw-catalog .sp-events__grid.is-list .sp-hw-grid-image {
	display: none !important;
}
.sp-hw-catalog .sp-events__grid.is-list .sp-hw-list-image {
	display: block !important;
	background: #ffffff;
}
.sp-hw-catalog .sp-events__grid.is-list .sp-hw-list-image.is-gallery-photo {
	object-fit: cover;
}
.sp-hw-catalog .sp-events__grid.is-list .sp-hw-list-image.is-promo-poster {
	/* Promo artworks include extra margins, so fill the landscape thumbnail
	   and keep the product at the center rather than shrinking the poster. */
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Whole-card click target
   The "View details" link is stretched over the entire product card so ANY
   click on the card routes to the item's detail page — same pattern as the
   theme's sp-card-stretched-link used on the other card widgets.
   -------------------------------------------------------------------------- */
.sp-hw-catalog .sp-events__card {
	position: relative; /* anchor for the stretched link */
	/* Match the fully rounded 16px event cards on Insights & Updates. */
	border-radius: 16px !important;
}

.sp-hw-catalog .sp-events__card .sp-card-stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 50; /* above badges/overlay so every click routes */
	cursor: pointer;
}
/* --------------------------------------------------------------------------
   Card "date" badge is repurposed as a price badge → let it size to content
   -------------------------------------------------------------------------- */
.sp-hw-catalog .sp-events__date {
	min-width: auto;
	white-space: nowrap;
}

.sp-hw-catalog .sp-events__date-day {
	font-size: 18px;
}

/* Long prices on one line / backward compatible with smaller cards */
.sp-hw-catalog .sp-events__date-day[data-long] {
	font-size: 15px;
}

/* Type chip: keep long category names inside the card */
.sp-hw-catalog .sp-events__type {
	max-width: calc(100% - 84px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Compact square thumbnails in the horizontal product list view. */
.sp-hw-catalog .sp-events__grid.is-list .sp-events__card {
	flex-direction: row;
	align-items: stretch;
}

.sp-hw-catalog .sp-events__grid.is-list .sp-events__media {
	width: 300px;
	flex: 0 0 300px;
	aspect-ratio: 1 / 1;
	height: 300px;
	min-height: 300px;
	align-self: stretch;
	border-radius: 16px 0 0 16px !important;
}

.sp-hw-catalog .sp-events__grid.is-list .sp-events__media img {
	border-radius: 16px 0 0 16px !important;
}

.sp-hw-catalog .sp-events__grid.is-list .sp-events__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 30px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sp-hw-catalog .sp-events__grid.is-list .sp-events__media {
		width: 210px;
		flex-basis: 210px;
		height: 210px;
		min-height: 210px;
	}
}

/* --------------------------------------------------------------------------
   Price meta row (tag icon + price + old price + suffix)
   -------------------------------------------------------------------------- */
.sp-hw-catalog .sp-hw-price {
	color: var(--primaryColor-dark);
	font-size: 15px;
	font-weight: 700;
}

.sp-hw-catalog .sp-hw-old {
	color: var(--greyColor300);
	text-decoration: line-through;
	font-size: 12.5px;
}

.sp-hw-catalog .sp-hw-suffix {
	color: var(--greyColor600);
	font-size: 12px;
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   "What's in the Box" mini-row on catalog cards (ACF repeater box_contents)
   -------------------------------------------------------------------------- */
.sp-hw-catalog .sp-hw-box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--greyColor600, #64748b);
}

.sp-hw-catalog .sp-hw-box-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--greyColor500, #475569);
}

.sp-hw-catalog .sp-hw-box-label i {
	color: var(--primaryColor, #37a486);
	font-size: 12px;
}

.sp-hw-catalog .sp-hw-box-items {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-hw-catalog .sp-hw-box-more {
	color: var(--primaryColor, #37a486);
	font-weight: 700;
	white-space: nowrap;
}

/* Make the whole media area clickable affordance explicit on touch devices
   (the overlay is always visible there, matching the Events page). */
@media (hover: none) {
	.sp-hw-catalog .sp-events__overlay {
		opacity: 1;
		background: linear-gradient(to top, rgba(6, 40, 33, 0.55) 0%, rgba(6, 40, 33, 0) 60%);
	}
	.sp-hw-catalog .sp-events__overlay-btn {
		transform: none;
	}
}

/* The Events-page right filter rail shows a "Post category" label above the
   chips (from .sp-events__chips::before). Hardware page gets its own label —
   "Filters", since the rail contains both product type & category chips. */
@media (min-width: 992px) {
  .sp-hw-catalog .sp-events__chips::before {
    content: "Hardware filters";
  }
  .sp-hw-catalog .sp-hw-chips--km.sp-events__chips::before {
    content: "ចម្រោះឧបករណ៍";
  }
}

/* Product-type chips ("Per Set" / "Accessories") — icon + label group. */
.sp-hw-catalog .sp-hw-chip-text {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sp-hw-catalog .sp-hw-chip-text i {
	color: var(--primaryColor);
	font-size: 13px;
}

.sp-hw-catalog .sp-events__chip.is-active .sp-hw-chip-text i {
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.sp-hw-catalog .sp-events__date-day {
		font-size: 16px;
	}
	.sp-hw-catalog .sp-events__meta {
		gap: 10px 14px;
	}
	.sp-hw-catalog .sp-events__head {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ==========================================================================
	   Mobile: clean, single-layer product cards
	   The grid-cell wrapper (.sp-events__item) is required by the client-side
	   filter/sort script and stays in the markup, but it is purely a layout
	   hook — no background, border or shadow. .sp-events__card is the ONE card
	   surface: solid white, soft rounded corners (rounded-xl), clean padding,
	   and a light flat shadow. No outer framing box, no nested borders
	   ========================================================================== */
	.sp-hw-catalog .sp-events__grid {
		gap: 20px;
		padding-bottom: 24px;
	}

	/* Hard-strip any residual "framing" from the outer item wrapper. The
	   wrapper is only a layout hook for the filter/sort JS — all visual
	   framing belongs to .sp-events__card below. !important guarantees it
	   beats any other border/shadow/background declaration on mobile. */
	.sp-events__item,
	.sp-hw-catalog .sp-events__item,
	.sp-hw-catalog-item {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		outline: none !important;
		padding: 0 !important;
	}

	/* Single card surface — the only layer that looks like a "card". */
	.sp-hw-catalog .sp-events__card {
		background: #ffffff;
		border: none !important;
		border-radius: 16px !important;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04),
			0 10px 24px -16px rgba(16, 24, 40, 0.18);
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

	.sp-hw-catalog .sp-events__card:focus-within {
		box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05),
			0 16px 32px -16px rgba(16, 24, 40, 0.24);
	}

	/* No hover lift on mobile — the sticky controls (Filters FAB) float over
	   the cards while scrolling, so a card must NOT show a hover state behind
	   them. */
	.sp-hw-catalog .sp-events__card:hover {
		transform: none;
		box-shadow: none !important;
	}

	/* Media (image) area — flush with the card's rounded corners. */
	.sp-hw-catalog .sp-events__media {
		aspect-ratio: 1 / 1;
		/* Image top corners follow the fully rounded card wrapper. */
		border-radius: 16px 16px 0 0 !important;
		background: #f8fafc;
	}
	.sp-hw-catalog .sp-events__media img {
		border-radius: 16px 16px 0 0 !important;
	}

	/* Keep list view compact on phones instead of stacking a full-width square. */
	.sp-hw-catalog .sp-events__grid.is-list .sp-events__card {
		flex-direction: row !important;
	}
	.sp-hw-catalog .sp-events__grid.is-list .sp-events__media {
		width: 150px;
		flex: 0 0 150px;
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
		align-self: stretch;
		border-radius: 16px 0 0 16px !important;
		background: #ffffff;
	}
	.sp-hw-catalog .sp-events__grid.is-list .sp-events__media img {
		object-fit: cover;
		padding: 0;
		box-sizing: border-box;
		border-radius: 16px 0 0 16px !important;
	}
	.sp-hw-catalog .sp-events__grid.is-list .sp-events__body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 14px;
	}

	/* Mobile + pointer device: hovering Filters (or anything in the sticky
	   bar) must never trigger the hover LOOK of the card underneath. The
	   always-visible overlay on real touch devices is preserved via the
	   separate (hover: none) rule. */
	@media (hover: hover) and (max-width: 767px) {
		.sp-hw-catalog .sp-events__card:hover .sp-events__media img {
			transform: none !important;
		}
		.sp-hw-catalog .sp-events__card:hover .sp-events__overlay {
			opacity: 0 !important;
		}
	}

	/* Price + category stay as compact overlays on the image. */
	.sp-hw-catalog .sp-events__date {
		padding: 6px 12px;
		border-radius: 10px;
		min-width: auto;
	}
	.sp-hw-catalog .sp-events__date-month {
		font-size: 10px;
		margin-top: 2px;
	}
	.sp-hw-catalog .sp-events__type {
		padding: 4px 10px;
		font-size: 11px;
	}

	/* Clean card padding. */
	.sp-hw-catalog .sp-events__body {
		padding: 14px 16px 16px;
		gap: 8px;
	}

	.sp-hw-catalog .sp-events__title {
		font-size: 15px;
		line-height: 1.4;
		font-weight: 600;
	}

	.sp-hw-catalog .sp-events__excerpt {
		font-size: 13px;
		line-height: 1.5;
		color: var(--greyColor600, #64748b);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.sp-hw-catalog .sp-events__meta {
		padding-top: 10px;
		border-top: 1px solid #eef1f5;
		margin-top: 4px;
		gap: 8px 12px;
		flex-wrap: wrap;
	}

	.sp-hw-catalog .sp-events__meta-item {
		font-size: 12px;
		color: var(--greyColor600, #64748b);
	}

	.sp-hw-catalog .sp-events__link {
		margin-top: 4px;
		font-size: 13px;
		font-weight: 500;
	}
}


/* ==========================================================================
   Mobile filter bar + left drawer — < 768px
   ========================================================================== */

/* Mobile-only widgets: hidden by default (tablet+ use the regular toolbar). */
.sp-hw-mobile-bar,
.sp-hw-mobile-filter-fab,
.sp-hw-sheet,
.sp-hw-sheet-overlay {
	display: none;
}

@media (max-width: 767px) {
	/* Ensure no parent wrapper breaks sticky positioning */
	.sp-hw-catalog,
	.sp-events__section,
	.sp-container {
		overflow: visible !important;
	}

	/* --------------------------------------------------------------------------
	   1) Sticky horizontal filter bar (filters btn + sort + view toggle)
	   The TOOLBAR is the sticky root (its own height is short on mobile, so the
	   inner bar cannot stick on its own — the toolbar's parent spans the whole
	   catalog and gives the sticky element room to travel).
	   -------------------------------------------------------------------------- */
	.sp-hw-catalog .sp-events__toolbar {
		position: sticky;
		top: 88px; /* sits right below the sticky site header */
		/* Above the card stretched-link overlays (z-index 50) so the Filters
		   button / sort / view controls always receive taps, never the card. */
		z-index: 60;
	}

	.sp-hw-mobile-bar {
		display: flex;
		align-items: center;
		gap: 6px;
		min-width: 0;
		margin: 8px 0 4px;
		padding: 4px 8px;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border: 1px solid #eef2f7;
		border-radius: 12px;
		box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.14);
	}

	.sp-hw-mobile-count {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Dark mode glassmorphism */
	@media (prefers-color-scheme: dark) {
		.sp-hw-mobile-bar {
			background: rgba(17, 24, 39, 0.85);
			border-color: #374151;
			box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
		}
		.sp-hw-mobile-view {
			background: #1f2937;
			border-color: #374151;
		}
		.sp-hw-mobile-view button {
			color: #9ca3af;
		}
		.sp-hw-mobile-filters-btn {
			background: #1f2937;
			border-color: #374151;
			color: #f3f4f6;
		}
		.sp-hw-mobile-sort select {
			background: #1f2937;
			border-color: #374151;
			color: #f3f4f6;
		}
	}

	/* View toggle buttons in mobile bar */
	.sp-hw-mobile-view {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 2px;
		background: #f8fafc;
		border: 1.5px solid #d7dee8;
		border-radius: 999px;
		padding: 2px;
	}
	.sp-hw-mobile-view button {
		min-height: 28px;
		min-width: 28px;
		padding: 0 6px;
		border: none;
		border-radius: 999px;
		background: transparent;
		color: #64748b;
		font-size: 11px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.2s ease, color 0.2s ease;
	}
	.sp-hw-mobile-view button.is-active,
	.sp-hw-mobile-view button[aria-pressed="true"] {
		background: var(--primaryColor, #37a486);
		color: #fff;
	}
	.sp-hw-mobile-view button:focus-visible {
		outline: 2px solid var(--primaryColor, #37a486);
		outline-offset: 2px;
	}

	/* "Filters" button — opens the bottom sheet */
	.sp-hw-mobile-filters-btn {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		position: relative;
		/* Keep this control above the card's stretched-link overlay even when
		   the toolbar is nested in another stacking context. */
		z-index: 61;
		min-height: 32px;
		padding: 4px 10px;
		border-radius: 999px;
		border: 1.5px solid #d7dee8;
		background: #ffffff;
		color: #111827;
		font-family: var(--primaryFont);
		font-size: 10px;
		font-weight: 700;
		cursor: pointer;
		transition: border-color 0.2s ease, color 0.2s ease;
	}
	.sp-hw-mobile-filters-btn > span:not(.sp-hw-filter-badge) {
		white-space: nowrap;
	}
	.sp-hw-mobile-filters-btn i { color: var(--primaryColor, #37a486); font-size: 10px; }
	.sp-hw-mobile-filters-btn[aria-expanded="true"],
	.sp-hw-mobile-filters-btn:hover {
		border-color: var(--primaryColor, #37a486);
		color: var(--primaryColor, #37a486);
	}
	.sp-hw-filter-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #ef4444;
		color: #fff;
		border: 2px solid #fff;
		font-size: 8px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Compact sort dropdown in the bar */
	.sp-hw-mobile-sort {
		flex: 0 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		min-width: 0;
	}
	.sp-hw-mobile-sort i {
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		color: #8a94a6;
		font-size: 10px;
		pointer-events: none;
	}
	.sp-hw-mobile-sort select {
		appearance: none;
		-webkit-appearance: none;
		max-width: 100%;
		min-height: 32px;
		padding: 4px 10px 4px 26px;
		border-radius: 999px;
		border: 1.5px solid #d7dee8;
		background: #ffffff;
		color: #334155;
		font-family: var(--primaryFont);
		font-size: 10px;
		font-weight: 600;
		cursor: pointer;
	}

	/* Horizontally scrollable pills (thumbnail scrollbar hidden) */
	.sp-hw-mobile-pills {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		padding: 2px;
	}
	.sp-hw-mobile-pills::-webkit-scrollbar { display: none; }

	.sp-hw-pill {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 9px 14px;
		border-radius: 999px;
		border: 1px solid #e2e8f0;
		background: #f1f5f9;
		color: #475569;
		font-family: var(--primaryFont);
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
	.sp-hw-pill i { font-size: 12px; }
	.sp-hw-pill.is-active,
	.sp-hw-pill[aria-pressed="true"] {
		background: var(--primaryColor, #37a486);
		border-color: var(--primaryColor, #37a486);
		color: #fff;
	}

/* --------------------------------------------------------------------------
	   2) Left-side drawer for advanced filters (mobile)
	   -------------------------------------------------------------------------- */
	.sp-hw-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: rgba(15, 23, 42, 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	.sp-hw-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
	.sp-hw-drawer-overlay.is-closing { opacity: 0; pointer-events: auto; }

	.sp-hw-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 85vw;
		z-index: 101;
		background: #ffffff;
		border-radius: 0;
		box-shadow: 18px 0 44px rgba(15, 23, 42, 0.2);
		transform: translateX(-110%);
		transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.28, 1);
		overflow: hidden;
	}
	.sp-hw-drawer.is-open { transform: translateX(0); }

	.sp-hw-drawer-header {
		flex: 0 0 auto;
		padding: 16px 18px 8px;
		border-bottom: 1px solid #f1f5f9;
	}
	.sp-hw-drawer-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.sp-hw-drawer-title { margin: 0; font-size: 17px; font-weight: 800; color: #111827; }
	.sp-hw-drawer-close {
		width: 44px;
		height: 44px;
		border: none;
		border-radius: 50%;
		background: #f1f5f9;
		color: #475569;
		font-size: 16px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sp-hw-drawer-close:focus-visible { outline: 2px solid var(--primaryColor, #37a486); outline-offset: 2px; }

	.sp-hw-drawer-body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 18px 16px;
	}
	.sp-hw-drawer-section { padding: 20px 0; border-bottom: 1px solid #f1f5f9; }
	.sp-hw-drawer-section:last-child { border-bottom: none; }
	.sp-hw-drawer-section-title {
		margin: 0 0 14px;
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: #64748b;
	}

	.sp-hw-drawer-search { position: relative; display: block; }
	.sp-hw-drawer-search i {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #8a94a6;
		font-size: 14px;
	}
	.sp-hw-drawer-search input {
		width: 100%;
		min-height: 48px;
		padding: 13px 16px 13px 44px;
		border: 1.5px solid #e2e8f0;
		border-radius: 14px;
		background: #f8fafc;
		font-family: var(--primaryFont);
		font-size: 14px;
		color: #111827;
		outline: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}
	.sp-hw-drawer-search input:focus {
		border-color: var(--primaryColor, #37a486);
		box-shadow: 0 0 0 4px rgba(55, 164, 134, 0.14);
	}

	.sp-hw-drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
	.sp-hw-drawer-chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		padding: 10px 18px;
		border-radius: 999px;
		border: 1px solid #e2e8f0;
		background: #f8fafc;
		color: #475569;
		font-family: var(--primaryFont);
		font-size: 13.5px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
	.sp-hw-drawer-chip i { font-size: 12px; }
	.sp-hw-drawer-chip.is-active,
	.sp-hw-drawer-chip[aria-pressed="true"] {
		background: var(--primaryColor, #37a486);
		border-color: var(--primaryColor, #37a486);
		color: #fff;
	}
	.sp-hw-drawer-select-label { display: inline-block; margin-bottom: 6px; font-size: 11px; color: #64748b; }
	.sp-hw-drawer-body select {
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		min-height: 40px;
		padding: 10px 14px;
		border: 1.5px solid #e2e8f0;
		border-radius: 12px;
		background-color: #f8fafc;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		font-family: var(--primaryFont);
		font-size: 13px;
		color: #111827;
		cursor: pointer;
	}

	.sp-hw-drawer-view-toggle { display: flex; gap: 6px; }
	.sp-hw-drawer-view-btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		padding: 10px 14px;
		border-radius: 12px;
		border: 1.5px solid #e2e8f0;
		background: #f8fafc;
		color: #475569;
		font-family: var(--primaryFont);
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
	}
	.sp-hw-drawer-view-btn.is-active,
	.sp-hw-drawer-view-btn[aria-pressed="true"] {
		background: var(--primaryColor, #37a486);
		border-color: var(--primaryColor, #37a486);
		color: #fff;
	}

	/* Keep Clear All available at the bottom of the drawer. */
	.sp-hw-drawer-footer {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 18px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid #e2e8f0;
		background: #ffffff;
		box-shadow: 0 -8px 20px -12px rgba(15, 23, 42, 0.16);
	}
	.sp-hw-drawer-clear {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 52px;
		padding: 14px 20px;
		border-radius: 14px;
		border: 1.5px solid #d7dee8;
		background: #ffffff;
		color: #475569;
		font-family: var(--primaryFont);
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
	}
	.sp-hw-drawer-clear:focus-visible {
		outline: 2px solid var(--primaryColor, #37a486);
		outline-offset: 2px;
	}

	.sp-hw-catalog .sp-events__grid {
		padding-bottom: 24px;
	}
}

/* Above mobile: never show the mobile widgets. */
@media (min-width: 768px) {
	.sp-hw-mobile-bar,
	.sp-hw-sheet-overlay,
	.sp-hw-sheet {
		display: none !important;
	}
}

/* RTL support for the bottom sheet */
[dir="rtl"] .sp-hw-drawer-search input { padding: 13px 44px 13px 16px; }
[dir="rtl"] .sp-hw-drawer-search i { left: auto; right: 16px; }
[dir="rtl"] .sp-hw-drawer-body select { background-position: left 14px center; }

/* Above mobile: never show the mobile widgets. */
@media (min-width: 768px) {
	.sp-hw-mobile-bar,
	.sp-hw-drawer-overlay,
	.sp-hw-drawer {
		display: none !important;
	}
}

.sp-hw-sidebar-card {
  background: #fff;
  border: 1px solid #e5eaf0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.sp-hw-sidebar-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.sp-hw-sidebar-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef2f7;
}
.sp-hw-sidebar-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sp-hw-sidebar-section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.sp-hw-sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-hw-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #475569;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.sp-hw-sidebar-link:hover {
  color: #087f5b;
  background: #ecfdf5;
}
.sp-hw-sidebar-link.is-active {
  color: #fff;
  background: #24966f;
  font-weight: 700;
}
.sp-hw-sidebar-link i {
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: #189672;
}
.sp-hw-sidebar-link.is-active i {
  color: #fff;
}

.sp-hw-sidebar-count {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}
.sp-hw-sidebar-link.is-active .sp-hw-sidebar-count {
  color: rgba(255, 255, 255, 0.8);
}

.sp-hw-sidebar-support .sp-hw-sidebar-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.sp-hw-sidebar-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.sp-hw-sidebar-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #475569;
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sp-hw-sidebar-contact a:hover {
  color: #189672;
}
.sp-hw-sidebar-contact i {
  width: 20px;
  text-align: center;
  font-size: 14px;
  color: #189672;
}
.sp-hw-sidebar-contact b {
  font-weight: 600;
  color: #111827;
}
.sp-hw-sidebar-contact small {
  color: #6b7280;
  font-weight: 400;
}

.sp-hw-sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: #189672;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sp-hw-sidebar-btn:hover {
  background: #12785c;
  transform: translateY(-1px);
}

.sp-hw-sidebar-trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 767px) {
	.sp-hw-catalog-sidebar {
		grid-template-columns: 1fr;
		margin-top: 24px;
	}
}

.sp-hw-sidebar-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.sp-hw-sidebar-trust i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(24, 150, 114, 0.12);
  color: #189672;
  font-size: 11px;
}

/* Mobile hardware filters: compact sticky controls and a left-side drawer. */
@media (max-width: 767px) {
	.sp-hw-catalog .sp-events__hero-stats,
	.sp-hw-catalog .sp-events__hero-deco {
		display: none !important;
	}

	.sp-hw-catalog,
	.sp-hw-catalog .sp-events__section,
	.sp-hw-catalog .sp-container,
	.elementor-widget-sp_hardware_catalog,
	.elementor-widget-sp_hardware_catalog > .elementor-widget-container {
		overflow: visible !important;
	}

	.sp-hw-catalog .sp-events__toolbar {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.sp-hw-catalog .sp-hw-rail,
	.sp-hw-catalog .sp-events__status {
		display: none !important;
	}

	.sp-hw-catalog .sp-events__toolbar {
		position: sticky;
		top: 88px;
		/* Above the card stretched-link overlays (z-index 50). */
		z-index: 60;
	}

	.sp-hw-catalog .sp-hw-mobile-bar {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		width: 100%;
		margin: 8px 0 12px;
		padding: 4px 8px;
		border: 1px solid rgba(226, 232, 240, 0.9);
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.85);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.18);
	}

	.sp-hw-mobile-filters-btn {
		min-height: 32px;
		padding: 4px 10px;
		font-size: 10px;
	}
	.sp-hw-mobile-filters-btn i { font-size: 10px; }

	.sp-hw-mobile-count {
		flex: 1 1 auto;
		min-width: 0;
		color: #64748b;
		font-size: 10px;
		text-align: center;
		white-space: nowrap;
	}

	.sp-hw-mobile-sort select {
		max-width: 120px;
		min-height: 32px;
		padding: 4px 10px 4px 26px;
		font-size: 10px;
	}

	.sp-hw-mobile-view {
		gap: 2px;
		padding: 2px;
	}

	.sp-hw-mobile-view button {
		min-width: 28px;
		min-height: 28px;
		padding: 0 6px;
		font-size: 11px;
	}

	.sp-hw-catalog .sp-hw-mobile-filter-fab {
		display: inline-flex !important;
		position: fixed;
		right: calc(12px + env(safe-area-inset-right, 0px));
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		z-index: 61;
		min-height: 36px;
		min-width: 0;
		padding: 6px 12px;
		border: 0;
		border-radius: var(--borderRadiusMd, 12px);
		background: var(--primaryColor, #37a486);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		box-shadow: none;
		transition: var(--transition);
	}

	.sp-hw-catalog .sp-hw-mobile-filter-fab:hover,
	.sp-hw-catalog .sp-hw-mobile-filter-fab:focus {
		border-color: var(--primaryColor-dark);
		background: var(--primaryColor-dark);
		color: #fff;
		box-shadow: 0 0 20px rgba(26, 236, 187, 0.4);
		transform: translateY(-2px);
	}

	.sp-hw-catalog .sp-hw-mobile-filter-fab i {
		color: #fff;
		font-size: 11px;
	}

	.sp-hw-catalog .sp-hw-mobile-filter-fab:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	/* --------------------------------------------------------------------------
	   Square hit area for round mobile controls
	   A pill's rounded corners are NOT part of the button's hit box, so taps
	   on those corner spots fell through to the product card behind (opening
	   a card instead of Filters / toggling the view). A square ::before covers
	   the button's full rectangle, keeping hover + every tap on the button.
	   -------------------------------------------------------------------------- */
	/* The view-toggle buttons need a positioned box so their ::before square
	   hit area anchors to each button (the FAB stays position: fixed — its
	   fixed box is already a containing block for its ::before). */
	.sp-hw-catalog .sp-hw-mobile-view button {
		position: relative;
	}

	.sp-hw-catalog .sp-hw-mobile-filters-btn::before,
	.sp-hw-catalog .sp-hw-mobile-view button::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 0; /* full rectangle = fully clickable */
	}

	.sp-hw-catalog .sp-hw-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: rgba(15, 23, 42, 0.5);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.sp-hw-catalog .sp-hw-drawer-overlay.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.sp-hw-catalog .sp-hw-drawer-overlay.is-closing {
		opacity: 0;
		pointer-events: auto;
	}

	.sp-hw-catalog .sp-hw-drawer {
		display: flex;
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 101;
		width: min(360px, 88vw);
		max-width: 88vw;
		flex-direction: column;
		border-radius: 0;
		background: #fff;
		box-shadow: 18px 0 44px rgba(15, 23, 42, 0.2);
		transform: translateX(-105%);
		transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.28, 1), visibility 0s linear 0.32s;
		overflow: hidden;
		visibility: hidden;
	}

	.sp-hw-catalog .sp-hw-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.sp-hw-drawer-body {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.sp-hw-drawer-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.sp-hw-drawer-chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 40px;
		padding: 9px 13px;
		border: 1px solid #e2e8f0;
		border-radius: 999px;
		background: #f8fafc;
		color: #475569;
		font-family: var(--primaryFont);
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.sp-hw-drawer-chip.is-active,
	.sp-hw-drawer-chip[aria-pressed="true"] {
		border-color: var(--primaryColor, #37a486);
		background: var(--primaryColor, #37a486);
		color: #fff;
	}

	.sp-hw-drawer-footer {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid #e2e8f0;
		background: #fff;
		box-shadow: 0 -8px 20px -12px rgba(15, 23, 42, 0.16);
	}

	.sp-hw-drawer-clear {
		display: inline-flex;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 12px 14px;
		border-radius: 12px;
		font-family: var(--primaryFont);
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
	}

	.sp-hw-drawer-clear {
		flex: 1 1 auto;
		border: 1px solid #d7dee8;
		background: #fff;
		color: #475569;
	}

	.sp-hw-drawer-clear:focus-visible {
		outline: 2px solid var(--primaryColor, #37a486);
		outline-offset: 2px;
	}

	.sp-hw-catalog .sp-hw-drawer-header {
		padding: 16px 18px;
		border-bottom: 1px solid #e9eef3;
		background: #fff;
	}

	.sp-hw-catalog .sp-hw-drawer-title-row {
		min-height: 44px;
		gap: 16px;
	}

	.sp-hw-catalog .sp-hw-drawer-title {
		font-size: 18px;
		line-height: 1.3;
		letter-spacing: -0.02em;
	}

	.sp-hw-catalog .sp-hw-drawer-close {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		padding: 0 !important;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		background: #f8fafc;
		color: #475569;
		font-size: 15px;
		line-height: 1;
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}

	.sp-hw-catalog .sp-hw-drawer-close:hover {
		border-color: rgba(55, 164, 134, 0.35);
		background: rgba(55, 164, 134, 0.08);
		color: var(--primaryColor, #37a486);
	}

	.sp-hw-catalog .sp-hw-drawer-body {
		padding: 0 18px 18px;
	}

	.sp-hw-catalog .sp-hw-drawer-body > .sp-hw-drawer-section:first-child {
		padding: 18px 0 16px;
	}

	.sp-hw-catalog .sp-hw-drawer-search {
		display: block;
		width: 100%;
	}

	.sp-hw-catalog .sp-hw-drawer-search i {
		left: 15px;
		color: #7b8794;
		font-size: 14px;
		pointer-events: none;
	}

	.sp-hw-catalog .sp-hw-drawer-search input {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		padding: 0 42px 0 42px;
		border: 1px solid #dce4eb;
		border-radius: 12px;
		background: #f8fafc;
		font-size: 14px;
		line-height: 1.4;
	}

	.sp-hw-catalog .sp-hw-drawer-search input::placeholder {
		color: #8a96a3;
		opacity: 1;
	}

	.sp-hw-catalog .sp-hw-drawer-search input:focus {
		border-color: var(--primaryColor, #37a486);
		background: #fff;
		box-shadow: 0 0 0 3px rgba(55, 164, 134, 0.12);
	}

	.sp-hw-catalog .sp-hw-drawer-search input::-webkit-search-cancel-button {
		cursor: pointer;
	}

	.sp-hw-catalog .sp-hw-drawer-section-title {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
	.sp-hw-catalog .sp-hw-mobile-bar {
		border-color: rgba(55, 65, 81, 0.9);
		background-color: rgba(17, 24, 39, 0.85);
	}

	.sp-hw-mobile-count {
		color: #cbd5e1;
	}
}

@media (min-width: 768px) {
	.sp-hw-mobile-bar,
	.sp-hw-mobile-filter-fab,
	.sp-hw-drawer-overlay,
	.sp-hw-drawer {
		display: none !important;
	}
}

/* ========================================================================
   Product card radius — match the fully rounded Insights & Updates cards.
   Images stay square at the bottom so they meet the card body cleanly.
   ======================================================================== */
@media (min-width: 768px) {
	.sp-hw-catalog .sp-events__media,
	.sp-hw-catalog .sp-events__media img {
		border-radius: 16px 16px 0 0 !important;
	}

	.sp-hw-catalog .sp-events__card {
		border-radius: 16px !important;
	}
}