.jfs-pagehero { position: relative; background: var(--ink-900); min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; color: var(--muted-strong); }
.jfs-pagehero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jfs-pagehero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 38, 0.25), rgba(11, 29, 38, 0.9)); }
.jfs-pagehero__scrim--solid { background: rgba(11, 21, 18, 0.45); }
.jfs-pagehero__content { position: relative; width: 100%; padding-top: 54px; padding-bottom: 40px; }
.jfs-pagehero__lead { margin-top: 14px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--muted-strong); }
.jfs-pagehero__lead-dark { margin-top: 14px; max-width: 640px; font-size: 16px; color: var(--text-stone); }
.jfs-pagehero--plain { background: var(--chalk); color: var(--text-dark); min-height: 0; }
.jfs-pagehero--plain .jfs-pagehero__content { padding-top: 46px; padding-bottom: 34px; }
.jfs-pagehero--compact { min-height: 260px; }
.jfs-pagehero--depth { background-image: var(--grad-depth); min-height: 300px; }
.jfs-crumbbar { background: var(--ink-800); }
.jfs-crumbbar .jfs-breadcrumb { margin: 0; padding: 12px 0; }
.jfs-catalog { display: grid; grid-template-columns: 258px 1fr; gap: 36px; align-items: start; }
.jfs-filters { background: #fff; border: 1px solid var(--line-light); padding: 18px; position: sticky; top: 16px; }
.jfs-filters__group { margin-bottom: 20px; }
.jfs-filters__heading { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-stone); margin-bottom: 10px; }
.jfs-filters__cats { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.jfs-filters__cats a:hover { color: var(--pine); }
.jfs-filters__cats .is-active a { color: var(--pine); font-weight: 600; }
.jfs-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jfs-chip--input { cursor: pointer; }
.jfs-chip--input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jfs-chip--input:has(input:checked) { box-shadow: inset 0 0 0 2px currentColor; }
.jfs-filters__range { display: flex; align-items: center; gap: 8px; }
.jfs-filters__range input { width: 100%; background: #fff; border: 1px solid var(--line-light); border-radius: 2px; padding: 9px 10px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dark); }
.jfs-filters__clear { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--text-stone); text-decoration: underline; }
.jfs-filters__clear:hover { color: var(--pine); }
.jfs-catalog__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.jfs-catalog__count { font-family: var(--font-mono); font-size: 13px; color: var(--text-stone); }
.jfs-catalog__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jfs-catalog__clear { font-size: 13px; color: var(--text-stone); text-decoration: underline; align-self: center; }
.jfs-catalog__sort { margin-left: auto; }
.jfs-catalog__sort label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-stone); }
.jfs-catalog__sort select { border: 1px solid var(--line-light); background: #fff; padding: 8px 10px; font-size: 13px; border-radius: 2px; color: var(--text-dark); }
.jfs-product { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; }
.jfs-product__stage { position: relative; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line-light); overflow: hidden; }
.jfs-product__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.jfs-product__img.is-active { display: block; }
.jfs-product__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.jfs-product__thumb { width: 70px; height: 56px; border: 1px solid var(--line-light); overflow: hidden; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.jfs-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.jfs-product__thumb.is-active { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.jfs-product__thumb--doc { flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 10px; color: var(--text-stone); }
.jfs-product__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.jfs-product__title { margin-bottom: 14px; }
.jfs-product__brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line-light); background: #fff; padding: 11px 14px; font-size: 14px; margin-bottom: 16px; }
.jfs-product__short { font-size: 15px; line-height: 1.65; margin-bottom: 10px; }
.jfs-product__codes { font-family: var(--font-mono); font-size: 13px; color: var(--text-stone); margin-bottom: 18px; }
.jfs-product__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.jfs-product__trust { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; font-size: 13px; color: var(--text-stone); }
.jfs-product__trust li { display: flex; align-items: center; gap: 8px; }
.jfs-product__trust .jfs-icon { color: var(--success); }
.jfs-rfq { position: relative; background-image: linear-gradient(102deg, #15201D 0%, #123A31 45%, #0B564D 78%, #0F6E62 100%); padding: 62px 0; color: var(--muted-strong); overflow: hidden; }
.jfs-rfq::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(78deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 28px); pointer-events: none; }
.jfs-rfq__grid { position: relative; display: grid; grid-template-columns: 1fr 440px; gap: 44px; align-items: center; }
.jfs-rfq__text { margin-top: 12px; line-height: 1.7; }
.jfs-cta-band { background-image: var(--grad-depth); position: relative; overflow: hidden; padding: 46px 0; color: var(--muted-strong); }
.jfs-cta-band::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(78deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 28px); }
.jfs-cta-band__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.jfs-cta-band__text { margin-top: 8px; }
.jfs-spares { background-image: linear-gradient(102deg, #15201D 0%, #1C2A25 40%, #123A31 75%, #0B564D 100%); position: relative; overflow: hidden; padding: 56px 0; color: var(--muted-strong); }
.jfs-spares::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(78deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 28px); }
.jfs-spares .jfs-split { position: relative; align-items: center; }
.jfs-contact-forms { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; }
.jfs-contact-forms__side { display: flex; flex-direction: column; gap: 24px; }
.jfs-contact-card { background: #fff; border: 1px solid var(--line-light); padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.jfs-contact-card--water::before { border-color: var(--pine); }
.jfs-contact-card--gas::before { border-color: var(--gas); }
.jfs-contact-card--oil::before { border-color: var(--pine-light); }
.jfs-contact-card__title { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.jfs-contact-card__note { font-size: 13px; color: var(--text-stone); }
.jfs-contact-card__lines { font-size: 14px; line-height: 1.7; }
.jfs-contact-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 14px; color: var(--text-dark); }
.jfs-contact-link:hover { color: var(--pine); }
.jfs-contact-link .jfs-icon { color: var(--pine); }
.jfs-contact-link__note { font-family: var(--font-body); font-size: 12px; color: var(--text-stone); }
.jfs-contact-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.jfs-contact-lines__block { font-size: 14px; line-height: 1.7; }
.jfs-quick-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.jfs-regions { display: flex; flex-direction: column; margin-top: 18px; }
.jfs-region { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ink-700); flex-wrap: wrap; }
.jfs-region__name { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--text-on-dark); }
.jfs-region__countries { font-family: var(--font-mono); font-size: 13px; color: var(--muted-on-dark); }
.jfs-side-heading { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-stone); margin-bottom: 6px; }
.jfs-side-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--line-light); padding: 13px 15px; font-family: var(--font-head); font-weight: 500; font-size: 14px; }
.jfs-side-link:hover { border-color: var(--pine); color: var(--pine); }
.jfs-catalog-division { background: #fff; border: 1px solid var(--line-light); padding: 20px; }
.jfs-catalog-division .jfs-rule { width: 46px; margin-bottom: 14px; }
.jfs-catalog-division__title { font-size: 19px; }
.jfs-catalog-division__title a:hover { color: var(--pine); }
.jfs-catalog-division__text { margin: 8px 0 14px; font-size: 13px; color: var(--text-stone); line-height: 1.6; }
.jfs-catalog-division__list { display: flex; flex-direction: column; }
.jfs-catalog-division__list a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--mist); }
.jfs-catalog-division__list a:hover { color: var(--pine); }
.jfs-404 { text-align: center; padding: 90px 0; }
.jfs-404__code { font-family: var(--font-mono); font-size: 15px; color: var(--pine); letter-spacing: 0.3em; margin-bottom: 10px; }
.jfs-404__text { max-width: 480px; margin: 14px auto 24px; color: var(--text-stone); }
.jfs-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jfs-404__search, .jfs-empty__search { display: flex; gap: 10px; max-width: 460px; margin: 26px auto 0; }
.jfs-404__search input, .jfs-empty__search input { flex: 1; border: 1px solid var(--line-light); border-radius: 2px; padding: 11px 14px; font: inherit; font-size: 14px; }
.jfs-empty { text-align: center; padding: 50px 20px; background: #fff; border: 1px solid var(--line-light); }
.jfs-empty p { margin-top: 10px; color: var(--text-stone); }
.jfs-form-status:empty { display: none; }
.jfs-btn { transform: skewX(-12deg); border-radius: 0; }
.jfs-btn > * { transform: skewX(12deg); }
.jfs-btn .jfs-arrow { transition: transform 0.2s ease; }
.jfs-btn:hover .jfs-arrow { transform: skewX(12deg) translateX(5px); }
.jfs-btn--primary { box-shadow: 4px 4px 0 rgba(11, 86, 77, 0.28); }
.jfs-btn--primary:hover { box-shadow: 2px 2px 0 rgba(11, 86, 77, 0.38); }
.jfs-btn--dark { box-shadow: 4px 4px 0 rgba(15, 110, 98, 0.35); }
.jfs-header__cta { margin-right: 6px; }
.jfs-filterbar { background: #fff; border: 1px solid var(--line-light); border-top: 4px solid var(--pine); padding: 16px 18px 18px; margin-bottom: 24px; }
.jfs-filterbar__cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.jfs-filterbar__cat { flex: none; white-space: nowrap; padding: 9px 14px; border: 1px solid var(--line-light); font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-stone); }
.jfs-filterbar__cat:hover { border-color: var(--pine); color: var(--pine); }
.jfs-filterbar__cat.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.jfs-filterbar__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.jfs-filterbar__group { display: inline-flex; align-items: center; gap: 9px; }
.jfs-filterbar__label { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-stone); }
.jfs-filterbar__num { width: 82px; border: 1px solid var(--line-light); border-radius: 2px; padding: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dark); background: #fff; }
.jfs-filterbar__dash { color: var(--text-stone); }
.jfs-filterbar__clear { font-size: 13px; color: var(--text-stone); text-decoration: underline; }
.jfs-filterbar__clear:hover { color: var(--pine); }
.jfs-dd { position: relative; }
.jfs-dd summary { list-style: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border: 1px solid var(--line-light); background: #fff; cursor: pointer; font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dark); }
.jfs-dd summary::-webkit-details-marker { display: none; }
.jfs-dd[open] summary { border-color: var(--pine); color: var(--pine); }
.jfs-dd__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background: var(--pine); color: #fff; font-size: 11px; }
.jfs-dd__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 260px; max-height: 300px; overflow: auto; background: #fff; border: 1px solid var(--line-light); box-shadow: var(--shadow-overlay); padding: 12px 14px; }
.jfs-grid--products-wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@media (max-width: 767px) {
  .jfs-filterbar__form { gap: 10px 14px; }
  .jfs-filterbar__num { width: 70px; }
  .jfs-dd__panel { left: auto; right: auto; min-width: 230px; }
}
.jfs-card--clean { position: relative; }
.jfs-card--clean .jfs-card__body { gap: 6px; padding: 15px 16px 17px; }
.jfs-card__type { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-stone); }
.jfs-card__maker { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--pine); }
.jfs-card__link::after { content: ''; position: absolute; inset: 0; }
.jfs-card--clean .jfs-card__title { font-size: 16px; }