.catalog-page {
    .product-mobile-image{
        display: none;
    }
    .catalog-hero {
        margin: 15px;
        border-radius: 15px;
        display: flex;
        align-items: flex-end;
        padding: 130px 0 70px;
        background: linear-gradient(90deg, #000000cf 50%, #00000038), url('./assets/images/hero-bg6.png') center / cover no-repeat;
        color: #fff;

        .subtitle {
            font-size: 14px;
            letter-spacing: .12em;
            text-transform: uppercase;
            opacity: .85;
            margin-bottom: 10px;
        }

        h1 {
            margin: 0;
            font-size: clamp(30px, 5vw, 56px);
            line-height: 1.08;
        }

        .catalog-breadcrumbs {
            margin: 14px 0 0;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            color: #ffffffbf;
            position: static;
            z-index: auto;

            a {
                color: #ffffffd9;

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    .catalog-breadcrumbs {
        margin: 12px auto 14px;
        color: #4d6383;
        font-size: 14px;
        background: #fff;
        border: 1px solid #dbe6f5;
        border-radius: 12px;
        padding: 10px 14px;
        line-height: 1.4;
        box-shadow: 0 6px 18px #08162a0d;
        position: relative;
        z-index: 2;

        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: #2086f8;
            }
        }
    }

    .catalog-search {
        margin-top: -52px;
        padding-bottom: 26px;

        .inner {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 10px 24px #06142a14;
            padding: 12px;
            display: flex;
            gap: 12px;
            align-items: center;
        }
    }

    .catalog-search-input {
        border: 1px solid #cdd9ea;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 13px;
        width: 100%;
        background: #fff;
        color: #0c1e21;
    }

    .catalog-search-btn {
        border: 0;
        border-radius: 12px;
        height: 44px;
        min-width: 44px;
        padding: 0 16px;
        background: #2086f8;
        color: #fff;
        cursor: pointer;
    }

    .catalog-grid {
        column-count: 2;
        column-gap: 16px;
        padding-bottom: 64px;
    }

    .catalog-card {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 14px 32px #08162a12;
        overflow: hidden;
        padding: 18px;
        display: inline-block;
        width: 100%;
        margin: 0 0 16px;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    .catalog-card-title {
        margin: 0 0 14px;
        font-size: 22px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 10px;
        i{
            color: #2086f8;
        }
        a {
            text-decoration: none;
            color: #0c1e21;
        }
    }

    .catalog-links {
        display: grid;
    }

    .catalog-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 3px;
        text-decoration: none;
        color: #1e365a;
        font-size: 14px;
        border-bottom: 1px solid #efefef;
        &:last-child{
            border-bottom: none;
        }
        &:hover {
            background: #f1f7ff;
        }
    }

    .catalog-siblings {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 18px;
    }

    .catalog-sibling {
        border: 1px solid #ced9eb;
        border-radius: 999px;
        padding: 8px 14px;
        text-decoration: none;
        color: #395172;
        font-size: 14px;

        &.current {
            border-color: #2086f8;
            color: #fff;
            background: #2086f8;
        }
    }

    .catalog-child-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 18px;
    }

    .catalog-child-card {
        text-decoration: none;
        color: inherit;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 24px #08162a12;
        overflow: hidden;
    }

    .catalog-child-image {
        margin: 20px;
        height: 160px;
        background: #ffffff center / contain no-repeat;
    }

    .catalog-child-name {
        padding: 12px;
        font-size: 14px;
        color: #1f3552;
    }

    .catalog-products {
        display: grid;
        gap: 10px;
    }

    .catalog-product-item {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 24px #08162a12;
        text-decoration: none;
        color: inherit;
        display: grid;
        grid-template-columns: 88px 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 10px;
    }

    .catalog-product-image {
        width: 88px;
        height: 88px;
        border-radius: 10px;
        background: #ffffff center / contain no-repeat;
    }

    .catalog-product-title {
        margin: 0 0 4px;
        font-size: 18px;
        line-height: 1.2;
        color: #122943;
    }

    .catalog-product-meta {
        font-size: 13px;
        color: #6a7f9c;
    }

    .catalog-product-brand {
        background: #e9f2ff;
        color: #2468bd;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 6px 11px;
        font-weight: 600;
        font-size: 13px;
    }

    .catalog-empty {
        padding: 28px;
        border-radius: 16px;
        background: #fff;
        color: #60708a;
    }

    .product-hero {
        margin: 15px;
        border-radius: 15px;
        background: linear-gradient(90deg, #000000cf 50%, #00000038), url('./assets/images/hero-bg5.png') center / cover no-repeat;
        color: #fff;
        padding: 130px 0 34px;

        .subtitle {
            font-size: 14px;
            letter-spacing: .12em;
            text-transform: uppercase;
            opacity: .85;
            margin-bottom: 10px;
        }

        h1 {
            margin: 0 0 12px;
            font-size: clamp(24px, 4vw, 46px);
            line-height: 1.08;
        }

        .catalog-breadcrumbs {
            margin: 14px 0 0;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            color: #ffffffbf;
            position: static;
            z-index: auto;

            a {
                color: #ffffffd9;

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    .product-hero-content {
        display: flex;
        gap: 24px;
        align-items: center;
    }

    .product-hero-image {
        max-height: 150px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        border-radius: 14px;
        margin-left: auto;
        overflow: hidden;
        background: white;
    }

    .product-hero-meta {
        font-size: 14px;
        opacity: .9;
    }

    .product-order-btn {
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: #2086f8;
        color: #fff;
        padding: 10px 18px;
        text-decoration: none;
        cursor: pointer;
    }

    .product-fields {
        padding: 28px 0 64px;

        .product-field-group {
            margin-bottom: 24px;
        }

        .product-field-group:last-child {
            margin-bottom: 0;
        }

        .product-field-title {
            margin: 0 0 16px;
            font-size: clamp(20px, 3vw, 34px);
            line-height: 1.2;
            color: #112944;
        }

        .product-field-children {
            display: grid;
            gap: 14px;
        }

        .type-container > h3 {
            line-height: 1.35;
        }

        .text-items {
            font-size: 15px;
            line-height: 1.7;
            color: #1f3653;
        }

        .text-items p,
        .text-items ul,
        .text-items ol {
            margin: 0 0 12px;
        }

        .text-items p:last-child,
        .text-items ul:last-child,
        .text-items ol:last-child {
            margin-bottom: 0;
        }

        .text-items ul,
        .text-items ol {
            padding-left: 20px;
        }

        .text-items li + li {
            margin-top: 6px;
        }

        .specification-items .name,
        .specification-items .value {
            font-size: 15px;
            line-height: 1.5;
        }
    }

    .type-container {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 24px #08162a12;
        margin-bottom: 14px;
        overflow: hidden;

        > h3 {
            margin: 0;
            padding: 14px 16px;
            background: #ffffff;
            border-bottom: 1px solid #ededed;
            color: #132a44;
            font-size: 18px;
        }

        .i-block {
            padding: 14px 16px;
        }
    }

    .specification-items {
        .item {
            padding: 9px 0;
            border-bottom: 1px solid #e8eef8;

            &:last-child {
                border-bottom: 0;
            }
        }

        .wrapper {
            display: flex;
            justify-content: space-between;
            gap: 14px;
        }
    }

    .attachment-items {
        display: grid;
        gap: 10px;

        .image-item .image {
            height: 140px;
            border-radius: 10px;
            background: #eef3fb center / cover no-repeat;
        }
        .file-item {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 15px;

            i {
                font-size: 22px;
                color: #2086f8;
            }
        }
    }

    @media (max-width: 1060px) {
        .catalog-child-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .product-hero-content {
            grid-template-columns: 240px 1fr;
        }
    }

    @media (max-width: 860px) {
        .catalog-grid {
            column-count: 1;
        }

        .catalog-child-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .catalog-product-item {
            grid-template-columns: 88px 1fr;
        }

        .catalog-product-brand {
            grid-column: 1 / -1;
        }

        .product-hero-content {
            grid-template-columns: 1fr;
        }

        .product-hero-image {
            max-height: 220px;
            width: min(320px, 100%);
        }
    }

    @media (max-width: 640px) {
        .product-fields {
            padding: 10px 0 0;
            .product-field-children {
                gap: 5px;
            }
            .product-field-title {
                font-size: 18px;
                margin: 0 0 5px 0;
            }
            .product-field-group {
                margin-bottom: 15px;
            }
        }
        .product-hero {
            padding: 80px 0 20px;
        }
        .product-hero-content {
            flex-direction: column;
        }
        .product-hero-image {
            margin-left: 0;
            align-self: baseline;
            max-width: 200px;
        }
        .product-mobile-image{
            display: flex;
            justify-content: center;
            align-items: anchor-center;
            background: white;
            margin: -120px auto 0;
            border-radius: 10px;
            height: 200px;
            width: 200px;
            box-shadow: 0 10px 24px #08162a12;
            img{
                width: 100%;
                max-width: 200px;
                height: auto;
            }
        }
        .catalog-hero {
            padding: 120px 0 85px;
            min-height: auto;

            .container {
            }
        }

        .catalog-search .inner {
            flex-direction: column;
            align-items: stretch;
        }

        .catalog-breadcrumbs {
            font-size: 13px;
            padding: 8px 10px;
        }

        .catalog-search-btn {
            width: 100%;
        }

        .catalog-child-grid {
            grid-template-columns: 1fr;
        }

        .type-container {
            margin-bottom: 0;
            border-radius: 12px;
            > h3 {
                cursor: pointer;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;

                &::after {
                    content: "+";
                    color: #2086f8;
                    font-size: 20px;
                    line-height: 1;
                    font-weight: 600;
                    flex-shrink: 0;
                }
            }

            .i-block {
                display: none;
            }

            &.open > h3::after {
                content: "-";
            }

            &.open .i-block {
                display: block;
                overflow: auto;
                background: #f9f9f9;
            }
        }
        /*.type-container:first-child{
            border-radius: 12px 12px 0 0;
        }
        .type-container:last-child{
            border-radius: 0 0 12px 12px;
        }*/
    }
}