/* Elementor's kit styles every <button> (.elementor-kit-5 button, 0,1,1; :hover/:focus 0,2,1). The tripled classes below (0,3,0) keep the plugin's own buttons from picking that up. */
/* Juvea — Before & After library */
.jvba{--jvba-ink:var(--e-global-color-primary,#231F20);--jvba-sand:var(--e-global-color-secondary,#EFE7E1);--jvba-gap:22px;color:var(--jvba-ink)}

/* filters */
.jvba-filters{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin:0 0 28px}
.jvba-filter{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1 1 200px;max-width:320px}
.jvba-filter-label{font-family:var(--e-global-typography-brndeye-font-family,"colfax-web"),sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.jvba-filter select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--jvba-ink);border-radius:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231F20' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;padding:13px 44px 13px 20px;color:var(--jvba-ink);font-family:var(--e-global-typography-brndbody-font-family,"colfax-web"),sans-serif;font-size:14px;line-height:1.2;cursor:pointer}
.jvba-filter select:focus{outline:2px solid var(--jvba-ink);outline-offset:2px}
.jvba-clear.jvba-clear.jvba-clear{appearance:none;background:none;border:0;padding:12px 0;cursor:pointer;color:var(--jvba-ink);text-decoration:underline;text-underline-offset:4px;font-family:var(--e-global-typography-brndbody-font-family,"colfax-web"),sans-serif;font-size:14px;border-radius:0;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none}
.jvba-clear.jvba-clear.jvba-clear:hover,.jvba-clear.jvba-clear.jvba-clear:focus{background:none;color:var(--jvba-ink)}
.jvba-count{align-self:center;margin-left:auto;font-family:var(--e-global-typography-brndbody-font-family,"colfax-web"),sans-serif;font-size:13px;opacity:.75}

/* grid */
.jvba-grid{display:grid;grid-template-columns:repeat(var(--jvba-cols),minmax(0,1fr));gap:var(--jvba-gap)}
.jvba-tile{margin:0;position:relative;overflow:hidden;border-radius:6px;background:var(--jvba-sand)}
.jvba-tile.is-wide{grid-column:span 2}
.jvba-tile[hidden]{display:none}
.jvba-open.jvba-open.jvba-open{all:unset;display:block;cursor:zoom-in;width:100%;aspect-ratio:1/1}
.jvba-tile.is-wide .jvba-open.jvba-open.jvba-open{aspect-ratio:2/1}
.jvba-open.jvba-open.jvba-open img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.jvba-open.jvba-open.jvba-open:hover img,.jvba-open.jvba-open.jvba-open:focus-visible img{transform:scale(1.03)}
.jvba-open.jvba-open.jvba-open:focus-visible{outline:2px solid var(--jvba-ink);outline-offset:2px}
.jvba-none{text-align:center;padding:40px 0;font-family:var(--e-global-typography-brndbody-font-family,"colfax-web"),sans-serif}
@media (max-width:1024px){.jvba-grid{grid-template-columns:repeat(min(2,var(--jvba-cols)),minmax(0,1fr))}}
.jvba-filter select option[hidden]{display:none}
@media (max-width:640px){.jvba-grid{grid-template-columns:1fr}.jvba-tile.is-wide{grid-column:auto}.jvba-filter{max-width:none}.jvba-count{margin-left:0}}

/* lightbox (shared by the library and the sliders) */
.jvba-lb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:16px 84px}
.jvba-lb.is-open{display:flex}
.jvba-lb-bg{position:absolute;inset:0;background:rgba(35,31,32,.94)}
.jvba-lb-fig{position:relative;margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.jvba-lb-fig img{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;display:block;border-radius:4px}
.jvba-lb-fig figcaption{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
/* tags as the site's brown pills */
.jvba-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jvba-pill{display:inline-block;background:var(--e-global-color-ce8eed8,#9F8E87);color:#fff;border-radius:999px;padding:8px 16px;font-family:var(--e-global-typography-brndbtn-font-family,"colfax-web"),sans-serif;font-size:12px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;line-height:1;white-space:nowrap}
.jvba-lb-desc{color:#EFE7E1;font-family:var(--e-global-typography-brndbody-font-family,"colfax-web"),sans-serif;font-size:14px;line-height:1.5;max-width:720px}
/* the slider's arrow buttons, inverted: white circle, black chevron */
.jvba-lb-x.jvba-lb-x.jvba-lb-x{position:absolute;top:18px;right:18px;z-index:2;appearance:none;border:0;padding:0;letter-spacing:0;font-weight:400;background:rgba(239,231,225,.12);color:#EFE7E1;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;transition:background .2s}
.jvba-lb-x.jvba-lb-x.jvba-lb-x:hover,.jvba-lb-x.jvba-lb-x.jvba-lb-x:focus{background:rgba(239,231,225,.28);color:#EFE7E1}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev,.jvba-lb-next.jvba-lb-next.jvba-lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;appearance:none;border:0;padding:0;cursor:pointer;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev{left:24px}
.jvba-lb-next.jvba-lb-next.jvba-lb-next{right:24px}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev:hover,.jvba-lb-next.jvba-lb-next.jvba-lb-next:hover,.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev:focus,.jvba-lb-next.jvba-lb-next.jvba-lb-next:focus{background:#EFE7E1}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev i,.jvba-lb-next.jvba-lb-next.jvba-lb-next i{position:relative;width:12px;height:12px;display:inline-block;font-size:0}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev i::before,.jvba-lb-next.jvba-lb-next.jvba-lb-next i::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-style:solid;border-color:#231F20;border-width:0 1.5px 1.5px 0}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev i::before{transform:translate(-35%,-50%) rotate(135deg)}
.jvba-lb-next.jvba-lb-next.jvba-lb-next i::before{transform:translate(-65%,-50%) rotate(-45deg)}
.jvba-lb-prev.jvba-lb-prev.jvba-lb-prev[hidden],.jvba-lb-next.jvba-lb-next.jvba-lb-next[hidden]{display:none}
body.jvba-lb-lock{overflow:hidden}
@media (max-width:767px){
  .jvba-lb{padding:16px}
  .jvba-lb-fig img{max-height:calc(100vh - 150px)}
  .jvba-lb-prev.jvba-lb-prev.jvba-lb-prev,.jvba-lb-next.jvba-lb-next.jvba-lb-next,.jvba-lb-x.jvba-lb-x.jvba-lb-x{width:32px;height:32px}
  .jvba-lb-prev.jvba-lb-prev.jvba-lb-prev{left:8px}.jvba-lb-next.jvba-lb-next.jvba-lb-next{right:8px}
  .jvba-lb-x.jvba-lb-x.jvba-lb-x{font-size:22px;top:10px;right:10px}
}

/* slider — markup carries Elementor's own image-carousel classes, so Elementor's
   stylesheet (and the site's arrow CSS) styles it exactly like the native carousels.
   We only set slide widths: slidesPerView is 'auto' so a "wide" photo can take the
   full width. 23px matches the carousels' gap. */
.jvba-slider .swiper{position:static}
/* nothing to scroll (Swiper's watchOverflow adds swiper-button-lock): no arrows, no dots */
.jvba-slider .elementor-swiper-button.swiper-button-lock,.jvba-slider .swiper-pagination.swiper-pagination-lock{display:none!important} /* arrows anchor to the widget (Elementor's carousel CSS does this too) */
.jvba-slider .swiper-slide{width:calc(50% - 11.5px);height:auto}
.jvba-slider .swiper-slide.is-wide{width:100%}
.jvba-slider .swiper-slide-inner{margin:0;display:block}
.jvba-slider .swiper-slide-image{width:100%;height:auto;display:block}
.jvba-slider .jvba-zoom.jvba-zoom.jvba-zoom{all:unset;display:block;width:100%;cursor:zoom-in}
.jvba-slider .jvba-zoom.jvba-zoom.jvba-zoom:focus-visible{outline:2px solid var(--jvba-ink);outline-offset:2px}
/* the native carousels carry a 30px widget padding (Elementor's _padding) on top of
   Swiper's 30px margin, which is what keeps the outside arrows clear of the first
   image. Desktop + tablet only: on phones the plain 30px inset is the look the
   owner signed off (2026-10-16). */
@media (min-width:768px){.jvba-slider > .elementor-widget-container{padding:0 30px}}
/* the site's carousels have their dots sized to 0 (hidden, row kept) */
.jvba-slider .swiper-pagination-bullet{width:0;height:0;margin:0 6px}
@media (max-width:767px){.jvba-slider .swiper-slide,.jvba-slider .swiper-slide.is-wide{width:100%}}