/* CSS for [matchstick_machine_block] / the "Machine Block (Matchstick)" Elementor
   widget - specifically its slider mode. Scoped entirely under the custom
   ".machine-block-slider" class (unique to this feature - not used by the plugin's
   own [matchstick_listings] / [matchstick_used_listings] shortcodes), so nothing here
   touches or overrides the plugin's base card styling. Enqueued at a very late
   priority (see functions.php) so it loads after every other plugin's CSS on the page
   and reliably wins any same-specificity cascade tie against them. */

/* Slick sizes each ".slick-slide" itself (based on slides-to-show), so the card
   inside it must fill that slide at 100% instead of using the plugin's flex-grid
   width, or the two sizings fight each other and the card renders as a sliver/blank
   space instead of the full card. */
.machine-list.machine-block-slider {
	display: block;
}

.machine-block-slider .machine-card {
	width: 100%;
	/* Royal Elementor Addons (and possibly other page-builder addons) bundle their
       own ".slick-slide { min-height: 1px }" rule. Redeclaring min-height here, on a
       2-class selector, beats any plain ".slick-slide" or ".machine-card" rule
       regardless of load order. */
	min-height: 400px;
	/* Elementor's own lazy-load-container-backgrounds feature can set
       "background-image: none !important" on any element inside a container it
       hasn't marked "loaded" (see the "e-no-lazyload" class note in
       matchstick_shortcode_machine_block()). A plain inline background-image loses to
       that no matter what, so it's routed through a CSS custom property instead: the
       card's inline style only sets --matchstick-bg, and this !important rule
       (2-class specificity, beats the competing single-class rule regardless of load
       order) does the actual rendering. */
	background-image: var(--matchstick-bg) !important;
}

/* Some other widget on this site injects an un-scoped rule - ".slick-prev { left:
   -10% }" - meant for that widget's own, narrower carousel. Applied to our wider
   slider, -10% of its width pushes the left arrow far enough off-canvas to sit
   outside the browser viewport entirely (the right arrow survives because there's
   usually page whitespace to its right, but not to the slider's left). Pin both
   arrows to a fixed position on a 2-class selector so it wins regardless of load
   order and can't be thrown off by the slider's width the way a percentage offset
   can. */
.machine-block-slider .slick-prev {
	left: 10px;
}

.machine-block-slider .slick-next {
	right: 10px;
}

.elementor-widget-matchstick_machine_block {
	width: 100%;
}

.machine-block-list:is(.machine-block-slider) {
	width: 100%;
}

.machine-block-list:not(.machine-block-slider) {
	width: 100%;
	--column-gap: 30px;
	column-gap: var(--column-gap);
	row-gap: 30px;
}

.machine-block-list:not(.machine-block-slider) .machine-card {
	width: 100%;
	max-width: calc(33.3333% - ( 2 * var(--column-gap) / 3 ));
	min-height: auto;
}

.machine-block-list:not(.machine-block-slider) .machine-card:before {
	content: "";
	display: block;
	padding-top: 90%;
}

.machine-block-list .machine-card .machine-card-subtitle .machine-card-category {
	color: #fcb615;
	font-weight: 500;
}

.elementor-kit-9 a.elementor-button {
	text-decoration: none;
}

.offerCard .pp-info-box-button {
	font-size: 14px !important;
}

@media (width < 1025px) {
	.machine-block-list:not(.machine-block-slider) .machine-card {
		max-width: calc(50% - ( 1 * var(--column-gap) / 2 ));
	}
}

@media (width < 768px) {
	.machine-block-list:not(.machine-block-slider) .machine-card {
		max-width: 100%;
	}
}