/* =====================================================================
   Гидра Фильтр — Internal pages polish (2026)
   Lightweight, restrained refinements for the standard Flatsome
   left-sidebar pages (about / catalog / product / contacts …).
   Scoped to .page-wrapper (content) and #secondary (sidebar) so it
   never affects the redesigned front page, header or footer.
   Brand tokens mirror assets/css/redesign.css.
   ===================================================================== */

.page-wrapper {
    --i-navy:    #0b1f3a;
    --i-ink:     #2a3a4d;
    --i-blue:    #1478d1;
    --i-blue-d:  #0b57c4;
    --i-cyan:    #0aa2e0;
    --i-accent:  linear-gradient(120deg, #0aa2e0 0%, #1478d1 60%, #0b57c4 100%);
    --i-muted:   #5b6b7f;
    --i-line:    #e5ecf4;
    --i-bg-soft: #f4f8fc;
    --i-radius:  14px;
    --i-radius-sm: 10px;
    --i-shadow:  0 12px 34px -20px rgba(11, 31, 58, .38);
}

/* ---------------------------------------------------------------------
   Page title
   --------------------------------------------------------------------- */
.page-wrapper .entry-header { margin-bottom: 26px; }
.page-wrapper .entry-header .section-title {
    border: 0;
    margin: 0;
}
.page-wrapper .entry-header .section-title-main {
    display: inline-block;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--i-navy);
    padding: 0 0 16px;
    border: 0;
    position: relative;
}
.page-wrapper .entry-header .section-title-main::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--i-accent);
}
/* Neutralise Flatsome's default centre divider lines around the title */
.page-wrapper .entry-header .section-title::before,
.page-wrapper .entry-header .section-title::after { display: none; }

/* ---------------------------------------------------------------------
   Content typography & rhythm
   --------------------------------------------------------------------- */
.page-wrapper .page-inner,
.page-wrapper .col-inner {
    color: var(--i-ink);
    font-size: 16px;
    line-height: 1.72;
}
.page-wrapper .page-inner p { margin: 0 0 1.15em; }

.page-wrapper .page-inner h2,
.page-wrapper .page-inner h3,
.page-wrapper .page-inner h4 {
    color: var(--i-navy);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.page-wrapper .page-inner h2 {
    font-size: clamp(21px, 2vw, 27px);
    margin: 1.9em 0 .7em;
}
.page-wrapper .page-inner h3 {
    font-size: clamp(18px, 1.5vw, 21px);
    margin: 1.7em 0 .6em;
    padding-left: 14px;
    position: relative;
}
.page-wrapper .page-inner h3::before {
    content: "";
    position: absolute;
    left: 0; top: .16em;
    width: 4px; height: 1.05em;
    border-radius: 3px;
    background: var(--i-accent);
}
.page-wrapper .page-inner h4 { font-size: 18px; margin: 1.5em 0 .5em; }

/* First heading shouldn't push away from the title */
.page-wrapper .page-inner > h2:first-child,
.page-wrapper .page-inner > h3:first-child,
.page-wrapper .page-inner > h4:first-child { margin-top: 0; }

/* Links */
.page-wrapper .page-inner a:not(.button) {
    color: var(--i-blue-d);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(20, 120, 209, .28);
    transition: color .18s ease, box-shadow .18s ease;
}
.page-wrapper .page-inner a:not(.button):hover {
    color: var(--i-cyan);
    box-shadow: inset 0 -2px 0 var(--i-cyan);
}

/* Lists */
.page-wrapper .page-inner ul,
.page-wrapper .page-inner ol { margin: 0 0 1.2em; padding-left: 0; }
.page-wrapper .page-inner ul { list-style: none; }
.page-wrapper .page-inner ul > li {
    position: relative;
    padding-left: 26px;
    margin-bottom: .5em;
}
.page-wrapper .page-inner ul > li::before {
    content: "";
    position: absolute;
    left: 4px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--i-cyan);
    box-shadow: 0 0 0 3px rgba(10, 162, 224, .14);
}
.page-wrapper .page-inner ol { list-style: none; counter-reset: li; padding-left: 0; }
.page-wrapper .page-inner ol > li {
    position: relative;
    padding-left: 34px;
    margin-bottom: .5em;
    counter-increment: li;
}
.page-wrapper .page-inner ol > li::before {
    content: counter(li);
    position: absolute;
    left: 0; top: .05em;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--i-bg-soft);
    color: var(--i-blue-d);
    font-size: 12px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
/* Nested lists keep their offset tidy */
.page-wrapper .page-inner li > ul,
.page-wrapper .page-inner li > ol { margin: .5em 0 0; }

/* Emphasis */
.page-wrapper .page-inner strong,
.page-wrapper .page-inner b { color: var(--i-navy); font-weight: 700; }

/* Blockquote (rare, but make it presentable) */
.page-wrapper .page-inner blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--i-blue);
    color: var(--i-muted);
    font-style: italic;
}

/* ---------------------------------------------------------------------
   Content images & embeds
   --------------------------------------------------------------------- */
.page-wrapper .page-inner img { height: auto; border-radius: var(--i-radius-sm); }
/* Floated images get breathing room */
.page-wrapper .page-inner img.alignleft  { float: left;  margin: .3em 26px 18px 0; max-width: 46%; }
.page-wrapper .page-inner img.alignright { float: right; margin: .3em 0 18px 26px; max-width: 46%; }
.page-wrapper .page-inner img.aligncenter { margin-left: auto; margin-right: auto; }
/* Media inside tables (product spec image + drawings) — subtle frame */
.page-wrapper .page-inner td img {
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius-sm);
    padding: 4px;
    background: #fff;
    margin: 4px auto;
}
.page-wrapper .page-inner a img { transition: transform .2s ease, box-shadow .25s ease; }
.page-wrapper .page-inner a:hover img { box-shadow: var(--i-shadow); }

/* Responsive iframes (YouTube etc.) */
.page-wrapper .page-inner iframe { max-width: 100%; border: 0; border-radius: var(--i-radius-sm); }

/* ---------------------------------------------------------------------
   Catalog category cards
   --------------------------------------------------------------------- */
.page-wrapper .page-inner .filtry-main {
    align-items: stretch;
    row-gap: 22px;
}
.page-wrapper .page-inner .filtry-main > .col {
    display: flex;
}
.page-wrapper .page-inner .filtry-main > .col > .col-inner,
.page-wrapper .page-inner .filtry-main .box {
    width: 100%;
    height: 100%;
}
.page-wrapper .page-inner .filtry-main .box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px 12px 14px;
    border-radius: var(--i-radius-sm);
}
.page-wrapper .page-inner .filtry-main .box > a {
    display: block;
}
.page-wrapper .page-inner .filtry-main .box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
}
.page-wrapper .page-inner .filtry-main .box-image > div {
    width: 100%;
    text-align: center;
}
.page-wrapper .page-inner .filtry-main .box-image img {
    width: auto;
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
}
.page-wrapper .page-inner .filtry-main .box-text.text-center {
    display: flex;
    flex: 1 1 auto;
    padding: 20px 0 0;
}
.page-wrapper .page-inner .filtry-main .box-text-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 258px;
}
.page-wrapper .page-inner .filtry-main .box-text-bottom h4 {
    min-height: 44px;
    margin: 0 0 10px;
    color: var(--i-navy);
    font-size: 14px;
    line-height: 1.25;
}
.page-wrapper .page-inner .filtry-main .box-text-inner p {
    margin: 0 0 6px;
    color: var(--i-ink);
    font-size: 14px;
    line-height: 1.45;
}
.page-wrapper .page-inner .filtry-main .box-text-inner p:empty {
    display: none;
}
.page-wrapper .page-inner .filtry-main .box-text-inner .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 13px;
    line-height: 1;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: auto;
    margin-bottom: 0;
}
.page-wrapper .page-inner .filtry-main .box-text-inner .button span {
    line-height: 1;
}
@media (min-width: 850px) and (max-width: 1279px) {
    .page-wrapper .page-inner .filtry-main.five-columns > .large-2,
    .page-wrapper .page-inner .filtry-main.five-columns > .medium-2 {
        max-width: 33.333%;
        flex-basis: 33.333%;
    }
}
@media (max-width: 549px) {
    .page-wrapper .page-inner .filtry-main .box-text-inner {
        min-height: 0;
    }
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.page-wrapper .page-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.6em;
    font-size: 15px;
    background: #fff;
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius);
    overflow: hidden;      /* clip rounded corners */
}
.page-wrapper .page-inner table td,
.page-wrapper .page-inner table th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--i-line);
    text-align: left;
    vertical-align: middle;
}
.page-wrapper .page-inner table tr:last-child td,
.page-wrapper .page-inner table tr:last-child th { border-bottom: 0; }
.page-wrapper .page-inner table th {
    /* Light header: stays clean for plain headers and preserves any
       author colour-coding inside header cells (e.g. disc-colour specs) */
    background: #eef4fb;
    color: var(--i-navy);
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 2px solid var(--i-blue);
}
/* Zebra for readability */
.page-wrapper .page-inner table tbody tr:nth-child(even) td { background: var(--i-bg-soft); }
/* Key column emphasis (spec / requisites tables) */
.page-wrapper .page-inner table td strong,
.page-wrapper .page-inner table td b { color: var(--i-navy); }

/* .t1 = legacy data tables (dimensions, filtration specs) */
.page-wrapper .page-inner table.t1 td:first-child { font-weight: 600; color: var(--i-navy); }

/* Horizontal scroll safety on narrow screens */
.page-wrapper .page-inner table { display: table; }

/* ---------------------------------------------------------------------
   Sidebar navigation
   --------------------------------------------------------------------- */
#secondary.widget-area { padding-top: 4px; }

/* Section headings (custom-html widgets acting as group titles) */
#secondary .widget-title {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--i-navy, #0b1f3a);
    margin: 22px 0 4px;
}
#secondary .widget-title a { color: inherit; }
#secondary .widget-title a:hover { color: #1478d1; }
#secondary .widget_custom_html:first-child .widget-title { margin-top: 0; }
#secondary .is-divider.small { background: linear-gradient(90deg, #1478d1, transparent); height: 3px; width: 44px; opacity: 1; margin-top: 8px; }

/* Menu items */
#secondary .widget_nav_menu ul.menu { margin: 6px 0 4px; padding: 0; list-style: none; }
#secondary .widget_nav_menu ul.menu li { margin: 0; border: 0; }
#secondary .widget_nav_menu ul.menu a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #2a3a4d;
    border-radius: 8px;
    transition: background .16s ease, color .16s ease;
}
#secondary .widget_nav_menu ul.menu a:hover {
    background: #eef4fb;
    color: #0b57c4;
}
#secondary .widget_nav_menu ul.menu .sub-menu {
    margin: 2px 0 6px;
    padding: 0 0 0 12px;
    border-left: 1px solid #e5ecf4;
    list-style: none;
}
#secondary .widget_nav_menu ul.menu .sub-menu a {
    padding: 6px 12px;
    font-size: 13.5px;
    color: #5b6b7f;
}
/* Current page highlight */
#secondary .widget_nav_menu ul.menu .current-menu-item > a,
#secondary .widget_nav_menu ul.menu .current_page_item > a {
    background: linear-gradient(120deg, rgba(10,162,224,.12), rgba(11,87,196,.12));
    color: #0b57c4;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #1478d1;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 549px) {
    .page-wrapper .page-inner { font-size: 15.5px; }
    /* Let wide legacy tables scroll instead of overflowing */
    .page-wrapper .page-inner table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .page-wrapper .page-inner img.alignleft,
    .page-wrapper .page-inner img.alignright {
        float: none;
        display: block;
        margin: 0 auto 18px;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Projects archive
   --------------------------------------------------------------------- */
.hydra-projects {
    --p-navy: #0b1f3a;
    --p-ink: #2a3a4d;
    --p-muted: #5b6b7f;
    --p-blue: #1478d1;
    --p-blue-dark: #0b57c4;
    --p-cyan: #0aa2e0;
    --p-orange: #e66b21;
    --p-line: #e5ecf4;
    --p-soft: #f4f8fc;
    --p-shadow: 0 16px 36px -24px rgba(11, 31, 58, .45);
    color: var(--p-ink);
    padding: 10px 0 46px;
}

.hydra-projects__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: end;
    padding: 36px 0 28px;
    border-bottom: 1px solid var(--p-line);
}

.hydra-projects__intro {
    max-width: 780px;
}

.hydra-projects__eyebrow,
.hydra-project__tag {
    display: inline-block;
    color: var(--p-blue-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.hydra-projects h1 {
    margin: 10px 0 14px;
    color: var(--p-navy);
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
}

.hydra-projects__intro p {
    max-width: 720px;
    margin: 0;
    color: var(--p-muted);
    font-size: 18px;
    line-height: 1.62;
}

.hydra-projects__summary {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--p-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--p-shadow);
}

.hydra-projects__summary span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.35;
}

.hydra-projects__summary b {
    color: var(--p-orange);
    font-size: 24px;
    line-height: 1;
}

.hydra-projects__nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    max-height: 430px;
    margin: 22px 0 24px;
    padding-right: 4px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.hydra-projects__nav a {
    display: flex;
    min-height: 60px;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--p-line);
    border-radius: 8px;
    background: #fff;
    color: var(--p-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hydra-projects__nav a:hover {
    border-color: rgba(20, 120, 209, .42);
    box-shadow: var(--p-shadow);
    transform: translateY(-1px);
}

.hydra-projects__nav span,
.hydra-project__num {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--p-soft);
    color: var(--p-blue-dark);
    font-size: 13px;
    font-weight: 800;
}

.hydra-projects__list {
    display: grid;
    gap: 22px;
}

.hydra-project {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    overflow: hidden;
    border: 1px solid var(--p-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--p-shadow);
}

.hydra-project__media {
    min-height: 100%;
    margin: 0;
    background: var(--p-soft);
}

.hydra-project__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    border-radius: 0;
}

.hydra-project__body {
    padding: 28px;
}

.hydra-project__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hydra-project h2 {
    margin: 0 0 12px;
    color: var(--p-navy);
    font-size: 28px;
    line-height: 1.22;
    font-weight: 800;
}

.hydra-project__lead {
    margin: 0 0 16px;
    color: var(--p-muted);
    font-size: 17px;
    line-height: 1.58;
}

.hydra-project__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.hydra-project__facts li {
    min-height: 72px;
    padding: 12px 12px 12px 14px;
    border-left: 3px solid var(--p-orange);
    background: var(--p-soft);
    color: var(--p-ink);
    font-size: 14px;
    line-height: 1.4;
}

.hydra-project__body p {
    margin: 0 0 12px;
    color: var(--p-ink);
    font-size: 16px;
    line-height: 1.66;
}

.hydra-project__body p:last-child {
    margin-bottom: 0;
}

.hydra-projects__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 24px 28px;
    border: 1px solid rgba(20, 120, 209, .22);
    border-radius: 8px;
    background: linear-gradient(120deg, rgba(10, 162, 224, .1), rgba(230, 107, 33, .1));
}

.hydra-projects__cta h2 {
    margin: 0 0 8px;
    color: var(--p-navy);
    font-size: 24px;
    line-height: 1.22;
}

.hydra-projects__cta p {
    max-width: 720px;
    margin: 0;
    color: var(--p-muted);
    font-size: 16px;
    line-height: 1.55;
}

.hydra-projects__cta .button {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 849px) {
    .hydra-projects__hero,
    .hydra-project {
        grid-template-columns: 1fr;
    }

    .hydra-projects h1 {
        font-size: 32px;
    }

    .hydra-projects__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 360px;
    }

    .hydra-project__media img {
        min-height: 260px;
        aspect-ratio: 16 / 10;
    }

    .hydra-project__facts {
        grid-template-columns: 1fr;
    }

    .hydra-projects__cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 549px) {
    .hydra-projects {
        padding-bottom: 30px;
    }

    .hydra-projects__hero {
        padding-top: 20px;
    }

    .hydra-projects h1 {
        font-size: 28px;
    }

    .hydra-projects__intro p,
    .hydra-project__lead {
        font-size: 16px;
    }

    .hydra-projects__nav {
        grid-template-columns: 1fr;
        max-height: 320px;
    }

    .hydra-project__body,
    .hydra-projects__cta {
        padding: 20px;
    }

    .hydra-project h2 {
        font-size: 23px;
    }
}