@manufacturer__color: #333;
@manufacturer__muted__color: #666;
@manufacturer__inverse__color: #fff;
@manufacturer__border-color: #ddd;
@manufacturer__accent__color: #3184ca;
@manufacturer__accent__background: #eaf3fa;
@manufacturer__notice__background: #f8f8f8;
@manufacturer__error__color: #d32f2f;
@manufacturer__error__background: #fff1f1;
@manufacturer__error__border-color: #ffd6d6;
@manufacturer__glow-dark__color: #000;

.manufacturer-message(
    @background,
    @border-color
) {
    background: @background;
    border: 1px solid @border-color;
    border-radius: 4px;
    margin: 20px;
    padding: 20px;
    text-align: center;
}

.manufacturer-heading() {
    color: @manufacturer__color;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}

.manufacturer-overlay() {
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.manufacturer-logo-glow(@color) {
    background: radial-gradient(closest-side, fade(@color, 80%) 0%, fade(@color, 68%) 50%, fade(@color, 32%) 78%, fade(@color, 0%) 100%);
}

& when (@media-common = true) {
    .manufacturer-list {
        .manufacturer-grid {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            padding: 20px;
        }

        .manufacturer-item a {
            border: 1px solid @manufacturer__border-color;
            border-radius: 4px;
            color: @manufacturer__color;
            display: block;
            font-size: 16px;
            font-weight: 500;
            height: 100%;
            padding: 15px;
            text-align: center;
            text-decoration: none;
            transition: all .3s ease;
            width: 100%;

            &:hover {
                background-color: @manufacturer__accent__background;
                box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
                transform: translateY(-2px);
            }
        }

        .message.info.empty {
            .manufacturer-message(@manufacturer__notice__background, @manufacturer__border-color);
        }
    }

    .manufacturer-view {
        .manufacturer-content {
            margin: 0;
            max-width: 100%;
            padding: 0;

            .cms-page-content {
                margin: 0;
                max-width: 100%;
                padding: 0;
                width: 100%;
            }
        }

        .message.error {
            .manufacturer-message(@manufacturer__error__background, @manufacturer__error__border-color);
            color: @manufacturer__error__color;
        }

        .message.info {
            .manufacturer-message(@manufacturer__notice__background, @manufacturer__border-color);
        }
    }

    .manufacturers-index-view {
        .page-wrapper {
            .page-main {
                max-width: 100% !important;
                padding: 0 !important;
                width: 100% !important;
            }

            .manufacturer-main-content {
                .homepage-blog {
                    margin-bottom: 0;

                    .widget-post-list {
                        margin-bottom: 0;
                    }
                }

                .homepage-benefits-footer {
                    margin: 10px 0 40px;

                    .homepage-benefits-subheader {
                        margin: 0;
                    }
                }
            }
        }

        #featured_product h2 {
            font-weight: 500;
        }
    }

    .manufacturer-main-content {
        margin: 0 auto;
        max-width: 1370px;
        padding: 0;
    }

    .manufacturer-hero {
        align-items: end;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        overflow: hidden;
        position: relative;
        text-align: center;

        &::after {
            .manufacturer-overlay();
            background: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%);
            pointer-events: none;
            z-index: 1;
        }

        .manufacturer-hero-media {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;

            img {
                display: block;
                height: 100%;
                object-fit: cover;
                object-position: center;
                width: 100%;
            }
        }

        .manufacturer-hero-content {
            margin-bottom: 60px;
            padding: 15px;
            position: relative;
            z-index: 2;
        }

        .manufacturer-brand {
            color: @manufacturer__inverse__color;
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
        }

        .manufacturer-logo {
            display: inline-block;
            font: inherit;
            margin: 0 0 10px;
            padding: 12px 30px;
            position: relative;

            &::before {
                .manufacturer-overlay();
                .manufacturer-logo-glow(@manufacturer__inverse__color);
                opacity: 0;
                transition: opacity .4s ease;
                z-index: -1;
            }

            &.is-light::before {
                .manufacturer-logo-glow(@manufacturer__glow-dark__color);
            }

            &.is-ready::before {
                opacity: 1;
            }

            img {
                background-color: transparent;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
                height: 126px !important;
                object-fit: contain;
                width: 252px !important;
            }
        }

        .manufacturer-motto {
            color: @manufacturer__inverse__color;
            font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
            font-size: 26.4px;
            font-style: italic;
            font-weight: 400;
            letter-spacing: .2px;
            line-height: 1.4;
            margin: 0 auto;
            max-width: 25em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 14px rgba(0, 0, 0, .55);
            text-wrap: balance;
        }

        @media screen and (min-width: 768px) {
            .manufacturer-hero-content {
                margin-bottom: 80px;
                padding: 25px;
            }

            .manufacturer-logo {
                margin-bottom: 14px;
                padding: 16px 40px;

                img {
                    height: 168px !important;
                    width: 336px !important;
                }
            }

            .manufacturer-motto {
                font-size: 29.9px;
                line-height: 1.45;
            }
        }
    }

    .manufacturer-top-categories {
        @category-image-size: 270px;
        @category-card-padding: 10px;
        @category-card-border: 1px;
        @category-card-width: @category-image-size + (@category-card-padding + @category-card-border) * 2;
        @category-grid-gap: 20px;

        border-radius: 4px;
        margin: 0 0 30px;
        padding: 0 20px;
        text-align: center;

        h2 {
            .manufacturer-heading();
            margin-top: 0;
            text-align: left;
        }

        .category-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;

            .category-item {
                max-width: calc(~'50% - 6px');
                width: @category-card-width;

                &:only-child {
                    max-width: 100%;
                }

                .category-link {
                    background-color: @manufacturer__inverse__color;
                    border: @category-card-border solid rgba(55, 55, 55, .1);
                    border-radius: 14px;
                    box-sizing: border-box;
                    color: inherit;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    padding: @category-card-padding;
                    text-decoration: none;
                    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;

                    &:hover {
                        border-color: @manufacturer__accent__color;
                        box-shadow: 0 8px 20px fade(@manufacturer__accent__color, 18%);
                        transform: translateY(-5px);

                        .category-name {
                            background-color: @manufacturer__accent__color;
                            color: @manufacturer__inverse__color;
                        }
                    }
                }

                .category-name {
                    align-items: center;
                    background-color: @manufacturer__accent__background;
                    border-radius: 10px;
                    color: @manufacturer__color;
                    display: flex;
                    flex: 1;
                    font-size: 14px;
                    font-weight: 500;
                    justify-content: center;
                    padding: 8px;
                    transition: background-color .3s ease, color .3s ease;
                }

                .category-image {
                    border-radius: 8px;
                    margin: @category-card-padding 0 0;
                    overflow: hidden;

                    img {
                        aspect-ratio: 1;
                        display: block;
                        height: auto;
                        object-fit: contain;
                        width: 100%;
                    }
                }
            }

            @media screen and (min-width: 768px) {
                gap: @category-grid-gap;

                &:has(.category-item:nth-child(5):last-child) {
                    margin: 0 auto;
                    max-width: @category-card-width * 3 + @category-grid-gap * 2;
                }

                .category-item .category-name {
                    font-size: 16px;
                }
            }
        }
    }

    .manufacturer-info-widget {
        margin-bottom: 40px;
        margin-top: 30px;
        padding: 0 20px;

        h3 {
            .manufacturer-heading();
        }

        .content {
            color: @manufacturer__muted__color;
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 40px;
        }
    }

    @media screen and (min-width: 768px) {
        .page-footer-menu .links .manufacturers-link {
            display: none;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .manufacturers-index-index {
        .page-title-wrapper {
            padding: 75px 15px 0;
        }

        .manufacturer-list {
            .manufacturer-grid {
                gap: 12px;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 15px;
            }

            .manufacturer-item a {
                align-items: center;
                display: flex;
                font-size: 14px;
                justify-content: center;
                overflow-wrap: anywhere;
                padding: 12px 8px;
            }
        }
    }

    .manufacturers-index-view .page-wrapper .manufacturer-main-content .homepage-benefits-footer {
        margin: 0 0 30px;
    }

    #top_products_widget .products.list .product-item {
        margin: 0 auto;
        width: 90%;

        .action-price {
            gap: 20px;
            justify-content: center;
        }
    }

    .manufacturer-main-content .homepage-benefits-footer .benefits-list {
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-wrap: nowrap;
        margin: 0 -15px;
        overflow-x: auto;
        padding: 10px 0;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .benefit {
            flex: 0 0 140px;
            margin-right: 10px;
            min-width: 140px;

            .text-area {
                white-space: normal !important;
                word-wrap: break-word;

                br {
                    display: block !important;
                }
            }
        }
    }
}