/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.2
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* White rounded nav bar container (logo + menu + icons + button live inside).
   Margin makes the white pill "float" so the section background shows around it.
   Double class (.w-hwrapper.header-nav-section) so it beats Impreza's own rules. */
.w-hwrapper.header-nav-section{
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 0px 0px 0px 1.25rem;
    margin: 0.9rem 1.75rem;
    --hwrapper-gap: 0px!important;  /* remove Impreza's default gap between logo/menu */
}
.l-subheader.at_middle{
    box-shadow: none!important;
}

/* "Get a Price" button: pushed to the far right + navy pill like the screenshot. */
.header-nav-section > .ush_btn_1{
    margin-left: auto;
    border-radius: 8px;
    background-color: var(--color-custom-1);
}

@media(max-width: 1024px){
    .w-hwrapper.header-nav-section{
        padding: 10px 10px 10px 1.25rem;
    }
}

/* Narrow phones: logo + search/FAQ/account/language icons + "Get a Price" +
   hamburger no longer fit on one row (flex-wrap:nowrap makes them spill past
   the white pill on both sides instead of shrinking). Let the row wrap onto
   a second line and drop the auto push-right so both lines simply centre —
   nothing is hidden, it just reflows instead of overflowing. */
@media (max-width: 560px){
    .w-hwrapper.header-nav-section{
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .header-nav-section > .ush_btn_1{
        margin-left: 0;
    }
}
.header-nav-section > .ush_btn_1:hover{
    background-color: var(--color-custom-3);
}
.header-nav-section > .ush_btn_1 .w-btn-label{
    color: #FFFFFF;
    font-weight: 700;
}

/* Header utility icons (search / help / account / language).
   Inline SVGs use stroke="currentColor", so setting `color` drives them.
   Requires the SVGs to be embedded inline (not as <img>). */
.custom-header-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1.5rem!important;
}

.custom-header-icons svg {
    width: 24px;
    height: 24px;
    display: block;
    color: var(--color-custom-1);
    transition: color 0.2s ease;
}

.custom-header-icons a:hover svg,
.custom-header-icons svg:hover {
    color: var(--color-custom-3);
}

/* Machine head: "SNT BUGGY LIFTER/STACKER" on one line.
   model-code = bold navy, subtitle (an <h2>) reset to sit inline in a lighter blue. */
.machine-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.4em;
    text-align: center;

    background: #F4F4F4 0% 0% no-repeat padding-box;
    border-radius: 7px;
    opacity: 1;
    padding: 5px;
}

.machine-head .model-code,
.machine-head .subtitle {
    margin: 0;
    padding: 0;
    font-family: 'Blanc', sans-serif;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.machine-head .model-code {                       /* bold */
    color: var(--color-custom-1);           /* dark navy */
    font-family: 'Blanc-Bold', sans-serif;
}

.machine-head .subtitle {
    font-weight: 300;                       /* light */
    color: var(--color-custom-3);
    font-family: 'Blanc-Light', sans-serif;
    line-height: 1.5;
}

/* Reusable icon. SVGs paint with fill/stroke="currentColor", so setting `color`
   drives them — and changing `color` on hover recolors the icon.
   Wrap the icon in a link (or hover the icon itself). */
.bsc-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-custom-1);
    transition: color 0.2s ease, transform 0.2s ease;
}

a:hover .bsc-icon,
.bsc-icon:hover {
    color: var(--color-custom-3);
    transform: scale(1.15);
}

.object-fit-contain img{
    object-fit: contain!important;
}

/* "BACKSAVER IS AVAILABLE WORLDWIDE" / "SOLD IN OVER 60 COUNTRIES" — the
   same reusable WPBakery block on both Home and Find a Reseller (identical
   auto-generated classes on both pages, so one rule covers both). Fixed at
   61px with no responsive override: long unbreakable words ("BACKSAVER",
   "WORLDWIDE") don't wrap and overflow their column, getting clipped on
   phones ("BACKSAVE", "WORLDWID", "COUNTRIE"). clamp() instead of a fixed
   mobile breakpoint value: scales fluidly with viewport width so it never
   needs re-checking at some new in-between size, and still resolves to
   exactly 61px past the point where it already fit fine (~1000px+), so the
   desktop look is pixel-identical to before.
   `h2.w-text.` prefix (not just the bare custom class): Impreza re-injects
   this exact 61px!important as a page-specific inline <style> in <head>,
   which loads after this stylesheet, so an equal-specificity !important
   here would lose on source order — the extra tag+class raises specificity
   enough to win regardless of load order. */
h2.w-text.us_custom_83685ebf,
h2.w-text.us_custom_ff315cda{
    /* px, not rem, for the clamp bounds: this theme's root font-size is
       14px, not the usual 16px, so 3.8125rem would actually resolve to
       53.375px instead of the original 61px. */
    font-size: clamp(28px, 8vw, 61px) !important;
}

/* Same "WORLDWIDE" block: Impreza's `.full_height` sets a hard `height:100vh`.
   On a short viewport (landscape phone, ~500-600px tall) that leaves no room
   to grow if the heading ever needs more lines than the design assumed, and
   the text would get vertically clipped instead of the section just being
   shorter. min-height keeps the same fullscreen look on normal portrait
   phones/tablets but lets the box grow past 100vh if content ever needs it. */
@media (max-width: 900px){
    .overlay-multiply.full_height{
        height: auto;
        min-height: 100vh;
    }
}

.key-features-boxes .vc_column-inner{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 3rem;
}
.key-features-boxes .key-feature-box img{
    min-height: 26px !important;
    min-width: 26px !important;
    width: auto;
}

/* Fixed 3-column grid, no responsive override: below ~1024px the 3 columns
   stay desktop-width and overflow their container (confirmed at 768px —
   columns overflow ~78px) instead of narrowing, squeezing the six
   Flexibility/Lift Your Business/Stainless Steel/Easy to Use/Hygiene/Made in
   Holland boxes together with overlapping text. Matches the footer's
   breakpoint (also max-width:900px) for consistency. Collapsing straight to
   1 column rather than 2 — each box's paragraph runs ~40+ words, too long
   for a comfortable ~340px-wide column at the 768px tablet width. */
@media (max-width: 900px){
    .key-features-boxes .vc_column-inner{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.section-with-overlay:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 162, 237) 0%, #003877 100%) 0% 0% no-repeat padding-box;
    opacity: 0.21;
    z-index: 1;
    mix-blend-mode: multiply;
    border-radius: 30px;
}
.section-with-overlay.no-border-radius:before{
    border-radius: 0px!important;
}
.section-with-overlay .vc_column_container{
    z-index: 1;
}

/* === "Our Back Saving Machines" carousel cards === */

/* Card box keeps equal height across slides (bg/radius/padding come from the
   layout's inline style with !important, so we only add what's missing). */
.back-saving-machines .usg_vwrapper_1{
    height: 100%;
}

/* Title: uppercase navy. NOTE: single colour only — see the two-tone note. */
.back-saving-machines .post_title{
    margin: 0;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-custom-1);
}

/* Machine image: centred, uniform height, never stretched. */
.back-saving-machines .post_image{
    margin: 1rem 0 1.25rem;
    text-align: center;
}
.back-saving-machines .post_image img{
    width: auto;
    max-width: 100%;
    height: 400px;
    margin: 0 auto;
    object-fit: contain;
}

/* Intro text: navy, semibold, small. Clamped to 4 lines so cards stay even
   height regardless of how much text the client writes.
   Clamped on .machine_intro itself, not the inner .w-post-elm-value — some
   machines' intro HTML (e.g. BRL, which has real paragraphs + a bullet list)
   renders straight into .machine_intro with no .w-post-elm-value wrapper at
   all, so a selector scoped to that inner element silently misses those. */
.our-saving-machines-grid .machine_intro,
body.page-id-26 .machine_intro{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.back-saving-machines .machine_intro .w-post-elm-value{
    color: var(--color-custom-1);
    line-height: 1.6;
}


@media(max-width: 1024px){
    .back-saving-machines .post_image img{
        height: 250px;
    }
}

/* Two-tone card title from [machine_card_title]:
   line 1 = brand + model code (bold navy), line 2 = subtitle (light blue). */
.bsc-card-title__top,
.bsc-card-title__sub{
    display: block;
    font-size: clamp(1.3rem, 3vw, 1.5625rem);
    line-height: 1.2;
    text-transform: uppercase;
}
.bsc-card-title__top{
    color: var(--color-custom-1);
    font-family: 'Blanc-Bold', sans-serif;          /* dark navy */
}
.bsc-card-title__sub{
    color: var(--color-custom-3);
    font-family: 'Blanc-Medium', sans-serif;          /* light blue */
}

/* Carousel dots: active = solid blue, inactive = outlined ring. */
.back-saving-machines .owl-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 0px;
}
/* Strip Impreza/Owl defaults (padding, parent border/bg, scale) that cause the
   "double ring" so we control the dot entirely on the span. */
.back-saving-machines .owl-dots .owl-dot,
.back-saving-machines .owl-dots .owl-dot span{
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
}
.back-saving-machines .owl-dots .owl-dot span{
    display: block;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--color-custom-3);
    background: transparent;
    opacity: 1;
    transition: background-color 0.2s ease;
}
.back-saving-machines .owl-dots .owl-dot.active span{
    background: var(--color-custom-3) !important;
    border-color: var(--color-custom-3);
}

/* Home: 2-up CTA button rows ("Get a Price"/"All Machines" on the "LIFT
   WEIGHT, SAVE BACKS" banner; "Finder"/"All Machines" under Key Features and
   under the Back Saving Machines carousel). Each `.w-btn-wrapper` sizes to
   its own button's natural (desktop) width, so on a narrow phone column the
   two side by side don't both fit — the flex row shrinks the second one
   until its label wraps onto 2 lines while the first stays on 1 (uneven,
   reads as broken, not as a design choice). Stacking them full-width keeps
   every label on a single line and matches the full-width CTA pattern used
   elsewhere on the site (Get a Price submit, support form submit, etc.).
   Scoped to these 3 specific rows (not every `.w-hwrapper`+`.w-btn-wrapper`
   pair sitewide) since other pages haven't been re-checked yet. */
@media (max-width: 767px){
    .us_custom_dcd3fe1a,
    .us_custom_2205e243,
    .us_custom_b03640aa .w-hwrapper.align_center{
        flex-direction: column;
        align-items: stretch;
    }
    .us_custom_dcd3fe1a > .w-btn-wrapper .w-btn,
    .us_custom_2205e243 > .w-btn-wrapper .w-btn,
    .us_custom_b03640aa .w-hwrapper.align_center > .w-btn-wrapper .w-btn{
        display: block;
        width: 100%;
        text-align: center;
    }
}

.overlay-multiply .l-section-overlay{
    mix-blend-mode: multiply;
}

/* Machines archive: a reserved-for-later full-bleed photo band right before
   the footer (raw-HTML placeholder inside literally says "NOT DELETE" — no
   heading, no text, no CTA, nothing overlaid on the photo). Impreza's
   `.full_height` forces it to a hard 100vh regardless, so on a phone it's a
   full screen of scroll for a photo with zero informational payoff. Anchored
   on the placeholder's own custom class (the section itself has no unique
   hash) so this only targets this one reserved section, not other
   full_height photo sections that DO carry a heading/CTA (e.g. the "WORLDWIDE"
   band, which earns its full screen). */
@media (max-width: 767px){
    .l-section.full_height:has(.us_custom_909b2fd0){
        height: auto;
        min-height: 50vh;
    }
}

/* Footer's 4 columns (Sitemap / About Backsaver / Contact information /
   Quick contact) sit in one `.w-hwrapper.align_justify` sized for desktop.
   Same bug as the mobile mega-menu's nav+contact row: the row is marked
   `mobiles-cols_1` (WPBakery/Impreza's "1 column on mobile" class) but that
   never actually kicks in, so the 4 columns stay side by side, squeezed to
   ~80-140px each — narrow enough that even the Quick Contact inputs'
   placeholders ("Company*", "E-mail address*") get clipped. Worse than the
   mega-menu case: the <footer> itself ends up horizontally scrollable
   (confirmed via scrollWidth/clientWidth), so the last 1-2 columns are
   effectively invisible unless a visitor thinks to swipe the footer
   sideways. Stays broken through 768px, resolves itself by 1024px, so the
   fix is scoped to match. Stack to full-width rows instead of forcing 4
   equal columns into no room. */
@media (max-width: 900px){
    .bs-footer .w-hwrapper.align_justify{
        flex-direction: column;
    }
    .bs-footer .w-hwrapper.align_justify > .w-vwrapper{
        /* Impreza's own grid CSS caps each of the 4 desktop columns at
           `max-width:25%` — width:100% alone still loses to that (max-width
           wins whenever it's the smaller of the two), so it has to be
           overridden too or the column stays quarter-width. */
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem;
    }
    .bs-footer .w-hwrapper.align_justify > .w-vwrapper:last-child{
        margin-bottom: 0;
    }
}

.bs-footer hr{
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}
.bs-footer p{
    margin-bottom: 20px;
}
.bs-footer a{
    color: #FFFFFF;
}
.bs-footer a:hover{
    color: rgba(255, 255, 255, 0.8);
}

.wpcf7-form br{
    display: none;
}
.wpcf7-form .wpcf7-form-control-wrap{
    margin-bottom: 20px;
}
.wpcf7-form .wpcf7-submit{
    width: 100%;
}
.social-icons-footer a{
    display: inline-block;
    cursor: pointer;
}


/* "work hard, lift smart" slogan band: reveal-at-bottom effect, same idea as
   the live .nl site (https://www.backsaver.nl, class `.section-slogan` there
   too) but adapted to this theme. `position:sticky` + `bottom:0` reserves
   real space in the flow (unlike the live site's `position:fixed`, which
   depends on the viewport itself being the scrolling box — not true here,
   Impreza puts `overflow-y:auto` on <body> for the slide-out mobile menu).
   While the next section (the gradient bottom bar, later in DOM) scrolls
   over it, normal paint order covers the stuck slogan; once that bar's own
   height finishes scrolling past — the true end of the footer — nothing is
   left to cover it, revealing this band.

   `.l-footer:has(.section-slogan)` override below: sticky computes its
   "has scrolling started" reference against the nearest ancestor whose own
   `overflow` isn't `visible` — and Impreza's core `.l-footer{overflow:hidden}`
   (theme's own boxed-canvas clipping, unrelated to us) sits directly above
   this element, sitewide. Since the footer's OWN scrollTop never moves (it
   travels with the page, it doesn't scroll internally), sticky measured
   against it never fires — confirmed empirically: the band tracked scroll
   position 1:1 the whole way down instead of ever freezing. Scoped with
   `:has()` to footers that actually contain this band, so every other
   page's footer keeps Impreza's default clipping untouched. */
.section-slogan{
    position: sticky;
    bottom: 0;
}
.l-footer:has(.section-slogan){
    overflow: visible;
}

/* Footer bottom bar: blue-to-red linear gradient (stops from the design). */
.bs-footer-botton{
    background: linear-gradient(
        to right,
        #2BA9DB 0%,
        #2BA9DB 10%,
        #279CCF 20%,
        #1D7DB6 30%,
        #155F9E 40%,
        #0E4388 50%,
        #8F3A56 60%,
        #E3342E 70%,
        #FF311E 80%,
        #FF311E 90%,
        #FF311E 100%
    );
}

#page-header{
    padding-top: 40px;
    padding-bottom: 40px;
    transition: transform 0.3s ease;
}

/* Auto-hide header (JS in header-scroll.js adds/removes .bsc-header-hidden):
   translate3d, not top/margin — #page-header is position:fixed (out of
   flow) so this never reflows the page. Impreza uses this exact technique
   for its own "above" header position, so it's a safe, precedented way to
   move this element. */
#page-header.bsc-header-hidden{
    transform: translate3d(0, -100%, 0);
}

/* Logo mega-menu panel: full-width, starts at the very top of the window,
   but sits BEHIND the header bar (z-index:-1). padding-top pushes the panel's
   content below the header while its background still reaches top:0.
   #page-header is position:fixed, which is its own stacking context, so the
   negative z-index lands the panel behind the bar yet above the page.
   Applies to ANY menu item tagged with the "logo-menu" CSS class (set per-item
   in Appearance → Menus), not just Home — client can add it to other items. */
.w-nav.type_desktop .logo-menu > .w-nav-list.level_2{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*width: 100vw;
    max-width: 100vw;*/
    margin: 0;
    padding-top: var(--bsc-header-h, 130px)!important;   /* ⬅️ ADJUST: header bar height */
    z-index: -1;
    border-radius: 0px 0px 30px 30px!important;
}

/* When the mega-menu is open (JS adds .submenu-logo-open), the panel has a
   light background, so show the COLOUR logo (1st img) and hide the white one
   (2nd img) — overriding Impreza's transparent-header rule. */
#page-header.submenu-logo-open.bg_transparent:not(.sticky) .w-image.with_transparent .w-image-h > :first-of-type{
    display: block;
}
#page-header.submenu-logo-open.bg_transparent:not(.sticky) .w-image.with_transparent .w-image-h > :last-of-type{
    display: none;
}

/* The .logo-menu item's title is a hamburger-icon SVG set as its menu-item
   title text (not a real label). When Impreza adds .opened to the item
   (its own core menu.js, on click/hover), swap that icon for a close "X" —
   the inline SVG is hidden and a background-image takes its place, since
   CSS can't rewrite an inline SVG's markup directly. */
.w-nav-item.logo-menu.opened > .w-nav-anchor .w-nav-title svg{
    display: none;
}
.w-nav-item.logo-menu.opened > .w-nav-anchor .w-nav-title:before{
    content: "";
    display: inline-block;
    width: 14.85px;
    height: 14.849px;
    background-image: url("assets/icons/close-x.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bs-megamenu{
    padding-top: 1rem!important;
}
.bs-megamenu .my-backsaver{
    font-family: 'Blanc-Light', sans-serif;
    margin-top: 20px;
}
.bs-megamenu .my-backsaver .w-text-value{
    display: flex;
    align-items: center;
}
.bs-megamenu .my-backsaver .w-text-value:before{
    content: "";
    background-image: url("assets/icons/profile.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.bs-megamenu .l-section-h {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.bs-megamenu  .megamenu-contact-links{
    font-size: 15px;
    font-family: 'Blanc-Regular', sans-serif;
    text-transform: capitalize;
    line-height: 2!important;
}
.bs-megamenu  .megamenu-contact-links a{
    text-transform: lowercase;
}
.since-1948-logo{
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin-bottom:  calc(-4rem - 55px);
}

/* On the mobile mega-menu (nav switches to "type_mobile" at this same 1024px
   breakpoint elsewhere in this file) the two nav columns stack into one, so
   there's no bottom-right dead space left for the badge to float in — it was
   landing on top of the "About Us / Exibitions / ..." list and the
   Machines/Finder/In Stock links below it. Drop it back into normal flow,
   centred, right after the nav/contact column instead of pinned to a corner
   that no longer exists. */
@media (max-width: 1024px){
    .bs-megamenu .since-1948-logo{
        position: static;
        right: auto;
        bottom: auto;
        margin: 2rem auto 0.5rem;
    }
    .bs-megamenu .since-1948-logo .w-image-h{
        margin: 0 auto;
    }
}

/* Phones (narrower than the 1024px tablet range above, which already looks
   fine): the badge is purely decorative and just adds scroll-height to an
   already-tall menu, so drop it entirely instead of shrinking it — one less
   thing to keep balanced against the nav list below it. */
@media (max-width: 767px){
    .bs-megamenu .since-1948-logo{
        display: none;
    }
}

/* About Us: a second, unrelated "SINCE 1948" seal (`us_custom_e8cab106`, a
   WPBakery image with its own absolute position + a large negative
   margin-bottom, injected !important via Impreza's inline <style> — same
   out-specificity requirement as the [[impreza-inline-style-important-gotcha]]
   memory: tag+class needed to beat it regardless of load order). On desktop
   the negative margin deliberately bleeds it from the hero section into the
   next one as a decorative straddle. Two confirmed collisions once the page
   narrows: at ≤767px it lands directly on the "OUR MISSION" heading text
   below it; at 768-1024px (where the hero's Contact Us/Machines buttons have
   reflowed closer together) it overlaps the "Machines" button instead.
   Same two-tier treatment as the .since-1948-logo badge above, for the same
   reason: hide outright on phones (pure decoration, nothing lost), drop back
   into normal flow on tablet so it can't overlap anything. */
@media (min-width: 768px) and (max-width: 1024px){
    div.w-image.us_custom_e8cab106{
        position: static !important;
        margin-bottom: 2rem !important;
        text-align: center;      /* the wrapper is already full-width, so margin:auto has no space to centre into — centre the inline <img> instead */
    }
}
@media (max-width: 767px){
    div.w-image.us_custom_e8cab106{
        display: none !important;
    }
}

/* Phones: the nav list (About Us…Contact Us) and the contact-links column
   ("Call Us" / "E-Mail Us") sit side by side in a 2-column .w-hwrapper sized
   for the desktop hover mega-menu. Below ~360px that leaves so little width
   per column that the unbreakable "info@backsaver.nl" (no spaces to wrap on)
   overflows its column and gets clipped by the fixed panel. Stack the two
   columns instead — contact info moves below the nav list, each at full
   width, so long strings just wrap/fit normally. */
@media (max-width: 767px){
    .bs-megamenu .w-hwrapper{
        flex-direction: column;
    }
    .bs-megamenu .w-hwrapper > .w-vwrapper{
        width: 100%;
    }
    .bs-megamenu .megamenu-contact-links{
        margin-top: 1.5rem;
        text-align: center;
    }
}

/* Phones: open the logo's mega-menu (About Us / Exibitions / … + contact +
   My Backsaver) by default instead of requiring an extra tap on the small
   arrow next to the logo — on a small screen that submenu IS the mobile
   menu's main content, so hiding it behind a second toggle just adds a step.
   Impreza shows/hides `.w-nav-list.level_2` by toggling display/visibility
   via a JS-added `.opened` class on the parent `.logo-menu` item; forcing
   both here makes it visible regardless of that class. The little arrow
   toggle (`.w-nav-arrow`) no longer does anything useful once it's always
   open, so it's hidden too. */
@media (max-width: 767px){
    .logo-menu .w-nav-list.level_2{
        display: block !important;
        visibility: visible !important;
    }
    .logo-menu .w-nav-arrow{
        display: none;
    }
}

/* Mobile fullscreen menu (single flat list: About Us…Get a Price): show the
   BACKsaver logo above "About Us" for brand continuity now that the panel is
   just a plain WP menu with no logo of its own. Tried a ::before pseudo-item
   first, but something in Impreza's own list-clearfix rules for
   `.w-nav-list::before` collapses its height to 0 regardless of !important —
   a plain background-image + extra top padding on the <ul> sidesteps that
   fight entirely (backgrounds don't need generated-content box sizing).
   Scoped to this exact nav instance (`ush_menu_2`, the fullscreen mobile
   menu) so the desktop header's own logo is untouched. */
.ush_menu_2 .w-nav-list.level_1{
    background-image: url("../../uploads/2026/06/Group-250.svg") !important;
    background-repeat: no-repeat !important;
    /* Left-aligned, not centred: at the narrowest phones (~320px) a centred
       150px-wide logo runs right into the close "×" button's top-right tap
       target (63×63px). Pairing logo-top-left / close-top-right is a common
       mobile-menu pattern and guarantees no overlap at any width. */
    background-position: top 20px left 24px !important;
    background-size: 140px auto !important;
    padding-top: 90px !important;
}

/* Hide only Impreza's default search icon (not the whole .w-search, so its
   form still opens when the custom SVG triggers it via JS). */
.w-search.ush_search_1 > .w-search-open{
    display: none;
}

/* Search form: drop as a full-width row right below the header items.
   Anchor it to the white bar instead of the tiny .w-search icon. */
.w-hwrapper.header-nav-section{
    position: relative;
}
.w-search.ush_search_1{
    position: static;   /* so the form's offset parent becomes the bar */
}
.w-search.ush_search_1.layout_fullwidth.active .w-search-form{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    height: 56px;                    /* visible row height */
    border-radius: 0 0 14px 14px;    /* match the bar's bottom corners */
}

/* While the search is open, flatten the bar's bottom corners so it connects
   seamlessly with the search row below it. */
.w-hwrapper.header-nav-section:has(.w-search.ush_search_1.active){
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Search form: 90% opaque white background. */
.w-search.ush_search_1 .w-search-form{
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Magnifier icon (inline SVG injected by JS), tinted via currentColor.
   Client feedback (2026-07-23): this used to be a plain SVG with
   pointer-events:none — purely decorative, no way to submit the search
   except pressing Enter. Now a real <button type="submit"> in the same
   spot/size, so clicking it submits exactly like Enter did.
   Follow-up (2026-07-23): two corrections after first review —
   1) The button only became visible on :hover. Root cause: Impreza's own
      global button skin (`[type="submit"]:not(.w-btn):not(.button)`, in an
      inline <style> block, not this file) sets `color:#fff !important` at
      rest AND swaps the background to var(--btn-hover-background) (the
      accent colour) on hover — so at rest it was a white icon on this
      form's near-white background (invisible), and only readable once
      hover revealed a colour behind it. Needs !important here too to win
      against their !important, in both the resting and hover states —
      specificity doesn't decide between two `!important` declarations,
      only source order / who declares it, so this rule has to explicitly
      re-assert color/background at both states rather than relying on
      being "more specific".
   2) Moved from the start to the end of the field (client-requested
      layout), placed clear of the existing .w-search-close button (which
      sits in the outer ~50px of the field, positioned by Impreza core CSS)
      so the two icons don't overlap. */
.w-search.ush_search_1 .w-search-form .bsc-search-submit{
    position: absolute;
    inset-inline-end: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none !important;
    color: var(--color-custom-1) !important;
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s ease;
}
/* Doubled .bsc-search-submit (harmless, same element) purely to bump
   specificity past Impreza's competing hover rule for [type="submit"]
   (.no-touch [type="submit"]:not(.w-btn):not(.button):hover, in an inline
   <style> block that loads AFTER this stylesheet) — both rules are 5
   selectors deep with !important on color, so without this the tie went to
   whichever loads later (theirs), reverting color to white on hover and
   making the icon disappear again against the near-white search bar. */
.w-search.ush_search_1 .w-search-form .bsc-search-submit.bsc-search-submit:hover,
.w-search.ush_search_1 .w-search-form .bsc-search-submit.bsc-search-submit:focus-visible{
    background: none !important;
    color: var(--color-custom-3) !important;
}
.w-search.ush_search_1 .w-search-form .bsc-search-submit svg{
    width: 100%;
    height: 100%;
    display: block;
}

/* Input + placeholder: Open Sans 12px navy (Impreza forces color:inherit
   !important, so we override colour with !important). */
.w-search.ush_search_1 .w-search-form input{
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: var(--color-custom-1) !important;
    padding-inline-start: 1.25rem;
    padding-inline-end: 6rem;   /* room for the magnifier button + close button */
}
.w-search.ush_search_1 .w-search-form input::placeholder{
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: var(--color-custom-1) !important;
    opacity: 1;
    text-transform: uppercase;       /* "Search:" -> "SEARCH:" */
}

/* === Machines hero slider ([machines_slider]) ===
   Layout: fixed content (left 35%) + image stage (right 65%) + progress bar. */
.bsc-machines-slider{
    position: relative;
    display: flex;
    align-items: center;          /* (3) content sits near the top */
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;                 /* clip the machine's spill at the section edges */
}

/* LEFT (~30%): small editorial text block, top-aligned, ABOVE the machine. */
.bsc-ms__content{
    flex: 0 0 30%;
    /* Flex items default to min-width:auto, meaning they refuse to shrink
       below their own content's intrinsic minimum width — regardless of
       flex-basis. Some machines' titles (e.g. "PALLET LIFTER/STACKER", a
       long unbreakable run) need more than 30% of the row's width at
       tablet/laptop sizes, so without this the whole content block silently
       grew past 30% (measured: 335px instead of 276px at 1024px width for
       PL), pushing content+stage past 100% combined and forcing the image
       stage to flex-wrap onto its own line below the text instead of beside
       it — a large, broken-looking gap that only appeared for machines with
       longer titles, not a CSS bug that's visible for every machine. */
    min-width: 0;
    position: relative;
    z-index: 2;                       /* (10) text stays above the invading machine */
    padding-top: 1rem;
    transition: opacity 0.25s ease;
}
.bsc-ms__content.is-fading{
    opacity: 0;
}

/* RIGHT (~70%): image stage. overflow:visible lets the huge machine invade the
   centre / cross toward the text; the slider itself clips the outer edges.
   (1/2) Tall stage + scaled-up active = enormous, product-first machine. */
.bsc-ms__stage{
    flex: 0 0 70%;
    position: relative;
    z-index: 1;
    height: 700px;
    overflow: visible;
}
.bsc-ms__img{
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: flex-end;                        /* (8) grounded */
    justify-content: center;                       /* same anchor for every slot — see note below */
    padding-bottom: 1.5rem;
    opacity: 0;                                   /* hidden by default (2 machines beyond prev/next-far) */
    transform: translateX(0) scale(0.55);
    transform-origin: bottom center;
    transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
    pointer-events: none;
}
.bsc-ms__img img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
/* Every slot below (active/next/prev/next-far/prev-far) shares the same
   justify-content/transform-origin (centre) and only ever differs by
   translateX + scale + opacity + filter — all animatable properties. Slot
   changes used to also flip justify-content (center/flex-start/flex-end) to
   anchor each state, but that property can't be transitioned, so a slide
   would "pop" sideways the instant the class changed instead of gliding —
   the opposite of the "rotating continuous carousel" the client asked for.
   Now every one of the 5 machines moves one slot toward/away from the
   centre on every step via a plain translateX, reading as one physical belt
   rotating rather than independent per-image crossfades. */

/* (1/2/10) Active: centred, foreground, hero-sized, never cropped.
   Was scale(1) (filled the stage box edge to edge, ~935px at 1440 wide) —
   client feedback (2026-07-23): carousel reads as 'opgepropt' (crammed).
   Measured why: at scale(1) the active image's rendered box overlapped
   ~92-99% of the prev/next preview boxes (they sit in the same 935px-wide
   stage, offset only by translateX), so the 'peeking from either side'
   effect in the comment below was true in code but invisible in practice —
   almost the entire preview was hidden behind the active machine, and what
   little showed was already inside the mask's fade-to-transparent zone.
   scale(0.8) alone frees the letterboxed edges without shrinking the belt
   the previews travel on. */
.bsc-ms__img.is-active{
    opacity: 1;
    transform: translateX(0) scale(0.8);
    z-index: 2;
}
/* (7/8/10) Next/prev: small previews peeking from either side, desaturated,
   behind — symmetric so 3 machines (prev/active/next) read as one carousel. */
.bsc-ms__img.is-next,
.bsc-ms__img.is-next-far{
    /* Fade toward the outer (right) edge instead of getting hard-clipped by
       the slider's own overflow:hidden — dissolves rather than cuts off.
       Shared (not transitioned) between near/far so crossing between them
       never has to animate the mask itself, only position/scale/opacity. */
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.bsc-ms__img.is-prev,
.bsc-ms__img.is-prev-far{
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.bsc-ms__img.is-next{
    opacity: 0.32;
    transform: translateX(340px) scale(0.45);
    filter: blur(1px) grayscale(0.5);
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
.bsc-ms__img.is-prev{
    opacity: 0.32;
    transform: translateX(-340px) scale(0.45);
    filter: blur(1px) grayscale(0.5);
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
/* Off-stage reserve slots: fully invisible, but already parked one step
   further out so that when they become the next/prev machine they slide
   INTO place from here, instead of popping in from dead-centre. */
.bsc-ms__img.is-next-far{
    opacity: 0;
    transform: translateX(630px) scale(0.3);
    filter: blur(1px) grayscale(0.5);
    z-index: 0;
}
.bsc-ms__img.is-prev-far{
    opacity: 0;
    transform: translateX(-630px) scale(0.3);
    filter: blur(1px) grayscale(0.5);
    z-index: 0;
}

/* (9) Short progress bar, centred in the container. */
.bsc-ms__progress{
    flex: 0 0 28%;
    margin: 1.5rem auto 3rem;                     /* own row, centred; bottom gap fits the grid icon */
    position: relative;
    height: 2px;
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    touch-action: none;
}
.bsc-ms__progress-thumb{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-custom-3);
    transition: transform 0.4s ease;
    will-change: transform;
}

/* One static, individually-clickable "jump to this machine" tick per stop —
   the bar previously only supported free drag/click-anywhere, with no visual
   cue that discrete stops (not a continuous scrub) are what actually exist.
   A real <button> (reset to look like a plain dot) so the bar becomes
   keyboard/screen-reader reachable too, which it wasn't before. Hit area
   (24px) is much bigger than the visible dot (6px) for an easy tap target. */
.bsc-ms__progress-tick{
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 1;
}
.bsc-ms__progress-tick::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-custom-3);
    opacity: 0.35;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.bsc-ms__progress-tick:hover::before,
.bsc-ms__progress-tick:focus-visible::before{
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.3);
}
/* The sliding thumb already marks the active stop — hide this tick's own
   static dot there instead of drawing two overlapping dots on top of each other. */
.bsc-ms__progress-tick.is-active::before{
    opacity: 0;
}

/* Decorative grid icon: pinned bottom-left, vertically centred on the
   progress bar line (bar sits 2rem above the container bottom). */
.bsc-ms__grid{
    position: absolute;
    left: 0;
    bottom: 3rem;
    transform: translateY(50%);
    display: block;
    width: 80px;
    z-index: 3;
}
.bsc-ms__grid img{
    display: block;
    width: 80px;
    height: auto;
}

/* LEFT content typography. (4) Tight vertical rhythm so it reads as one unit. */
/* Category label "Machines". */
.bsc-mc-eyebrow{
    margin: 0 0 0.5rem;
    font-family: 'Blanc-Light', sans-serif;
    font-size: 30px;
    line-height: 1.1;
    color: var(--color-custom-1);
    text-transform: uppercase;
}
/* Heading: model code + subtitle on the same line (baseline-aligned). */
.bsc-mc-title{
    margin: 0 0 1rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.35em;
    line-height: 1.1;
    padding-top: 0px;
    /* Same min-width:auto flex trap as .bsc-ms__content, one level deeper —
       this is itself a flex container, so it needs its own override too. */
    min-width: 0;
}
.bsc-mc-code{
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 38px;
    color: var(--color-custom-1);
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.bsc-mc-sub{
    font-family: 'Blanc-Medium', sans-serif;
    font-size: 38px;
    color: var(--color-custom-3);
    text-transform: uppercase;
    /* Some subtitles are one long unbreakable run at this size (e.g.
       "LIFTER/STACKER" — a slash isn't a guaranteed break point in every
       browser) which was part of what forced .bsc-ms__content past its 30%
       flex-basis. Let it break mid-word as a last resort now that min-width
       is no longer propping the box open to fit it on one line. */
    overflow-wrap: break-word;
}
/* (6) Description: controlled width, multi-line, enough weight to balance.
   Clamped to 4 lines so the slide's text column doesn't grow taller than the
   image stage on longer intros. */
.bsc-mc-intro{
    max-width: 38ch;
    margin: 0 0 1.25rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-custom-1);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bsc-mc-actions{
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Tablet/small-laptop band (768-1200px): Impreza's own header (#header,
   position:fixed, 130px tall — confirmed via getBoundingClientRect(), same
   130px at every width from 1440px down to 768px, it never changes) sits on
   top of the whole page. The WPBakery row that wraps this shortcode on the
   Machines page shrinks its own top spacing a lot in this band (measured:
   .bsc-ms__content's top position drops from ~288px on desktop to ~85-106px
   here), which is more than enough room on desktop but leaves the "MACHINES"
   eyebrow label and part of the title rendered UNDERNEATH the fixed header
   in this band specifically — confirmed by direct measurement at several
   widths in this range, not just a visual guess. Compensated here (rather
   than editing the page's own WPBakery row JSON) to keep the fix contained
   to this shortcode's own CSS. Sized for the worst case in this band (768px,
   where the gap is smallest) — slightly more clearance than strictly needed
   at the 992-1200px end of the band, which is harmless. */
@media (min-width: 768px) and (max-width: 1200px){
    .bsc-machines-slider{
        padding-top: 90px;
    }
}

/* Mobile (<768px): content (30%) and stage (70%) no longer fit side by side
   at this width, so they already wrap onto separate rows — but each kept its
   original desktop percentage width instead of using the row's now-full
   width. The stage especially suffers: at ~70% of a narrow phone screen it's
   only ~230px wide while staying 700px tall (unchanged), so the "grounded,
   real height, never upscaled" active image (by design, sized for a wide
   desktop stage) only fills a small fraction of that height — confirmed via
   getBoundingClientRect() to leave ~500px of empty space above a tiny
   product photo, pushing it below the fold entirely. Once each block is
   already on its own row there's no reason to keep it at a fraction of the
   width — go full width, and size the stage with `aspect-ratio` (scales with
   the viewport) instead of a fixed desktop px height. */
@media (max-width: 767px){
    .bsc-machines-slider{
        flex-direction: column;
    }
    .bsc-ms__content,
    .bsc-ms__stage{
        flex: 0 0 100%;
        width: 100%;
    }
    .bsc-ms__stage{
        height: auto;
        aspect-ratio: 4 / 3;
        /* The parent row has `gap:0` (correct on desktop, where content and
           stage sit side by side and need no vertical gap) — now that they
           stack, that leaves the stage glued directly under the CTA buttons
           with no breathing room. */
        margin-top: 1.5rem;
    }
    /* The "grounded, shifted left to invade the centre" treatment was tuned
       for a wide desktop stage; in a compact aspect-ratio box it just pushes
       the image off-centre for no reason — centre it instead. */
    .bsc-ms__img{
        align-items: center;
        padding-bottom: 0;
    }
    .bsc-ms__img.is-active{
        transform: none;
    }
    /* The small prev/next previews need a wide stage to sit off to either
       side without overlapping the active image; in the narrow mobile box
       they would just sit on top of it. The progress bar below remains the
       navigation control (drag or tap to scrub), and autoplay keeps rotating
       the single visible machine same as on desktop. */
    .bsc-ms__img.is-next,
    .bsc-ms__img.is-prev,
    .bsc-ms__img.is-next-far,
    .bsc-ms__img.is-prev-far{
        display: none;
    }
    /* Decorative grid icon anchored to the stage's bottom-left: now that the
       stage is a short aspect-ratio box instead of 700px tall, it no longer
       has room and would overlap the progress bar/content below it. */
    .bsc-ms__grid{
        display: none;
    }
    /* `flex:0 0 28%` sizes the MAIN axis, which is width in the desktop row
       layout but becomes height once the slider switches to a column — 28%
       of the container's indefinite auto height resolves to 0, collapsing
       the progress bar to nothing (it disappeared entirely on phones).
       Reset the basis and size it on the cross axis (width) instead. */
    .bsc-ms__progress{
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 0.75rem;               /* was 3rem to clear the grid icon, which is hidden now */
        /* The 2px line is a precise, hard-to-hit target on a touchscreen.
           Grow the box (the actual drag/tap surface, per machines-slider.js
           pointerdown) to a ~44px-tall hit area via padding, and move the
           visible line to its own ::before sized independently — this theme
           sets `box-sizing:border-box` globally, so a plain `height:2px` +
           padding here would count the padding AGAINST that 2px (leaving a
           0px content box), which is exactly why background-clip:content-box
           painted nothing and the line vanished, leaving only the dot. */
        height: auto;
        padding: 21px 0;
        background: none;
    }
    .bsc-ms__progress::before{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.12);
        pointer-events: none;
    }
    /* Hint that the bar below is draggable — on desktop the "next" preview
       peeking in from the side already implies "there's more, click it"; that
       preview is hidden on mobile ([[.bsc-ms__img.is-next]] above), so
       without a written hint the enlarged-but-still-thin bar isn't obviously
       interactive. Generated content (no markup change), matching how this
       file already injects small UI-only bits (e.g. the mobile menu logo,
       the accordion's "-" icon) without touching the shortcode's PHP. */
    .bsc-machines-slider::after{
        content: "Drag to explore";
        display: block;
        flex: 0 0 100%;
        margin-top: -0.5rem;
        font-family: 'Open Sans', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-custom-3);
        opacity: 0.8;
    }
}

/* === Machines full-width carousel ([machines_slider_full]) ===
   Moved entirely into the backsaver-core plugin 2026-09-07 (markup, JS,
   CSS, its own grid-icon.svg copy) — see
   wp-content/plugins/backsaver-core/assets/machines-carousel.css and
   includes/machines-carousel.php for the current version. Nothing for
   this shortcode lives in this theme any more; [machines_slider] above
   (.bsc-ms__*) is untouched and still lives here as before. */

/* === Machine Finder ([machine_finder]) ===
   Typography / colour / look only. Layout-state (sidebar reflow, mobile drawer)
   ships in the plugin's assets/finder.css. Screenshots are the source of truth.
   Result card titles reuse [machine_card_title] -> .bsc-card-title__top/__sub. */

/* Single proportional type/control scale for the filter + cards. 1 at the
   full-desktop design; the tablet/laptop breakpoints below dial it down so the
   text shrinks evenly (instead of overflowing) when columns get narrow. */
.bsc-finder{
    --bsc-fscale: 1;
}

/* --- Top bar: white rounded strip; title centred, FILTER pinned top-left --- */
.bsc-finder__bar{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Heading "MACHINE FINDER": centred, 30px Blanc-Bold, MACHINE navy / FINDER blue. */
.bsc-finder__title{
    margin: 0;
    font-size: var(--h2-font-size, inherit);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.bsc-finder__title-a{
    font-family: 'Blanc-Bold', sans-serif;
    color: var(--color-custom-1);
}
.bsc-finder__title-b{
    font-family: 'Blanc-Bold', sans-serif;
    color: var(--color-custom-3);
}

/* "FILTER" toggle: small control, sliders icon + label. Not a CTA. */
.bsc-finder__toggle{
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.bsc-finder__toggle::before{
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: var(--color-custom-1);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>') center / contain no-repeat;
}
.bsc-finder__toggle-label{
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 15px;
    color: var(--color-custom-1);
    text-transform: uppercase;
}
/* Active-count badge: not shown in the design (logic kept, just hidden). */
.bsc-finder__toggle-count{
    display: none;
}

/* Below ~550px, the centred title ("Machine Finder", fixed 30px) and the
   absolutely-positioned "Filter" toggle (`left:1.5rem`) physically overlap —
   confirmed via getBoundingClientRect() (56px of overlap at 375px). Centring
   assumed the toggle sits in empty margin either side of the title; once the
   column narrows enough that the title's own text reaches that margin, an
   absolutely-positioned sibling can't be "pushed out of the way" by layout.
   Switch to a plain left-to-right flex row instead of fighting the maths of
   how much padding would keep the centred text clear at every width — the
   toggle becomes a normal flex item (no more overlap risk by construction)
   and `order` puts it first without touching the shortcode's DOM order. */
@media (max-width: 640px){
    .bsc-finder__bar{
        justify-content: flex-start;
        gap: 0.75rem;
    }
    .bsc-finder__toggle{
        position: static;
        transform: none;
        order: -1;
    }
    .bsc-finder__title{
        font-size: clamp(16px, 5.5vw, 22px);
        text-align: left;
    }
}

/* --- Sidebar: white, rounded, airy, hairline light-blue separators --- */
.bsc-finder__filters{
    background: #fff;
    border-radius: 24px;
    padding: 32px;
}
.bsc-finder__form{
    margin: 0;
}
/* Active-filter chips: not shown in the design (logic kept, hidden). */
.bsc-finder__chips{
    display: none;
}

.bsc-finder-facet{
    border: 0;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--color-custom-3);   /* light-blue hairline */
}
.bsc-finder-facet:last-of-type{
    border-bottom: 0;
    margin-bottom: 0;
}
/* Filter group title: 25px Blanc-Bold navy. */
.bsc-finder-facet__title{
    margin: 0 0 1rem;
    padding: 0;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: calc(25px * var(--bsc-fscale));
    color: var(--color-custom-1);
    text-transform: uppercase;
}
.bsc-finder-facet__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.bsc-finder-facet__item{
    margin: 0;
}
.bsc-finder-facet__label{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}
/* Option label: 25px Blanc-Regular light blue (keep original capitalisation). */
.bsc-finder-facet__name{
    font-family: 'Blanc-Regular', sans-serif;
    font-size: calc(20px * var(--bsc-fscale));
    line-height: 1.2;
    color: var(--color-custom-3);
}
/* Below 1024px (mobile drawer + tablet/small-laptop sidebar), 25px per
   option (e.g. "Standard Bin / Big Box") reads oversized for a checkbox list
   and forces most labels onto 2 lines — sized down directly rather than via
   --bsc-fscale (that variable also drives the checkbox and other card
   elements not part of this request). Confirmed by the user at 767px; widened
   to 1024px per their follow-up. */
@media (max-width: 1024px){
    .bsc-finder-facet__name{
        font-size: 15px;
    }
    .bsc-finder-facet__title{
        font-size: 16px;
    }
}
/* Per-option count: not shown in the design (smart-count logic kept, hidden). */
.bsc-finder-facet__count{
    display: none;
}

/* Square checkbox: thin blue border, white fill, green check when selected.
   appearance:none was only prefixed for -webkit-, so Firefox/other engines fell
   back to their native control paint — on browsers/OSes whose accent theme is
   green, that native checked box rendered underneath our ::after checkmark,
   showing through as an offset "shadow" (client report: "strange green
   shadow" on checked boxes). -moz-appearance plus an explicit accent-color
   and box-shadow reset fully suppress any native paint so only our custom
   white box + green check ever render. */
.bsc-finder-facet__label input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    accent-color: var(--color-custom-3);
    flex: 0 0 auto;
    width: calc(24px * var(--bsc-fscale));
    height: calc(24px * var(--bsc-fscale));
    margin: 0;
    border: 1px solid var(--color-custom-3);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    position: relative;
}
.bsc-finder-facet__label input:not([type=submit]){
    color: var(--color-custom-1);
}
/*
.bsc-finder-facet__label input[type="checkbox"]:checked::after{
    content: "";
    position: absolute;
    left: calc(8px * var(--bsc-fscale));
    top: calc(3px * var(--bsc-fscale));
    width: calc(6px * var(--bsc-fscale));
    height: calc(12px * var(--bsc-fscale));
    border: solid #43b02a; 
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}*/

/* --- Product card --- */
.bsc-finder-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);   /* very subtle elevation */
}
.bsc-finder-card:hover{
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);   /* very subtle elevation */
}
/* Head row: two-tone title (left) + info icon (right). */
.bsc-finder-card__head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
/* Force the exact 25px from the spec inside Finder cards (the shared
   .bsc-card-title rule uses a responsive clamp). */
.bsc-finder-card .bsc-card-title__top,
.bsc-finder-card .bsc-card-title__sub{
    font-size: calc(25px * var(--bsc-fscale));
}
/* Info icon: small circle, blue border + blue glyph. */
.bsc-finder-card__info{
    flex: 0 0 auto;
    width: calc(28px * var(--bsc-fscale));
    height: calc(28px * var(--bsc-fscale));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-custom-3);
    border-radius: 50%;
    background: #fff;
    color: var(--color-custom-3);
    font-family: 'Blanc-Bold', sans-serif;
    font-size: calc(15px * var(--bsc-fscale));
    line-height: 1;
    cursor: pointer;
}
/* Image area: large, centred, never cropped or stretched. */
.bsc-finder-card__media{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    margin: 1rem 0 1.25rem;
}
.bsc-finder-card__media img{
    width: auto;
    max-width: 100%;
    height: 280px;
    margin: 0 auto;
    object-fit: contain;
}
/* Bottom row: "More information" (left) + "GET A PRICE" (right). */
.bsc-finder-card__actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}
.bsc-finder-card__more{
    font-family: 'Blanc-Regular', sans-serif;
    font-size: calc(17px * var(--bsc-fscale));
    color: var(--color-custom-1);
    text-decoration: none;
}
.bsc-finder-card__more{
    white-space: nowrap;
}
.bsc-finder-card__price{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(38px * var(--bsc-fscale));
    padding: 0 calc(24px * var(--bsc-fscale));
    border-radius: 8px;
    border: 1px solid var(--color-custom-1);
    background: #fff;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: calc(20px * var(--bsc-fscale));
    color: var(--color-custom-1);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.bsc-finder-card__price:hover{
    background: var(--color-custom-1);    
    color: #FFFFFF!important;        /* very subtle */
}

.no-paddings-top,
.no-paddings-top .l-section-h{
    padding-top: 0px!important;
}

.bsc-download{
    display: flex;
    align-items: center;
}
.key-feature-box p{
    font-size: 15px;
    font-weight: 700;
}

.machine_applications_containers h3,
.machine_applications_containers h4,
.machine_applications_containers h5,
.machine_applications_containers h6{
    margin-bottom: 0px;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 22px!important;
}
.machine_applications_containers{
    font-size: 22px;
}

/* === Single machine page (Impreza single template for the `machines` CPT) ===
   Shared builder template applied to every machine post — these selectors
   are all anchored on hashes confirmed identical across posts (e.g. BRL and
   ST), so one fix here covers every machine page, not just one. */

/* Hero: "Drawing (.PDF)" / "Find a Reseller" / "Get a Price" sit in a row
   with `flex-wrap:nowrap` — sized for a wide desktop column. Below ~1024px
   the three no longer fit and "Get a Price" (the primary CTA) overflows past
   the viewport, clipped invisible by an ancestor's overflow:hidden rather
   than wrapping — confirmed at both 375px (right edge at x:411) and 768px
   (x:802). Not scoped to a mobile breakpoint: flex-wrap:wrap is a no-op
   whenever the three already fit on one line (wide desktop columns), so
   there's no reason to gate it to narrow widths only. */
.w-hwrapper.valign_middle.align_none{
    flex-wrap: wrap;
}

@media (max-width: 767px){
    /* Hero: gallery/360° viewer thumb strip, then a `.w-separator` sized to
       vertically align this column with a taller image in the 2-column
       desktop layout. The 150px is set via an inline `style="height:150px"`
       (WPBakery's own "custom height" separator setting, not a stylesheet
       rule) — inline style beats any non-!important CSS regardless of
       selector specificity, so this needs !important just to be seen at all.
       Once columns stack there's no image to align to — it's just 150px of
       dead air above the machine title. */
    .us_custom_c88915dd .w-separator.size_custom{
        height: 24px !important;
    }
    /* Gallery+description section further down: a small "BACKsaver" logo
       mark is `position:absolute;left:0` (injected !important via Impreza's
       own inline <style> — see [[impreza-inline-style-important-gotcha]],
       needs tag+class to out-specificity it regardless of load order). On a
       wide desktop column that lands in empty margin above-left of the
       heading; at mobile column widths there's no such margin, so it prints
       directly on top of the "<model> <name>" title. Drop it back into
       normal flow so it sits above the title instead of on it. */
    div.w-image.us_custom_f5f57be6{
        position: static !important;
        margin-bottom: 1rem;
    }
    /* Banner (`machine_banner_image`/`machine_banner_text`, e.g. "HEAVY
       LIFTING LESS STRAIN"): a full-bleed photo + bold line at the bottom —
       full_height earns its keep there (ST). But the field is empty on
       machines still awaiting real copy (e.g. BRL), and an empty full_height
       section is just a blank 100vh scroll trap. Scoped to the empty case
       only via :has()+:empty — machines with real banner text (ST) are
       untouched. */
    .l-section.full_height:has(.machine_banner_text .w-post-elm-value:empty){
        height: auto;
        min-height: 45vh;
    }
}

/* Tablet / laptop range: scale the filter + card type/controls down evenly so
   the cards stop overflowing once the columns narrow. Ranges match the layout
   reflow in the plugin's finder.css. */
@media (min-width: 1025px) and (max-width: 1400px){
    .bsc-finder{ --bsc-fscale: 0.8; }
}
@media (min-width: 769px) and (max-width: 1024px){
    .bsc-finder{ --bsc-fscale: 0.85; }
}

/* ── Machine content lists ([machine_list]) ────────────────────────────────
   Features use the green check icon, Options the blue plus icon; both 24px.
   Item text 16px; titles Blanc-Medium 38px in the light-blue brand colour. */
.bsc-list__title{
    font-family: 'Blanc-Medium', sans-serif;
    font-size: 38px;
    color: var(--color-custom-3);
}
.bsc-list__items{
    list-style: none;
    margin: 0;
    padding: 0;
}
.bsc-list__item{
    display: flex;
    align-items: flex-start;          /* keeps the icon aligned if the text wraps */
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
}
.bsc-list__item + .bsc-list__item{
    margin-top: 14px;                 /* vertical spacing between rows */
}
.bsc-list__item::before{
    content: "";
    flex: 0 0 24px;                   /* fixed 24px icon, never shrinks */
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.bsc-list--features .bsc-list__item::before{
    background-image: url("assets/icons/features-icon.svg");
}
.bsc-list--options .bsc-list__item::before{
    background-image: url("assets/icons/options-icon.svg");
}

/* "Machines in Stock" / "Case Studies" card: .details gets a min-height equal
   to the .gallery (the 4:3 detail slider) height, and follows window resize
   automatically. A sibling's height can't be referenced directly in CSS, so we
   stretch the row: the shorter column grows to the taller one. The gallery's
   height is its width × 3/4 (from the slider's aspect-ratio), so it recomputes
   on resize on its own — no JS, no fixed value. .gallery keeps its own height
   (align-self:flex-start), so ONLY .details is pushed up to the gallery
   height; if the text ever gets taller, .details simply grows past it (true
   min-height behaviour). Double class (.w-hwrapper.machine-in-stock) so it
   beats Impreza's .w-hwrapper.valign_top. Case Studies cards reuse the exact
   same card shell (.case-study-card), so both share this block rather than
   duplicating it. */
.w-hwrapper.machine-in-stock,
.w-hwrapper.case-study-card{
    align-items: stretch;
}
.machine-in-stock .gallery,
.case-study-card .gallery{
    align-self: flex-start;
}

/* Below ~768px, image-left/details-right leaves .details only ~140-190px
   wide — too narrow for the 3-line title, paragraph and both buttons. Two
   confirmed symptoms: the "quick info" icon (`usg_image_1`, absolutely
   positioned at top:21/right:21 of the whole row) was meant to sit in the
   row's top-right dead space, but once the title wraps to 3 lines in that
   narrow column it reaches right up into the icon; and the "SPECS (PDF)" /
   "ORDER NOW" buttons get clipped past the card's right edge. Stacking the
   row (image on top full-width, details below full-width) gives all of it
   room — and puts the icon back in its intended spot, over a now much wider
   product image, instead of needing a bespoke repositioning fix. 768px
   itself already reads fine (confirmed), so the cutoff sits just below it. */
@media (max-width: 767px){
    .w-hwrapper.machine-in-stock,
    .w-hwrapper.case-study-card{
        flex-direction: column;
    }
    .w-hwrapper.machine-in-stock > .gallery,
    .w-hwrapper.machine-in-stock > .details,
    .w-hwrapper.case-study-card > .gallery,
    .w-hwrapper.case-study-card > .details{
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Stacking also moved the icon (DOM order: icon, then gallery, then
       details) so its absolute box now overlaps the gallery horizontally —
       the slider's own content paints over it (same auto z-index, later in
       DOM wins), leaving only a sliver visible at the image's rounded
       corner. Lift it above the gallery explicitly. */
    .usg_image_1{
        z-index: 5;
    }
}

#gform_wrapper_2 #gform_fields_2{
    row-gap: 15px!important;
}
#gform_wrapper_2 .gform_heading{
    display: none!important;
}
#gform_wrapper_2 .gform_button{
    background-color: var(--color-custom-3)!important;
    font-family: Blanc-Bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: 0em;
    padding: 0.6em 1.6em;
    transition-duration: 0.3s;
    border-radius: 7px;
}
#gform_wrapper_2 .gform_button:hover{
    background-color: var(--color-custom-1)!important;
}
#gform_wrapper_2 .gform_fields input,
#gform_wrapper_2 .gform_fields textarea{
    border-radius: 5px!important;
    border: 0px!important;
}

.special-gap-right{grid-template-columns: 3.25fr 1fr!important;}
.special-gap-left{grid-template-columns: 1fr 3.25fr!important;}
/* Fixed ratio kept at every width on purpose (client request) — these two
   rows must never stack to 1 column, even on mobile. */

/* .two-columns-laptop's own outer 2-col split (checklist | image column,
   currently 444px+444px at 1024px) — stack to 1 column at laptop width too,
   independent of the special-gap-* breakpoint above. */
@media (max-width: 1024px){
    .two-columns-laptop .g-cols.cols_2{
        grid-template-columns: 1fr !important;
    }
}

.product-habdling-checks i{
    color: var(--color-custom-2);
}
.product-habdling-checks h4{
    font-size: 24px;
}

.grid-3-columns .vc_column-inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media(max-width:767px){
    .product-habdling-checks h4{
        font-size: 16px;
    }
}
/* Same unresponsive fixed-3-column bug as .key-features-boxes, but worse
   here: used on Contact Us for a 6-box grid (Email/Find a Reseller/FAQ/
   Call/Our Office/AI Assistant), and since nothing here has overflow:hidden
   set explicitly, the 3rd column (FAQ, AI Assistant) — confirmed rendering
   as far out as x:722 in a 375px viewport — ends up completely invisible
   rather than just clipped: docScrollWidth stayed equal to the viewport
   width, so those two boxes weren't reachable by scrolling either, just
   gone. Same max-width:900px breakpoint as the other 3-column grid. */
@media (max-width: 900px){
    .grid-3-columns .vc_column-inner{
        grid-template-columns: 1fr;
    }
}

.contact-us-boxes .wpb_text_column{
    max-width: 274px;
    margin-left: auto;
    margin-right: auto;
}

/* === Find a Reseller ([reseller_finder]) ===
   Typography / colour / look only. Layout-state (grid columns, loading dim)
   ships in the plugin's assets/reseller-finder.css. Screenshot is the source
   of truth. */

/* --- Region tabs: equal-width white pills, active = solid navy --- */
.bsc-reseller-finder__tabs-list{
    display: flex;
    gap: 1rem;
}
.bsc-reseller-finder__tab-item{
    flex: 1 1 0;
}
.bsc-reseller-finder__tab{
    display: block;
    padding: 1.1rem 1rem;
    border-radius: 12px;
    background: #fff;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-custom-1);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.bsc-reseller-finder__tab.is-active{
    background: var(--color-custom-1);
    color: #fff;
}
.bsc-reseller-finder__tab.is-active:hover{
    background: var(--color-custom-1);
    color: #fff;
}

/* --- Reseller card: white, large radius, subtle elevation --- */
.bsc-reseller-card{
    background: #fff;
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.bsc-reseller-card__country{
    margin: 0 0 0.15em;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 25px;
    line-height: 1.2;
    color: var(--color-custom-1);
    text-transform: uppercase;
}
.bsc-reseller-card__company{
    margin: 0;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: var(--color-custom-3);
    text-transform: uppercase;
}
.bsc-reseller-card__flag{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.15);
}
.bsc-reseller-card__address,
.bsc-reseller-card__phone,
.bsc-reseller-card__fax{
    margin: 1rem 0 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;                 /* Semibold */
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-custom-1);
}
.bsc-reseller-card__fax{
    margin-top: 0.25rem;
}
.bsc-reseller-card__phone a{
    color: inherit;
    text-decoration: none;
}
.bsc-reseller-card__actions{
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 1.25rem;
}
.bsc-reseller-card__website{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border-radius: 8px;
    border: 1px solid var(--color-custom-1);
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 20px;
    color: var(--color-custom-1);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.bsc-reseller-card__website:hover{
    background: #f3f7fa;
}

/* --- "Can't find a reseller?" promo bar: text left, CONTACT US button right --- */
.bsc-reseller-finder__promo-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.bsc-reseller-finder__promo .bsc-promo__box{
    justify-content: flex-start;
    flex: 1 1 auto;
}
.bsc-reseller-finder__promo .bsc-promo__intro,
.bsc-reseller-finder__promo .bsc-promo__contact{
    font-family: 'Blanc-Medium', sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
}
.bsc-reseller-finder__promo .bsc-promo__intro{
    color: var(--color-custom-3);
}
.bsc-reseller-finder__promo .bsc-promo__contact{
    color: var(--color-custom-1);
}
.bsc-reseller-finder__contact-btn{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--color-custom-1);
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 16px;
    color: var(--color-custom-1);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.bsc-reseller-finder__contact-btn:hover{
    background: var(--color-custom-1);
    color: #fff;
}

@media (max-width: 640px){
    .bsc-reseller-finder__tabs-list{
        flex-wrap: wrap;
    }
    .bsc-reseller-finder__tab-item{
        flex: 1 1 calc(50% - 0.5rem);
    }
    .bsc-reseller-card__actions{
        justify-content: flex-start;
    }
    .bsc-reseller-finder__promo-inner{
        justify-content: flex-start;
    }
}

/* === Support / Contact form (.support-form) ===
   Gravity Forms skin, scoped entirely under the form's own Custom CSS Class
   (.support-form) so it never touches the Get a Price wizard
   (#gform_wrapper_1, assets/css/get-a-price.css) or Quick Contact
   (#gform_wrapper_2, styled above). Screenshot is the source of truth.
   Field labels double as the "visible text inside the field" — GF renders
   real <label>s here (the required marker "*" proves it), but placeholders
   are styled identically in case a field ever relies on one instead. */

.support-form{
    --sf-max-width: 680px;
    --sf-navy:      var(--color-custom-1);

    max-width: var(--sf-max-width);
    margin: 0 auto;
}

/* Screenshot has no visible form heading/description. */
.support-form .gform_heading{
    display: none;
}

/* Single column, consistent vertical rhythm between field cards.
   !important + forcing every .gfield to span the row: Orbital's own
   .gform_fields grid (multi-column by default) and per-field type behaviour
   (e.g. the compound "Name" field auto-spans full width via <fieldset>, a
   plain text field doesn't) otherwise produce mismatched widths per field. */
.support-form .gform_fields{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
}
.support-form .gfield{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    padding: 22px 24px;
}

/* Label (or placeholder) — the only visible text inside an empty field. */
.support-form .gfield_label{
    margin: 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;                 /* Semibold */
    font-size: 14px;
    line-height: 1.3;
    color: var(--sf-navy);
}
.support-form .gfield_required{
    color: var(--sf-navy);
}

/* Inputs/select/textarea: borderless, transparent — they visually merge into
   the same white card as the label instead of forming a separate box.
   !important throughout: Gravity Forms' Orbital theme (gravity-forms-theme-
   framework.min.css) sets its own background/border/appearance via CSS custom
   properties on these same elements, and it can win ties on some of them
   (confirmed on <select> and the focus ring) even though .support-form's
   selectors are already more specific — so we force it here instead of
   relying on specificity, the same way get-a-price.css leans on the
   #gform_wrapper_1 ID for the same fight. */
.support-form .ginput_container input[type="text"],
.support-form .ginput_container input[type="email"],
.support-form .ginput_container input[type="tel"],
.support-form .ginput_container input[type="number"],
.support-form .ginput_container input[type="url"],
.support-form .ginput_container select,
.support-form .ginput_container textarea{
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: var(--sf-navy) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.support-form .ginput_container input::placeholder,
.support-form .ginput_container textarea::placeholder{
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--sf-navy) !important;
    opacity: 1 !important;
}
.support-form .ginput_container input:focus,
.support-form .ginput_container select:focus,
.support-form .ginput_container textarea:focus{
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* <select> needs its own pass: some browsers keep a faint native arrow at the
   right edge even with appearance:none, which then double-ups with the custom
   chevron below (both sit flush-right). One combined `background` shorthand
   (instead of separate background-* longhands) avoids any partial-property
   leftover from earlier rules, and ::-ms-expand covers old Edge/IE. */
.support-form .ginput_container select{
    padding-right: 32px !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003877' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 4px center / 14px !important;
}
.support-form .ginput_container select::-ms-expand{
    display: none !important;
}

/* Ample height on regular fields; textarea taller still. */
.support-form .gfield:not(.gfield--type-textarea):not(.gfield--type-fileupload){
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.support-form .ginput_container textarea{
    min-height: 120px;
    resize: vertical;
}

/* File upload dropzone: GF's Orbital widget drives its icon/border/button
   colour off its own design-token system (--gf-color-primary: #204ce5,
   cascaded via --gf-ctrl-* custom properties), not this theme's palette —
   same root cause as the submit button fight below, so the fix follows the
   same recipe: override the rendered properties directly with !important
   rather than touching GF's custom properties (safer — those cascade to
   other GF internals, like validation colours, we don't want to touch). */
.support-form .gform_drop_area{
    border: 2px dashed var(--color-custom-3) !important;
    border-radius: 12px !important;
    background: var(--color-custom-6) !important;
    padding: 32px 24px !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.support-form .gform_drop_area:hover{
    border-color: var(--sf-navy) !important;
    background: var(--color-custom-7) !important;
}
.support-form .gform_drop_area::before{
    color: var(--color-custom-3) !important;
}
.support-form .gform_drop_instructions{
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    color: var(--sf-navy) !important;
}
.support-form .gform_button_select_files{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--sf-navy) !important;
    box-shadow: none !important;
    font-family: 'Blanc-Bold', sans-serif !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.support-form .gform_button_select_files:hover{
    background: var(--color-custom-3) !important;
}
.support-form .gform_fileupload_rules{
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px !important;
    color: var(--color-custom-10) !important;
}
.support-form .ginput_preview_list{
    margin-top: 12px;
    font-family: 'Open Sans', sans-serif;
}

/* Submit: full width, tall, dark navy, rounded, centred uppercase label.
   !important throughout — Orbital's own button skin (using its
   --gf-color-primary, bright blue, not this site's navy) otherwise wins and
   the button renders at its native GF size/colour instead of this one. */
.support-form .gform_footer{
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}
.support-form .gform_button[type="submit"]{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 64px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--sf-navy) !important;
    box-shadow: none !important;
    font-family: 'Blanc-Bold', sans-serif !important;
    font-size: 23px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.support-form .gform_button[type="submit"]:hover{
    background: var(--color-custom-3) !important;
}

/* === Resource Center ([resource_center]) ===
   Typography / colour / look only. Layout-state (sidebar/list grid columns,
   loading dim) ships in the plugin's assets/resource-center.css. Redesigned
   2026-07 per client mockup: 2-line category cards (title + subtitle, the
   subtitle coming from the term's Description field — see
   bsc_resource_categories_catalog() in the plugin) and a single continuous
   list panel with a divider between rows instead of separate row-cards.
   Background is intentionally left untouched, per request — only the tabs
   and rows are styled here. */

/* --- Sidebar tabs: white cards, title + subtitle, active = solid navy --- */
.bsc-resource-center{
    /* max-content instead of a fixed px: the column always sizes itself
       exactly to the widest tab label (e.g. "Legal / Privacy / Metaalunie"),
       so it never clips regardless of font metrics/zoom/viewport.
       !important: the plugin's own assets/resource-center.css sets the 260px
       default on this same selector, and depending on how/where the
       shortcode is embedded (builder row vs. plain content), that stylesheet
       can end up printed after this one — don't rely on load order here. */
    --bsc-resource-sidebar-width: max-content !important;
}
.bsc-resource-center__sidebar-list{
    gap: 12px;
}
.bsc-resource-center__category{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.bsc-resource-center__category-title{
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-custom-1);
    text-transform: uppercase;
    white-space: nowrap;
}
.bsc-resource-center__category-desc{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-custom-3);
}
.bsc-resource-center__category:focus,
.bsc-resource-center__category:focus-visible{
    outline: none;
    box-shadow: none;
}
.bsc-resource-center__category.is-active,
.bsc-resource-center__category.is-active:hover{
    background: var(--color-custom-1);
}
.bsc-resource-center__category.is-active .bsc-resource-center__category-title,
.bsc-resource-center__category.is-active .bsc-resource-center__category-desc{
    color: #fff;
}

/* --- Resource list: one continuous white card, rows split by a divider --- */
.bsc-resource-center__list{
    /* !important: same load-order caveat as --bsc-resource-sidebar-width
       above — the plugin's own assets/resource-center.css sets its own
       0.75rem gap on this same selector and can print after this file. */
    gap: 0 !important;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.bsc-resource-row{
    /* .bsc-resource-row is display:flex (plugin's structural CSS), so the
       divider must be taken out of flex flow with position:absolute —
       otherwise :after becomes just another flex item in the row (squeezed
       to the left) instead of a line sitting below the row's content. */
    position: relative;
    padding: 12px 20px;
}
.bsc-resource-row:after{
    /* Inset to match the row's own horizontal padding (20px) instead of
       spanning edge-to-edge of the panel — the design's divider lines up
       with the row content, not the panel's outer corners. */
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: var(--color-custom-3);
}
.bsc-resource-row:last-child:after{
    display: none;
}
.bsc-resource-row__icon{
    width: 24px;
    height: 24px;
}
.bsc-resource-row__title{
    font-family: 'Blanc-Regular', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-custom-1);
    text-transform: uppercase;
    text-decoration: none;
}
.bsc-resource-row__size{
    font-family: 'Blanc-Regular', sans-serif;
    font-size: 15px;
    color: var(--color-custom-1);
    opacity: 0.7;
}
.bsc-resource-row__download img{
    width: 24px;
    height: 24px;
}
.bsc-resource-center__empty{
    padding: 12px 20px;
}

/* CTA box: white card instead of the shared light-blue promo background, to
   match the white rows above it (overrides the tunable --bsc-promo-bg custom
   property from the plugin's promo.css instead of touching that shared file,
   so [machine_promo] / the Reseller Finder promo keep their own colour). */
.bsc-resource-center__promo .bsc-promo__box{
    --bsc-promo-bg: #fff;
}

/* === FAQs Accordion (.faqs-accordion) ===
   This is Impreza's native Toggles/Accordion widget (.w-tabs.style_default
   .accordion), not a custom component — the class is just the "Extra class
   name" set on it in the builder. Its own skin uses a divider border between
   items and no card look at all, and its "+" icon rotates into an "x" when
   open (not the clean "-" this design wants), so several overrides need
   !important to beat the widget's own !important rules. Background/border
   only — the accordion's open/close JS and markup are untouched. */

.faqs-accordion .w-tabs-sections{
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0 !important;
}

/* --- Item card: white, rounded, no default divider border ---
   Reset border/shadow on EVERY descendant (not just the named wrapper
   elements) — the stray divider under the title turned out to live on a
   deeper node (WPBakery's .wpb_text_column/.wpb_wrapper or similar), not on
   .w-tabs-section-header/-content themselves, so a blanket `*` reset is the
   only reliable way to catch it. */
.faqs-accordion .w-tabs-section,
.faqs-accordion .w-tabs-section *{
    border: 0 !important;
    box-shadow: none !important;
}
.faqs-accordion .w-tabs-section{
    margin-bottom: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: #fff;
    overflow: hidden;
}
.faqs-accordion .w-tabs-section.active{
    border: 1px solid var(--color-custom-3) !important;
}

/* --- Question row --- */
/* Kill focus outline everywhere in the accordion, not just the header button —
   in case Impreza's JS moves focus to the section/content wrapper instead
   (e.g. for the "has_scrolling" scroll-into-view behaviour). */
.faqs-accordion,
.faqs-accordion *{
    outline: none !important;
}
.faqs-accordion :focus,
.faqs-accordion :focus-visible{
    outline: none !important;
    box-shadow: none !important;
}

.faqs-accordion .w-tabs-section-header{
    padding: 16px 20px !important;
    color: var(--color-custom-1) !important;
    outline: none !important;
}
.faqs-accordion .w-tabs-section-header:focus,
.faqs-accordion .w-tabs-section-header:focus-visible{
    outline: none !important;
    box-shadow: none !important;
}
.faqs-accordion .w-tabs-section-title{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;                 /* Semibold */
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-custom-1);
}

/* Icon: navy, and a clean "-" (instead of Impreza's default rotated "x")
   when the item is open — hide the vertical bar of the "+" and cancel the
   rotation, leaving just the horizontal bar.
   IMPORTANT: use rotate(0deg), never `transform: none` — the icon's ":after"
   bar is `position:absolute; width:100%`, and ANY transform value (even a
   no-op rotation) is what keeps it a positioning container for that
   pseudo-element. `transform: none` removes that container, so the "100%"
   width resolves against a much bigger ancestor instead of the small icon
   box — that's the giant blue line bug this caused. */
.faqs-accordion .w-tabs-section-control{
    color: var(--color-custom-1);
}
.faqs-accordion .w-tabs-section.active .w-tabs-section-control{
    transform: rotate(0deg) !important;
}
.faqs-accordion .w-tabs-section.active .w-tabs-section-control:before{
    content: none !important;
}

/* --- Content: generous padding, comfortable reading line-height --- */
.faqs-accordion .w-tabs-section-content-h{
    padding: 4px 20px 20px !important;
}
.faqs-accordion .wpb_wrapper p{
    margin: 0 0 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;                 /* Regular */
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-custom-1);
}
.faqs-accordion .wpb_wrapper p:last-child{
    margin-bottom: 0;
}
.faqs-accordion .wpb_wrapper strong,
.faqs-accordion .wpb_wrapper b{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;                 /* Bold */
    color: var(--color-custom-1);
}

.m_layout_fullscreen .w-nav-list.level_1{
    background-color: #FFFFFF!important;
}

.contact-us-boxes .disabled{
    cursor: disabled;
    pointer-events: none!important;
    opacity: 0.32;
}
.title-description{
    font-size: 14px;
}

/* === Exhibitions & Events grid (.bsc-exhibitions) ===
   Grid column count + the calendar dropdown's open/closed mechanics are
   structural (plugin's assets/exhibitions.css); everything below is
   look-and-feel. Card reuses the site's standard "white card" language (see
   .bsc-finder-card / .bsc-reseller-card): white bg, rounded corners, soft
   shadow. The "More Information" button is Impreza's own w-btn/us-btn-style_3
   (not a custom button) — flex:1 here only stretches it to fill the row next
   to the calendar icon, it doesn't restyle it. */
.bsc-exhibitions__grid{
    gap: 24px;
}
.bsc-exhibition-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.bsc-exhibition-card__body{
    flex: 1 1 auto;
}
.bsc-exhibition-card__title,
.bsc-exhibition-card__location{
    margin: 0;
    padding: 0;                       /* Impreza's default h4 has padding-top:21px */
    font-family: 'Blanc-Bold', sans-serif;
    text-transform: uppercase;
}
.bsc-exhibition-card__dates{
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--color-custom-3);
}
.bsc-exhibition-card__desc{
    margin: 0.75em 0 0;
    font-size: 17px;
}
.bsc-exhibition-card__actions{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
}
.bsc-exhibition-card__calendar-icon{
    display: block;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}
.bsc-exhibition-card__link{
    flex: 1 1 auto;
}

/* Calendar dropdown menu (Google Calendar / Outlook.com / .ics) */
.bsc-exhibition-card__calendar-menu{
    margin: 6px 0 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.bsc-exhibition-card__calendar-menu li{
    margin: 0;
}
.bsc-exhibition-card__calendar-menu a{
    display: block;
    padding: 6px 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: var(--color-custom-1);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
}
.bsc-exhibition-card__calendar-menu a:hover{
    background: #f3f7fa;
}

/* === Machine gallery: bigger 360° stage ([machine_gallery])
   `.bsc-gallery__media--360` only exists in the DOM while the 360 viewer is
   the active stage item, so tuning it here never touches the product photo
   or Product Video stage sizes. Extra `.bsc-gallery` ancestor bumps
   specificity so this beats gallery.css's own rules (incl. the desktop
   media query) regardless of stylesheet load order — no !important needed.

   The ST turntable clip (DRAAI_SEQ_CLEAN.mp4) is a PORTRAIT 1080x1350
   (4:5) recording, but the stage box was fixed at a landscape 16:9 —
   `.bsc-360__video`'s object-fit:contain then had to pillarbox it down to
   ~45% of the box width to preserve the footage's own ratio, which is why
   it read as small. Matching the box to the footage's real ratio removes
   that dead space so the video renders edge-to-edge; the max-height gives
   it more vertical room to do that in. If a future 360 clip is shot at a
   different ratio, adjust the aspect-ratio below to match it. */
.bsc-gallery .bsc-gallery__media--360{
    aspect-ratio: 4 / 5;
    max-height: 700px;
}
/* The popup's 360 slide must fill the popup stage instead of inheriting the
   inline stage's fixed 4:5/700px box above — same 2-class specificity as
   that rule, so a 3rd ancestor class here (rather than !important) is what
   guarantees this wins regardless of stylesheet load order. */
.bsc-gallery-popup .bsc-gallery-popup__stage .bsc-gallery__media--360{
    aspect-ratio: auto;
    max-height: none;
    width: 100%;
    height: 100%;
    background: none;
}

/* === Machine gallery: fullscreen popup ([machine_gallery]'s .bsc-gallery__fs)
   Visual polish only — structure/layout lives in the plugin's gallery.css,
   same split as the rest of this file. Solid, fully opaque pale-blue
   gradient (never a transparent overlay — see below), big soft chevrons,
   thumbnails with the same active-border treatment as the inline strip, dot
   pagination (same visual language as the [machines_slider] progress
   ticks). */
.bsc-gallery-popup{
    /* Client spec: gradient between #00A1ED and #003877 (this theme's own
       --color-custom-3 / --color-custom-1 — confirmed via the live site's
       CSS vars, not a coincidence) at ~10% perceived intensity — i.e. those
       two colours mixed 10% into white, NOT 10% opacity on this container.
       Opacity here would wash out every child (thumbnails, buttons, close
       icon all sit inside this element) and let the page underneath show
       through, which the client explicitly ruled out. Static rgb() first as
       a fallback for browsers without color-mix() support, then the
       color-mix() version (same maths, ~10% mix into white) so the popup
       stays tied to the real variables if the brand colours ever change. */
    background: linear-gradient(160deg, rgb(230, 246, 253) 0%, rgb(230, 235, 241) 100%);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--color-custom-3) 10%, #fff) 0%,
        color-mix(in srgb, var(--color-custom-1) 10%, #fff) 100%
    );
}
.bsc-gallery-popup__card{
    /* No card surface anymore — full bleed, so the gradient above IS the
       popup background, with nothing boxing the image on top of it. */
    background: none;
}
/* Client spec: icon-only, no background circle behind the close/nav icons —
   just the glyph, tinted with the brand's own --color-custom-3. */
.bsc-gallery-popup__close{
    color: var(--color-custom-3);
    font-size: 2rem;
    width: 40px;
    height: 40px;
    background: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.bsc-gallery-popup__close:hover{
    opacity: 1;
}
.bsc-gallery-popup__nav{
    color: var(--color-custom-3);
    width: 56px;
    height: 56px;
    background: none;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bsc-gallery-popup__nav:hover{
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}
/* Deliberately no background/border here — thumbnails, dots and the price
   button float directly on the popup's own gradient (matches the mockup:
   no separate footer bar/strip). */
.bsc-gallery-popup__thumb{
    border-radius: 10px;
    border: 1.5px solid rgba(20, 40, 80, 0.14);
    background: rgba(255, 255, 255, 0.7);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.bsc-gallery-popup__thumb:hover{
    border-color: rgba(26, 79, 160, 0.4);
}
.bsc-gallery-popup__thumb.is-active{
    border-color: var(--color-custom-3);
    background: #fff;
}
.bsc-gallery-popup__badge360{
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bsc-gallery-popup__dot{
    background: rgba(20, 40, 80, 0.22);
    transition: background 0.2s ease, transform 0.2s ease;
}
.bsc-gallery-popup__dot.is-active{
    background: var(--color-custom-3);
    transform: scale(1.25);
}

/* === Partners: "Hygiene Solutions" product grid ===
   Each product shot (`us_custom_8c848aba`, reused on all 4 cards) has
   `margin-top:-55%!important` — a deliberate "image pops out above its
   white card" effect. On the wide 4-column desktop grid the images sit in
   narrow columns, so -55% of that column's own width lands safely inside
   empty background above the cards. Once `.hygiene-solutions-boxes` drops to
   2 columns (≤1024px, see below) or 1 column (≤767px), each column is much
   wider, so -55% is a much bigger absolute pull. First tried compensating
   with extra margin-bottom on the "HYGIENE SOLUTIONS" heading above the
   grid, but that only covered card 1's image reaching the heading — every
   OTHER card's image reaches up into the PREVIOUS ROW's card text just as
   badly (confirmed at 900px: card 3's image top sits 116px above card 1's
   own bottom edge, squarely on top of its paragraph, not just its card
   background). Fighting the pull from the text side doesn't scale to every
   card, so instead shrink the pull itself at the source: override
   margin-top directly on the image so it never reaches far enough to touch
   ANY text, at either tablet or phone width. Tag+class (not just the bare
   class): the -55% comes from Impreza's own inline <style>, same
   equal-specificity-loses-on-source-order gotcha as elsewhere on this site
   — a plain `.us_custom_8c848aba` at the same specificity silently lost to
   it (confirmed: computed margin-top was still -179px, i.e. -55%, with that
   version of this rule in place). */
@media (max-width: 1024px){
    div.w-image.us_custom_8c848aba{
        margin-top: -20px !important;
    }
}

/* `.hygiene-solutions-boxes` (the 4 product cards above): Impreza's own
   responsive grid classes (`cols_4`, `tablets-cols_inherit`,
   `laptops-cols_inherit`, `mobiles-cols_1`) only give it two states — 4
   columns down to the "mobiles" breakpoint, then straight to 1 — with no
   tablet step. Adding one here at 2 columns, sharing the same breakpoints as
   the heading-margin fix above so the two stay in sync. */
@media (min-width: 768px) and (max-width: 1024px){
    .hygiene-solutions-boxes{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 767px){
    .hygiene-solutions-boxes{
        grid-template-columns: 1fr !important;
    }
}

/* === Contact Us / Partners: parallax-fixed office band ===
   `.parallax_fixed>.l-section-img` gets `background-attachment:fixed` from
   Impreza core. With `fixed`, background-position is resolved against the
   VIEWPORT, not this element's own (much shorter) box — so the visible slice
   of the photo depends on where the section happens to sit on screen when
   the page is scrolled, not on the image itself. On Contact Us this crops
   the "BACKsaver" building signage down to an unrecognisable fragment
   (confirmed: at rest it showed just "...CK Sa..." with the rest of the sign
   and most of the logo cropped away). Impreza already ships a fix for this
   same failure mode on iOS Safari specifically
   (`html.ios-touch [class*="us_custom_"]{background-attachment:scroll!important}`)
   — this section just isn't in scope for that selector (no `us_custom_*`
   class) and the underlying problem isn't iOS-specific anyway, it's
   "any touch/mobile viewport short enough that fixed-attachment's
   viewport-relative crop stops lining up with the section". Switching to
   `scroll` here makes background-position resolve against the section's OWN
   box instead — a plain, predictable `cover` crop centred on the sign,
   consistent at every scroll position. */
@media (max-width: 1024px){
    .l-section.parallax_fixed > .l-section-img{
        background-attachment: scroll !important;
    }
}

.w-nav.type_mobile .w-nav-anchor.level_1:not(.w-btn) {
  padding: .4rem;
}

.machine-grid-image img{
    max-height: 300px;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
/* === Search Results ([bsc_search_type_badge]) ===
   Content-type pill on the mixed-CPT Search Results grid, same rounded-pill
   language as the Reseller Finder region tabs. Sits absolutely over the
   Post Image (or the theme's Image Placeholder when a result has none) at
   the same top-right spot Impreza's own taxonomy badge preset uses. */
.bsc-search-type-badge{
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--color-custom-1);
    color: #fff;
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* === Subtle transitions/animations pass (client feedback) ===
   Global baseline: plain in-content text links (typed into a WPBakery Text
   block) don't get Impreza's own .w-btn/.w-nav-anchor transition handling
   since they're just <a> tags in a paragraph — give them the same smooth
   color change the rest of the site already has. Color only, no transform:
   this selector is too broad to risk animating layout-affecting properties. */
.wpb_text_column a,
.vc_column-inner > .wpb_wrapper a{
    transition: color 0.2s ease;
}

/* Finder card: zoom the machine image slightly on card hover. `overflow:
   hidden` on the card (not the media wrapper, which sizes to the image and
   wouldn't clip anything) contains the zoom within the existing rounded
   corners. */
.bsc-finder-card{
    overflow: hidden;
}
.bsc-finder-card__media img{
    transition: transform 0.35s ease;
}
.bsc-finder-card:hover .bsc-finder-card__media img{
    transform: scale(1.06);
}

/* Finder card "(i)" info button: was a static outline circle with no hover
   state at all. Same filled-swap language as the Reseller Finder region
   tabs (outline -> solid on interaction) plus a small scale bump. */
.bsc-finder-card__info{
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bsc-finder-card__info:hover{
    background: var(--color-custom-3);
    color: #fff;
    transform: scale(1.1);
}

/* Finder card "More information" link: had zero hover feedback (the
   neighbouring "Get a Price" pill already animates its background). */
.bsc-finder-card__more{
    transition: color 0.2s ease;
}
.bsc-finder-card__more:hover{
    color: var(--color-custom-3);
    text-decoration: underline;
}

/* Footer social icons: only had `cursor:pointer`, no actual hover feedback. */
.social-icons-footer a{
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.social-icons-footer a:hover{
    transform: scale(1.15);
    opacity: 0.8;
}
.hover-effect img{
    transition: transform 0.3s ease!important;
}
.hover-effect:hover img{
    transform: scale(1.05) !important;
}

@media(max-width: 1024px){
    .us_custom_8d032b96.full_height{
        min-height: 90vh;
    }
}

.our-saving-machines-grid .w-vwrapper.usg_vwrapper_1{
    height: 100%;
}

/* === Previous Events pagination (.bsc-exhibitions-past__pagination) ===
   Plain WP paginate_links() output (same server-rendered approach as the
   Reseller Finder's) ships with no default styling — a bare bulleted list
   otherwise. This gives it on-brand number buttons instead. */
.bsc-exhibitions-past__pagination .page-numbers{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.bsc-exhibitions-past__pagination a.page-numbers,
.bsc-exhibitions-past__pagination span.page-numbers{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-custom-1);
    background: var(--color-custom-6);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.bsc-exhibitions-past__pagination a.page-numbers:hover{
    background: var(--color-custom-3);
    color: #fff;
}
.bsc-exhibitions-past__pagination span.page-numbers.current{
    background: var(--color-custom-1);
    color: #fff;
}
.bsc-exhibitions-past__pagination span.page-numbers.dots{
    background: transparent;
    color: var(--color-custom-10);
}
/* Machine detail pages (single "products" CPT posts) share one WPBakery Content Template
   (post 77) for the whole "Product Video" row (.machine-product-video-section
   — grey background + "Product"/"Video" headings + [machine_video] +
   [machine_promo] CTA), unconditionally, regardless of whether the machine
   has a video configured. [machine_video] itself already returns '' when
   both its fields (machine_video URL/oEmbed and machine_video_file upload)
   are empty (backsaver-core/includes/gallery.php) — it renders a
   '<div class="bsc-video" data-bsc-video ...>' wrapper only when one of the
   two is actually set. Client feedback (2026-07-23): most machines have no
   video, and were still showing the "Product Video" title + empty area +
   promo CTA for nothing. Confirmed live on both a videoless page
   (backsaver-lt-lifter-tipper) and a page with a file-based video
   (backsaver-st-standard-tipper) that [data-bsc-video] is present only when
   a video actually renders, for both the URL and the file-upload option —
   safe single hook to key off of. Client chose to hide the WHOLE section
   (including the promo CTA) rather than just the title, so this is a plain
   :has() toggle instead of touching the shared Content Template directly
   (editing WPBakery's base64/JSON row attributes in the DB is comparatively
   risky — see prior migration notes). */
.machine-product-video-section:not(:has([data-bsc-video])){
    display: none !important;
}

/* Brand logo slot on the single machine template (post 77) — [machine_brand_logo]
   wrapper (see bsc_machine_brand_logo_shortcode in backsaver-core/includes/
   shortcodes.php). Renders the Backsaver logo (138x29 SVG) by default, or the
   machine's own machine_brand_logo ACF image for other brands (e.g. Nimo-KG's
   Group-1537.svg, 270x142 — nearly 5x taller with no size of its own). Fixed
   width keeps both logos the same visual footprint regardless of source
   aspect ratio; height:auto preserves it. Client feedback (2026-08-13): this
   used to be a static Backsaver [us_image], with [machine_brand_logo] showing
   AGAIN further down (unstyled) for Nimo-KG machines only — two logos, and the
   unconstrained 142px-tall one stretched the whole hero row taller (flex row
   with content_placement="bottom"), leaving a visible gap under the gallery
   thumbnails on those pages. Now a single slot, one brand logo, fixed size. */
.maquine-brand-logo img{
    width: 140px;
    height: auto;
}

/* "Sold" badge on Stock Machine cards (In Stock page), driven by the
   stock_sold ACF field via the "bsc-stock-sold" post_class (see
   bsc_stock_machine_sold_class in backsaver-core/includes/cpt.php) —
   avoids a manual "SOLD - " prefix typed into the title. */
.w-grid-item.bsc-stock-sold{
    position: relative;
}
.w-grid-item.bsc-stock-sold::after{
    content: "Sold";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: #c0392b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}


.custom-header-icons-mobile{
    justify-content: center;
    margin-top: 20px;
}
.mobile-menu-popup .menu-mobile-logo{
    margin-right: auto;
    margin-left: 0px;
}
.mobile-menu-popup .w-btn-wrapper{
    margin-left: auto;
    margin-right: 0px;
}

.mobile-menu-popup{
    height: 100vh;
}
.mobile-menu-popup .w-btn{
    padding: 0.4em 1em!important;
}
.admin-bar .mobile-menu-popup{
    height: calc(100vh - 32px);
}
.mobile-menu-popup-close{
    cursor: pointer;
}
.w-popup-wrap.layout_right_panel .w-popup-closer{
    display: none;
}
@media(max-width: 600px){
    .w-popup-wrap.layout_right_panel .w-popup-box-content {
        padding: 0px!important;
    }
}