/*@import "tailwindcss";*/
@layer project-styles, one-side, two-side, four-side, framework, framework-reset;

/*@import url('./framework.min.css');*/
/*@import url('//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css');*/
@import url('./framework/normalize.css');
@import url('./framework/display.css');
@import url('./framework/layout.css');
@import url('./framework/animations.css');
@import url('./framework/text.css');
@import url('./framework/position.css');
@import url('./framework/table.css');
@import url('./framework/forms.css');
/*@import url('./framework/list.css');*/
/*@import url('./framework/togglers.css');*/
/*@import url('./framework/sugar.css');*/
@import url('./framework/colors.css');
/*@import url('./framework/fonts.css');*/

@import url('./framework/plugins/hc-nav.css');
@import url('./framework/plugins/swiper.css');
@import url('./framework/plugins/fancybox.css');

:root {
    --standart-gap: 20rem;
    --font-family-regular: 'Jost';
    --font-family-title-regular: 'Roboto';
    --font-family-monospaced: 'Roboto Mono';
    scroll-padding-top: 120rem;
    scroll-behavior: smooth;
    background: #f7f7f7;
}

header {
    filter: drop-shadow(3rem 3rem 10rem rgba(0, 0, 0, .15));
}

body {
    --padding-top: 110rem;
    @media screen and (max-width: 600px) {
        --padding-top: 87rem;
    }
}

select, input, textarea, button, label,
html > * {
    font-size: clamp(max(9rem, 14rem), 1.5vw, 20rem);
}

.button {
    border-radius: calc(var(--standart-gap) * 0.5);
    border: 2rem solid transparent;
    --height: calc(var(--standart-gap) * 2.5);
    height: max(var(--height), fit-content);
    min-width: var(--height);

    --background-color: var(--color-blue);
    background-color: var(--background-color);
    color: white;

    &:hover {
        background-color: oklch(from var(--background-color) 75% c h);
        color: white;
    }

    &:active {
        background-color: oklch(from var(--background-color) 60% c h);
        color: white;
    }

    &:focus {
        border-color: oklch(from var(--background-color) 50% c h);
    }
}

.title {
    font-family: var(--font-family-title-regular) !important;
    font-size: clamp(max(12rem, 18rem), 1.6vw, 20rem);
}

h2.title {
    text-transform: uppercase;
    font-weight: 400;
    position: relative;
    --margin-bottom: 20rem;
    font-size: clamp(max(14rem, 20rem), 1.8vw, 32rem);

    &::after {
        content: "";
        --z-index: 0;
        z-index: var(--z-index);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -4rem;
        width: 120rem;
        height: 2rem;
        background-color: var(--color-brand);
    }
}

section {
    --padding-block: 50rem;
}

.breadcrumbs {
    & > ul {
        display: flex;

        & > li {
            a {
                --padding-block: 10rem;
            }

            &:not(:last-child)::after {
                --margin-inline: 5rem;
                --icon-weight: 400;
                display: inline-block;
                vertical-align: bottom;
                font-family: 'Material Symbols Outlined', sans-serif;
                font-variation-settings: 'FILL' 0, 'wght' var(--icon-weight), 'GRAD' 0, 'opsz' 24;
                content: "chevron_right";
            }
        }
    }
}

.item {
    filter: drop-shadow(3rem 3rem 10rem rgba(0, 0, 0, .15));
    transition: all .5s ease;

    .desktop-fotorama-container {
        overflow: hidden;

        img {
            transition: all .5s ease;
        }
    }

    &:hover {
        filter: drop-shadow(3rem 3rem 15rem rgba(0, 0, 0, .4));

        .desktop-fotorama-container img {
            transform: scale(1.08);
        }
    }
}

.page-main {
    .main-slider {
        --img-height: 500rem;
        @media screen and (max-width: 500px) {
            --img-height: 240rem;
        }
    }

    .features-list {
        background: #9aafaf;

        .title {
            text-align: center;
        }

        li {
            flex-basis: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5rem;

            .icon {
                font-size: 120rem;
                --icon-weight: 100;
            }
        }
    }

    .products-list {
        .item {
            display: grid;

            .info {
                background: white;
                display: grid;
                gap: 10rem;
                padding: var(--standart-gap);
                color: var(--color-gray);

                .title {
                    text-transform: uppercase;
                    color: var(--color-brand);
                }

                .price {
                    margin-top: 10rem;
                    border-top: 1rem solid var(--color-light-light-gray);
                    padding-top: 20rem;
                    color: black;
                }
            }
        }
    }
}

.images-list {
    &.swiper {
        @media screen and (max-width: 500px) {
            --img-height: 420rem;
        }
    }
}
.videos-list {
    .img.video {
        /*height: 100% !important;*/
        max-width: 100%;
        background: none no-repeat center;
        background-size: cover;
        color: white;
        aspect-ratio: 9/18.05;
        display: flex;
        align-items: center;
        justify-content: center;

        &:not(:has(iframe))::after {
            box-sizing: border-box;
            border: 5rem solid white;
            align-content: center;
            opacity: .99;
            border-radius: 50%;
            box-shadow: 0 0 25rem rgba(0, 0, 0, .5);
            text-shadow: 0 0 25rem rgba(0, 0, 0, .5);
            content: "play_arrow";
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            font-family: 'Material Symbols Outlined' !important;
            font-size: 36rem;
            line-height: 1;
            text-align: center;
            max-height: none;
            display: inline-block;
            width: 70rem;
            height: 70rem;
            margin: 0;
        }

        &:hover::after {
            border-color: transparent;
            opacity: .8;
        }

        iframe {
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100% !important;
            width: 100% !important;
        }
    }
}

.accordion {
    background: white;

    ul {
        li {
            border: solid 1px var(--color-light-light-gray);
            margin-top: -1rem;

            .trigger {
                padding: 23px 55px 23px 20px;
                font-size: 24rem;
                position: relative;
                display: block;
                text-transform: none;
                border: 0;
                margin: 0;
                cursor: pointer;
                @media screen and (max-width: 600px) {
                    font-size: 18rem;
                }

                .icon {
                    position: absolute;
                    top: 50%;
                    right: 23rem;
                    transform: translateY(-50%);
                    font-size: 28rem;
                    transition: all ease 500ms;
                }

                &:hover {
                    .icon {
                        transform: translateY(-50%) scale(1.4);
                        transform-origin: center;
                    }
                }
            }

            .body {
                padding: 23px 20px;

                .body-inner {
                    overflow: hidden;
                    box-sizing: border-box;
                }

                &, .body-inner {
                    transition: all ease 500ms;
                }

                box-sizing: border-box;

            }

            &.opened {
                .body {
                    padding-top: 23px;
                    padding-bottom: 23px;
                }

                .body-inner {
                    max-height: 100px;
                }

                .trigger {
                    .icon {
                        &::before {
                            content: "remove";

                        }
                    }
                }
            }

            &.closed {
                .body {
                    padding-top: 0;
                    padding-bottom: 0;
                }

                .body-inner {
                    max-height: 0;
                }

                .trigger {
                    .icon {
                        &::before {
                            content: "add";

                        }
                    }
                }
            }
        }
    }
}