/* Centritek Showroom — public-facing styles
 *
 * Phase 4: collapsed cards
 * Phase 6: filter bar, expanded cards, deep linking
 * Phase 6.5 polish (Commit 1): typography + token alignment per design spec
 *   - Mono uppercase eyebrows / spec keys / pills (IBM Plex Mono kept)
 *   - Plus Jakarta Sans for values (right-aligned in specs)
 *   - Universal button rules: Plus Jakarta 700 UPPER +0.08em, radius 0, ≥44px hit target
 *   - Action row as 50/50 grid with single shared outer border
 */

.ct-showroom {
	margin: 0 auto;
	max-width: 1380px;
	padding: 0 1rem;
	box-sizing: border-box;
}

.ct-showroom *,
.ct-showroom *::before,
.ct-showroom *::after {
	box-sizing: border-box;
}

.ct-showroom__grid {
	display: grid;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-showroom__grid--columns-2 { grid-template-columns: repeat(2, 1fr); }
.ct-showroom__grid--columns-3 { grid-template-columns: repeat(3, 1fr); }
.ct-showroom__grid--columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.ct-showroom__grid--columns-3,
	.ct-showroom__grid--columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.ct-showroom__grid {
		grid-template-columns: 1fr;
	}
}

.ct-showroom__empty {
	color: #74787c;
	text-align: center;
	padding: 48px 24px;
	font-style: italic;
	margin: 0;
}

/* ---------- Card ---------- */

.ct-equipment-card {
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease, transform 200ms ease;
	margin: 0;
}

.ct-equipment-card:hover {
	box-shadow: 0 18px 36px -16px rgba(20, 23, 27, 0.18);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ct-equipment-card,
	.ct-equipment-card:hover {
		transition: none;
		transform: none;
	}
}

.ct-equipment-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #202428;
	overflow: hidden;
}

.ct-equipment-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ct-equipment-card__image--empty {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		#2a2f33 0,
		#2a2f33 12px,
		#202428 12px,
		#202428 24px
	);
}

/* ---------- Carousel ----------
 * Used in both the collapsed media area and the expanded gallery panel.
 * Single-image and zero-image cards skip the chrome (chip / arrows / dots);
 * carousel only renders when there are 2+ images.
 *
 * Collapsed variant: 32px arrows, fade in on card hover.
 * Expanded variant:  36px arrows, always visible. Thumbnail strip below.
 */

.ct-carousel {
	position: relative;
	width: 100%;
	height: 100%;
	background: #202428;
	overflow: hidden;
}

.ct-carousel__slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.ct-carousel__slide {
	display: none;
	width: 100%;
	height: 100%;
}

.ct-carousel__slide.is-active {
	display: block;
}

.ct-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ct-carousel__chip {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 8px;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.08em;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	z-index: 2;
	pointer-events: none;
}

.ct-showroom .ct-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	color: #1a1a1a;
	border: 0;
	border-radius: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
	transition: opacity 200ms ease, background 150ms ease;
	padding: 0;
}

.ct-carousel__arrow--prev { left: 10px; }
.ct-carousel__arrow--next { right: 10px; }

.ct-equipment-card:hover .ct-carousel--collapsed .ct-carousel__arrow,
.ct-carousel--collapsed .ct-carousel__arrow:focus-visible {
	opacity: 1;
}

.ct-carousel__arrow:hover {
	background: #fff;
}

.ct-carousel--expanded .ct-carousel__arrow {
	width: 36px;
	height: 36px;
	opacity: 1;
}

.ct-carousel--expanded .ct-carousel__arrow--prev { left: 12px; }
.ct-carousel--expanded .ct-carousel__arrow--next { right: 12px; }

.ct-carousel__dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
	padding: 0;
	margin: 0;
}

.ct-showroom .ct-carousel__dot {
	width: 5px;
	height: 5px;
	background: rgba(255, 255, 255, 0.4);
	border: 0;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	transition: background 150ms ease;
}

.ct-carousel__dot.is-active {
	background: var(--e-global-color-primary, #F56A22);
}

.ct-carousel--expanded .ct-carousel__dots { bottom: 14px; }
.ct-carousel--expanded .ct-carousel__dot { width: 6px; height: 6px; }

/* Thumbnail strip (expanded gallery panel only) */
.ct-carousel__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.ct-showroom .ct-carousel__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f6f6f6;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}

.ct-carousel__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color 150ms ease;
}

.ct-carousel__thumb.is-active::after {
	border-color: var(--e-global-color-primary, #F56A22);
}

.ct-carousel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.ct-carousel__arrow,
	.ct-carousel__dot,
	.ct-carousel__thumb::after {
		transition: none;
	}
}

/* ---------- Badges ---------- */

.ct-equipment-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 6px 10px;
	border-radius: 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #fff;
	z-index: 1;
}

.ct-equipment-card__badge--rental { background: #F56A22; }
.ct-equipment-card__badge--sale   { background: #ffffff; color: #1a1a1a; }

.ct-equipment-card__badge--both {
	background: transparent;
	color: #ffffff;
	border: 1.5px solid #ffffff;
	padding: 4.5px 8.5px;
}

.ct-equipment-card__badge--coming-soon {
	background: #fcb900;
	color: #1a1a1a;
}

.ct-equipment-card__badge--sold {
	background: #6c6f73;
}

/* ---------- Body ---------- */

.ct-equipment-card__body {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
}

.ct-equipment-card__title {
	margin: 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #1a1a1a;
}

.ct-equipment-card__manufacturer {
	margin: 0;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #74787c;
}

.ct-equipment-card__description {
	margin: 0;
	color: #5e6266;
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ct-equipment-card__status-note {
	margin: 0;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #F56A22;
}

/* ---------- Mini-spec strip (collapsed) ----------
 * 3-column row of the top 3 specs, between the brief description and the
 * action row. Hidden when the card is expanded (full spec table replaces
 * it). Mono uppercase keys, sans-serif bold values matching the spec table
 * typography hierarchy.
 */

.ct-equipment-card__mini-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding-top: 12px;
	border-top: 1px solid #ededed;
}

.ct-equipment-card__mini-spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ct-equipment-card__mini-spec-key {
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #74787c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-equipment-card__mini-spec-value {
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: #1a1a1a;
}

.ct-equipment-card__mini-spec-unit {
	color: #74787c;
	margin-left: 2px;
	font-weight: 400;
}

.ct-equipment-card.is-expanded .ct-equipment-card__mini-specs {
	display: none;
}

/* ---------- Condition pills (expanded) ----------
 * status_note → .ok pill (orange tint, leading bullet, lead status).
 * Each line of condition_highlights → neutral pill (verifiable facts,
 * recent work, certifications). Wrapped above the spec table.
 */

.ct-equipment-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px 0;
}

.ct-pill {
	display: inline-block;
	padding: 4px 9px;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: #5e6266;
	background: #f6f6f6;
	border: 1px solid #ededed;
	border-radius: 0;
}

.ct-pill--ok {
	color: var(--e-global-color-primary, #F56A22);
	background: rgba(245, 106, 34, 0.08);
	border-color: rgba(245, 106, 34, 0.25);
}

.ct-pill--ok::before {
	content: "● ";
}

/* The collapsed status-note line is hidden in expanded mode — the .ok pill
 * inside .ct-equipment-card__pills covers the same data with the right
 * design treatment. */
.ct-equipment-card.is-expanded .ct-equipment-card__status-note {
	display: none;
}

/* ---------- Action row (collapsed): 50/50 grid ----------
 * Each button keeps its own border so Details reads as a complete
 * white-with-gray-border button. Inquire's border matches its orange
 * background so it appears as a solid filled pill abutting Details.
 */

.ct-equipment-card__actions {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* When the card is expanded, the collapsed action row is hidden in favor
 * of the expanded footer (which has its own larger primary CTA). */
.ct-equipment-card.is-expanded .ct-equipment-card__actions {
	display: none;
}

/* ---------- Universal in-card button styles ----------
 * Plus Jakarta Sans 700 UPPER +0.08em per design spec (NOT mono — mono is
 * reserved for keys / eyebrows / pills). Min-height 44px for WCAG 2.5.5
 * touch target. No border-radius (flat industrial vocabulary).
 *
 * All button selectors are prefixed with `.ct-showroom` to push specificity
 * to (0, 2, 0), which beats Elementor kit's `body.elementor-kit-N button`
 * global rules (0, 1, 2). Without this, Elementor's kit overrides our
 * button styling on any page where the kit is applied.
 */

.ct-showroom .ct-equipment-card__inquire-btn,
.ct-showroom .ct-equipment-card__details-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 14px 16px;
	border-radius: 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Primary — orange filled */
.ct-showroom .ct-equipment-card__inquire-btn {
	background: var(--e-global-color-primary, #F56A22);
	color: #fff;
	border: 1px solid var(--e-global-color-primary, #F56A22);
}

.ct-showroom .ct-equipment-card__inquire-btn:hover,
.ct-showroom .ct-equipment-card__inquire-btn:focus-visible {
	background: #d44a1c;
	border-color: #d44a1c;
	color: #fff;
}

.ct-showroom .ct-equipment-card__inquire-btn:visited {
	color: #fff;
}

/* Secondary — white surface, ink text. Hover stays subtle (color → --thm)
 * to keep the design language restrained; full inversion would dominate
 * the action row visually next to the orange Inquire primary button. */
.ct-showroom .ct-equipment-card__details-btn {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #ededed;
}

.ct-showroom .ct-equipment-card__details-btn:hover,
.ct-showroom .ct-equipment-card__details-btn:focus-visible {
	background: #fff;
	color: var(--e-global-color-primary, #F56A22);
	border-color: var(--e-global-color-primary, #F56A22);
}

/* Buttons inside the action row keep their own borders. Where they meet
 * (Details right edge / Inquire left edge), Inquire's border-color matches
 * its orange background so the visible result is just Details' gray border
 * abutting Inquire's orange — no doubled-edge artifact. */

@media (prefers-reduced-motion: reduce) {
	.ct-showroom .ct-equipment-card__inquire-btn,
	.ct-showroom .ct-equipment-card__details-btn {
		transition: none;
	}
}

/* ---------- Collapse (×) button — corner icon ---------- */

.ct-showroom .ct-equipment-card__collapse-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #5e6266;
	border-radius: 0;
}

.ct-showroom .ct-equipment-card__collapse-btn:hover,
.ct-showroom .ct-equipment-card__collapse-btn:focus-visible {
	background: #f6f6f6;
	color: #1a1a1a;
}

/* ---------- Expanded section ---------- */

.ct-equipment-card__expanded {
	display: none;
}

.ct-equipment-card.is-expanded {
	grid-column: span 2;
}

@media (max-width: 1024px) {
	.ct-equipment-card.is-expanded {
		grid-column: span 2;
	}
}

@media (max-width: 640px) {
	.ct-equipment-card.is-expanded {
		grid-column: 1 / -1;
	}
}

/* When expanded, the collapsed-state body content is hidden — the expanded
 * section's own grid (gallery left, content right) takes over the card. */
.ct-equipment-card.is-expanded .ct-equipment-card__media,
.ct-equipment-card.is-expanded .ct-equipment-card__title,
.ct-equipment-card.is-expanded .ct-equipment-card__manufacturer,
.ct-equipment-card.is-expanded .ct-equipment-card__description {
	display: none;
}

.ct-equipment-card.is-expanded .ct-equipment-card__body {
	padding: 0;
	gap: 0;
}

.ct-equipment-card.is-expanded .ct-equipment-card__expanded {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	border-top: 0;
}

/* ---------- Expanded layout: 2-col grid + footer ---------- */

.ct-equipment-card__expanded-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	min-height: 0;
}

.ct-equipment-card__expanded-gallery {
	padding: 24px;
	background: #f6f6f6;
	border-right: 1px solid #ededed;
	min-width: 0;
}

.ct-equipment-card__expanded-gallery .ct-carousel {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* When the gallery panel has just a bare image or empty placeholder
 * (no carousel chrome — single-image or zero-image cards), give it the
 * same aspect-ratio so it doesn't collapse to zero height in the gallery
 * panel which has no intrinsic height. */
.ct-equipment-card__expanded-gallery > .ct-equipment-card__image,
.ct-equipment-card__expanded-gallery > .ct-equipment-card__image--empty {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
}

.ct-equipment-card__expanded-content {
	padding: 32px 36px;
	min-width: 0;
}

.ct-equipment-card__expanded-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 36px;
	border-top: 1px solid #ededed;
}

/* Inline link — no padding, text-only feel. The footer's own padding
 * provides adequate hit target spacing around it. */
.ct-showroom .ct-equipment-card__back-link {
	background: transparent;
	border: 0;
	padding: 4px 0;
	color: #5e6266;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 150ms ease;
}

.ct-showroom .ct-equipment-card__back-link:hover,
.ct-showroom .ct-equipment-card__back-link:focus-visible {
	color: #1a1a1a;
}

/* ---------- Arrow glyph in buttons ----------
 * Spec calls for the trailing arrow in mono. Using IBM Plex Mono (existing
 * site font) gives the arrow a subtly different visual weight from the
 * Plus Jakarta button label, which reads as deliberate.
 */

.ct-arrow {
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-weight: 500;
	display: inline-block;
}

.ct-arrow--back {
	margin-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ct-equipment-card__back-link {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.ct-equipment-card__expanded-grid {
		grid-template-columns: 1fr;
	}
	.ct-equipment-card__expanded-gallery {
		border-right: 0;
		border-bottom: 1px solid #ededed;
	}
	.ct-equipment-card__expanded-content {
		padding: 24px;
	}
	.ct-equipment-card__expanded-footer {
		padding: 16px 24px;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.ct-equipment-card__expanded-content {
		padding: 20px;
	}
	.ct-equipment-card__expanded-gallery {
		padding: 16px;
	}
}

.ct-equipment-card__expanded-heading {
	margin: 0 32px 12px 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.018em;
	color: #1a1a1a;
}

.ct-equipment-card__expanded-heading:focus {
	outline: none;
}

/* ---------- Meta list (Model / Condition) ----------
 * Mono uppercase keys, sans-serif values. NOT right-aligned (this is meta,
 * not the spec table — short values look bad far from their keys).
 */

.ct-equipment-card__meta-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 0 0 16px 0;
}

.ct-equipment-card__meta-row {
	display: contents;
}

.ct-equipment-card__meta-list dt {
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #74787c;
	align-self: center;
}

.ct-equipment-card__meta-list dd {
	margin: 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
	align-self: center;
}

/* ---------- Full content (post body) ---------- */

.ct-equipment-card__full-content {
	font-size: 14px;
	line-height: 1.6;
	color: #5e6266;
	margin: 0 0 16px 0;
}

.ct-equipment-card__full-content p {
	margin: 0 0 12px 0;
}

.ct-equipment-card__full-content p:last-child {
	margin-bottom: 0;
}

/* ---------- Section heading (eyebrow) ---------- */

.ct-equipment-card__section-heading {
	margin: 16px 0 8px 0;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #74787c;
}

/* ---------- Specs table (mono key / sans value, right-aligned) ---------- */

.ct-equipment-card__specs {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 24px;
	margin: 0 0 16px 0;
	border-top: 1px solid #ededed;
}

.ct-equipment-card__spec-row {
	display: contents;
}

.ct-equipment-card__specs dt {
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 10px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #74787c;
	padding: 11px 0;
	border-bottom: 1px solid #ededed;
	align-self: center;
}

.ct-equipment-card__specs dd {
	margin: 0;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: #1a1a1a;
	text-align: right;
	padding: 11px 0;
	border-bottom: 1px solid #ededed;
	align-self: center;
}

.ct-equipment-card__spec-unit {
	color: #74787c;
	margin-left: 4px;
	font-weight: 400;
}

/* ---------- Gallery (expanded) ---------- */

.ct-equipment-card__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
	margin: 0 0 16px 0;
}

.ct-equipment-card__gallery-item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
	border: 1px solid #ededed;
	transition: border-color 150ms ease;
}

.ct-equipment-card__gallery-item:hover,
.ct-equipment-card__gallery-item:focus-visible {
	border-color: var(--e-global-color-primary, #F56A22);
}

.ct-equipment-card__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Document download link ---------- */

.ct-equipment-card__document {
	margin: 0 0 16px 0;
}

.ct-equipment-card__document-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding-bottom: 3px;
	color: #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 11px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}

.ct-equipment-card__document-link:hover,
.ct-equipment-card__document-link:focus-visible {
	color: var(--e-global-color-primary, #F56A22);
	border-bottom-color: var(--e-global-color-primary, #F56A22);
}

.ct-equipment-card__document-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1.5h7L13 4.5v10H3V1.5zM10 1.5v3h3' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1.5h7L13 4.5v10H3V1.5zM10 1.5v3h3' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

@media (prefers-reduced-motion: reduce) {
	.ct-equipment-card__document-link {
		transition: none;
	}
}

/* ---------- Primary inquire button (large CTA in expanded footer) ----------
 * Inherits .ct-equipment-card__inquire-btn base; overrides size for the
 * footer placement.
 */

.ct-equipment-card__inquire-btn--primary {
	flex: 1;
	max-width: 360px;
	min-height: 48px;
	padding: 16px 24px;
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	justify-content: center;
}

@media (max-width: 1024px) {
	.ct-equipment-card__inquire-btn--primary {
		max-width: none;
		flex: none;
		width: 100%;
	}
}

/* ---------- Filter bar ---------- */

.ct-showroom__filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	margin-bottom: 24px;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 0;
	position: sticky;
	top: 0;
	z-index: 5;
}

.ct-showroom__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1;
}

.ct-showroom__filter-label {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
}

.ct-showroom__filter {
	padding: 10px 14px;
	font-family: inherit;
	font-size: 13px;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 0;
	color: #1a1a1a;
	cursor: pointer;
}

.ct-showroom__filter:focus-visible {
	border-color: var(--e-global-color-primary, #F56A22);
	outline: 2px solid var(--e-global-color-primary, #F56A22);
	outline-offset: 1px;
}

.ct-showroom__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5e6266;
}

.ct-showroom__count {
	font-weight: 500;
}

.ct-showroom .ct-showroom__reset {
	background: transparent;
	border: 0;
	color: var(--e-global-color-primary, #F56A22);
	font-family: var(--heading-font, "Plus Jakarta Sans"), system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 4px 8px;
}

.ct-showroom .ct-showroom__reset:hover,
.ct-showroom .ct-showroom__reset:focus-visible {
	color: #d44a1c;
	text-decoration: underline;
}

@media (max-width: 640px) {
	.ct-showroom__filter-bar {
		flex-direction: column;
		align-items: stretch;
		position: static;
	}
	.ct-showroom__filters {
		flex-direction: column;
	}
	.ct-showroom__filter {
		width: 100%;
	}
	.ct-showroom__meta {
		justify-content: space-between;
	}
}

/* Hidden card via filter — display: none keeps the grid auto layout clean */
.ct-equipment-card[hidden] {
	display: none;
}

/* Screen-reader only helper (matches WP convention) */
.ct-showroom .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
