/* 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%;}
}