/* #region NORMALIZE */
/*Обнуление*/
*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	/* height: 100%; */
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-size:inherit;font-family:inherit;background-color: inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
/* #endregion NORMALIZE */

/* #region FONTS */
/* INTER */
@font-face {
    font-family: "Inter";
    src: url(fonts/inter/Inter-Regular.ttf) format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "Inter";
    src: url(fonts/inter/Inter-Medium.ttf) format("truetype");
    font-weight: 500;
}
@font-face {
    font-family: "Inter";
    src: url(fonts/inter/Inter-SemiBold.ttf) format("truetype");
    font-weight: 600;
}
@font-face {
    font-family: "Inter";
    src: url(fonts/inter/Inter-Bold.ttf) format("truetype");
    font-weight: 700;
}

/* PROSTO */
@font-face {
    font-family: "Prosto One";
    src: url(fonts/prosto/ProstoOne-Regular.ttf) format("truetype");
    font-weight: 400;
}
/* #endregion FONTS */

/* #region GENERAL */
/* COLORS */
:root {
    --white: #fff;
    --black: #000;

    --grey: #817F7F;
    --product-bg: #f3f3f3;
    --purple: #9747FF;
    --purple-light: #E4DDF0;
    --purple-dark: #5D30A8;
    --purple-black: #16082C;
    --purple-border: #BFA7E6;

    --text: #16082C;
    --text-grey: #A7A7A7;
    --text-light: #B9B4BF;
    --red: #FF0307;
}

.none {
    display: none;
}

/* * {
    border: 1px solid green;
} */

/* --------------- SCROLL BAR --------------- */
/* scrollbar */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: #fff;
}
::-webkit-scrollbar-thumb {
    background-color: var(--purple);
    border-radius: 50px;
    &:hover {
        background-color: var(--purple-dark);
    }
}
/* Edge */
*::-webkit-scrollbar {
    width: 4px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--purple);
    border-radius: 50px;
}

::selection {
    background-color: var(--purple-black);
    color: white;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-weight: 400;
    font-size: 18px;
    color: var(--text);
    accent-color: var(--purple-dark);

	&.no-scroll {
		overflow: hidden;
	}
}

.container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
	padding: 0 20px;

    &.page-404 {
        margin: auto auto;
        padding: 0;
    }
}

.distance {
    margin-top: 100px;
}

.swiper-pagination-bullet-active {
	background-color: var(--purple) !important;
}


.test-content {
    display: flex;
    flex-direction: column;
    gap: 10px;

    p {
        line-height: 1.5;
    }
}


/* ---------------------- ADAPTIVE IMG ---------------------- */
.adaptive-img-wrapper {
    position: relative;
    overflow: hidden;
}

.adaptive-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ---------------------- CORNER LABEL ---------------------- */

.corner-label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;

    background-color: var(--white);
    border-bottom: 12px solid var(--white);
    border-left: 12px solid var(--white);
    border-bottom-left-radius: 30px;
}

.corner-label-title {
    width: 100%;
    height: 100%;
    padding: 14px 40px;
    border-radius: 30px;

    &.dark-label {
        background-color: var(--purple-black);
    }
    &.light-label {
        background-color: var(--purple-dark);
    }

    & h3 {
        font-family: 'Prosto One', sans-serif;
        font-size: 24px;
        color: var(--white);
        line-height: 1.5;
        text-align: center;
    }

    &::before {
        content: "";
        --size: 30px;
        position: absolute;
        top: -1px;
        right: calc(100% + 11px);
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at bottom left, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at bottom left, transparent calc(var(--r) - 1px), black var(--r));
    }

    &::after {
        content: "";
        --size: 30px;
        position: absolute;
        top: calc(100% + 11px);
        right: -1px;
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at bottom left, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at bottom left, transparent calc(var(--r) - 1px), black var(--r));
    }
}

/* ---------------------- GLOBAL TITLES ---------------------- */
.global-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 20px;
}

.title-h2 {
    font-family: 'Prosto One', sans-serif;
    font-size: 48px;
    line-height: 1.3;
    color: var(--purple-black);
}

.global-showmore-link {
    font-size: 16px;
    line-height: 1.3;
    color: var(--purple);

    &.mobile {
        display: none;
    }
}

.global-underline-link {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: var(--purple-border);
        bottom: -5px;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform 0.3s ease-in-out;
    }
    &:hover::after {
        transform-origin: left;
        transform: scaleX(1);
    }
}

.global-fullsize-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* ---------------------- BREADCRUMBS ---------------------- */
.breadcrumbs {
    margin-top: 30px;

    & .container {
        overflow: hidden;
    }
}
.breadcrumbs-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;

    a, span {
        font-size: 14px;
    }
    span {
        padding-block: 10px;
    }
}

.breadcrumb-link {
    color: var(--purple-dark);
    padding-block: 10px;
    &:last-child {
        color: var(--purple-border);
        pointer-events: none;
    }
    &::after {
        bottom: 5px;
    }

    &:nth-of-type(2) {
        display: none;
    }
}

/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    
}

/* 768px - 992px */
@media (max-width: 992px) {

}

/* 576px - 768px */
@media (max-width: 768px) {
    .title-h2 {
        font-size: 32px;
    }
    .global-showmore-link {
        display: none;
        &.mobile {
            display: block;
            margin-top: 20px;
        }
    }
    .distance {
        margin-top: 70px;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        margin-top: 20px;
    }
    .breadcrumbs-inner {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;

        span {
            display: none;
        }

        &::-webkit-scrollbar {
            width: 0;
            height: 3px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--purple-border);
            border-radius: 50px;
        }
    }
    .breadcrumb-link {
        display: flex;
        align-items: center;
        gap: 10px;
        text-wrap: nowrap;
        
        &::before {
            content: '←';
            font-size: 24px;
        }

        &:nth-of-type(1) {
            gap: 0;
            &::before {
                content: '';
            }
        }
        &:nth-of-type(4) {
            color: var(--purple-border);
        }
        &:nth-of-type(5) {
            display: none;
        }
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {
    .corner-label-title {
        & h3 {
            font-size: 16px;
        }
    }
}
/* #endregion GENERAL */

/* #region HEADER */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-margin {
    padding-top: 144px;
}

/* HEADER-TOP */
.header-top {
    display: flex;
    align-items: center;

    height: 54px;
    background-color: var(--purple-light);
}

.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-links-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}
.header-link {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);

    transition: all 0.3s ease;
    &:hover {
        color: var(--purple);
    }
}

.header-contacts-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
}

.header-contacts {
    display: flex;
    align-items: center;
    gap: 5px;
}
.header-contact-link {
    width: 35px;
    height: 35px;
    border-radius: 8px;

    display: grid;
    place-items: center;

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--white);
    }

    & svg {
        color: var(--text);
        transition: all 0.3s ease;
    }
    &:hover svg {
        color: var(--purple);
    }
}
.header-email-link {
    font-size: 16px;
    color: var(--text);
    padding: 8px;
    border-radius: 8px;

    transition: all 0.3s ease;
    &:hover {
        color: var(--purple);
        background-color: var(--white);
    }
}

.lang-switcher {
    padding: 15px;
    margin-right: -15px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--white);
    }

    p, span {
        font-size: 16px;
        line-height: 1.5;
        transition: all 0.3s ease;
    }
    &:hover p {
        color: var(--purple);
    }
}

.langs-list {
    position: absolute;
    left: 0;
    top: 80%;
    z-index: 10;

    display: none;
    flex-direction: column;
    gap: 10px;

    padding: 10px 20px;
    /* margin-left: -20px; */
    margin-left: -7px;
    background-color: var(--white);
    border: 2px solid var(--purple-light);
    border-radius: 10px;
}
.lang-switcher.active .langs-list {
    display: flex;
}

.lang-item {
    &.active {
        color: var(--grey);
        pointer-events: none;
    }
}



/* HEADER-MAIN */
.header-main {
    display: flex;
    align-items: center;

    height: 90px;
    background-color: var(--white);
    border-bottom: 1px solid var(--purple);
}

.header-main-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-mobile-contacts {
    display: none;
}

.header-tools {
    display: flex;
    gap: 10px;
    flex-grow: 1;
}

.catalogy-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
    padding: 13px 20px;
    background-color: var(--purple-dark);
    border-radius: 10px;
    cursor: pointer;

    span {
        line-height: 1.5;
        color: var(--white);
        user-select: none;
    }
}

.burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.burger-line {
    width: 16px;
    border: 1px solid var(--white);
    transition: all 0.3s ease;
}
.burger.active .burger-line:nth-child(1) {
    translate: 0 5px;
    rotate: 45deg;
}
.burger.active .burger-line:nth-child(2) {
    opacity: 0;
}
.burger.active .burger-line:nth-child(3) {
    translate: 0 -6px;
    rotate: -45deg;
}

/* SEARCH-INPUT */
.search-input-wrapper {
    display: flex;
    flex-grow: 1;
}
.search-input {
    width: 100%;
    flex-grow: 1;

    font-size: 16px;
    background-color: var(--white);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 13px 0 13px 20px;
    border-bottom: 2px solid var(--purple);
    border-left: 2px solid var(--purple);
    border-top: 2px solid var(--purple);

    &::placeholder {
        font-size: 16px;
        color: var(--text-grey);
    }
}
.search-input-btn {
    display: grid;
    place-items: center;

    translate: -1px 0;
    padding: 13px 20px 13px 13px;

    background-color: var(--white);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 2px solid var(--purple);
    border-right: 2px solid var(--purple);
    border-top: 2px solid var(--purple);
}

/* MODAL BG */
.modal-bg {
    position: fixed;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    background: rgba(34, 14, 67, 0.7);
    backdrop-filter: blur(10px);

    transition: all 0.3s ease;
    &.active {
        bottom: 0;
    }
}

/* SHOP TOOLS */
.shop-tools-wrapper {
    display: flex;
    gap: 5px;
}

.shop-tool {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;
    border-radius: 10px;

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--purple-light);
    }

    position: relative;

    &::before {
        content: attr(data-count);
        visibility: hidden;
        position: absolute;
        top: 2px;
        right: 2px;
        width: 20px;
        height: 20px;

        display: grid;
        place-items: center;
        background-color: var(--purple-dark);
        border-radius: 50%;
        font-size: 12px;
        color: var(--white);
    }
}


/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {

}

/* 768px - 992px */
@media (max-width: 992px) {
    .header-links-wrapper {
        /* display: grid;
        grid-template-columns: repeat(3, 1fr); */
        gap: 20px;
    }
}

/* 576px - 768px */
@media (max-width: 768px) {
    .header-margin {
        padding-top: 75px;
    }

    .header-top,
    .header-tools,
    .shop-tools-wrapper {
        display: none;
    }
    .header-main {
        height: 75px;
    }

    .header-main-inner {
        justify-content: space-between;
    }
    .header-mobile-contacts {
        display: flex;
        gap: 10px;

        &.hide {
            display: none;
        }
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {

}
/* #endregion HEADER */

/* #region PROMO-BANNER */
.promo-banner {
    margin-top: 20px;
}

.promo-banner-inner {
    height: 100%;
    aspect-ratio: 30 / 13;
    border-radius: 40px 23px;
}

.promo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;

    background-color: var(--white);
    border-top: 12px solid var(--white);
    border-right: 12px solid var(--white);
    border-top-right-radius: 30px;
}

.promo-label-title {
    width: 100%;
    height: 100%;
    padding: 14px 40px;
    border-radius: 30px;
    background-color: var(--purple-dark);

    & h3 {
        font-family: 'Prosto One', sans-serif;
        font-size: 32px;
        color: var(--white);
        line-height: 1.5;
        text-align: center;
    }

    &::before {
        content: "";
        --size: 30px;
        position: absolute;
        bottom: 0;
        left: calc(100% + 11px);
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at top right, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at top right, transparent calc(var(--r) - 1px), black var(--r));
    }

    &::after {
        content: "";
        --size: 30px;
        position: absolute;
        bottom: calc(100% + 11px);
        left: 0;
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at top right, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at top right, transparent calc(var(--r) - 1px), black var(--r));
    }
}


/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {

}

/* 768px - 992px */
@media (max-width: 992px) {

}

/* 576px - 768px */
@media (max-width: 768px) {
    .promo-banner-inner {
        aspect-ratio: 5 / 9;
        border-radius: 20px;
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {
    .promo-label-title {
        & h3 {
            font-size: 20px;
        }
    }
}
/* #endregion PROMO-BANNER */

/* #region CATEGORY */
.category-top {
    margin-top: 20px;
}

.category-name {
    font-family: 'Prosto One', sans-serif;
    font-size: 48px;
    line-height: 1.3;
    color: var(--purple-black);
}

.subcategories-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: 20px;
    border-radius: 10px;
    position: relative;

    transition: all 0.3s ease;
    &:hover {
        box-shadow: 0 0 10px 0 rgba(93, 0, 167, 0.2);
    }

    &.hide {
        display: none;
    }
    &.show {
        display: flex;
    }
}

.category-card-img {
    width: 100%;
    aspect-ratio: 7/5;
    transition: all 0.3s ease;
}
.category-card:hover .category-card-img {
    scale: 1.05;
}
.category-card-title {
    font-weight: 500;
    line-height: 1.5;
    text-align: center;

    &.on-home {
        font-size: 24px;
    }
    &.in-catalog {
        font-size: 18px;
    }
    &.on-own-page {
        font-size: 16px;
    }
}

.categories-showmore-btn {
    display: block;
    width: fit-content;
    font-size: 16px;
    line-height: 1.3;
    color: var(--purple);
    margin-top: 10px;
    cursor: pointer;
}
.categories-showmore-btn-text {
    &.show {
        display: block;
    }
    &.hide {
        display: none;
    }
}


/* On home page */
.popular-categories-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* SEO TEXT */
.seo-inner {
    display: flex;
    flex-direction: column;

    h2, h3, h4, h5, h6 {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    p {
        line-height: 1.4;
        padding-bottom: 12px;
    }
    a {
        color: var(--text);
        text-decoration: underline;
        line-height: 1.4;
    }
    ul, ol {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 12px;
    }
    ul li {
        list-style: disc;
        margin-left: 16px;
    }
    ol li {
        margin-left: 16px;
    }

    .none {
        padding: 0;
    }
}

.seo-showmore-btn {
    display: block;
    position: relative;
    width: fit-content;
    padding-left: 20px;
    cursor: pointer;

    font-size: 18px;
    line-height: 1.3;
    color: var(--purple-dark);

    &::before {
        content: url(../image/drop-arrow.svg);
        position: absolute;
        top: -3px;
        left: 0;
    }

    &.active::before {
        top: 3px;
        rotate: 180deg;
    }
}
.seo-showmore-btn-text {
    &.show {
        display: block;
    }
    &.hide {
        display: none;
    }
}


/* PAGINATION */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.pagination-nums-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination-num,
.pagination-btn-prev,
.pagination-btn-next {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;

    &.active {
        font-weight: bold;
        color: var(--purple-dark);
        background-color: var(--purple-light);
    }

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--purple-light);
    }
}
.pagination-btn-prev,
.pagination-btn-next {
    color: var(--purple-border);

    &:hover {
        color: var(--purple-dark);
    }
}


/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    .subcategories-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 768px - 992px */
@media (max-width: 992px) {
    .subcategories-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-card-title {
        &.in-catalog {
            font-size: 14px;
        }
    }

    /* On home page */
    .popular-categories-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 480px - 768px */
@media (max-width: 768px) {
    .subcategories-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .category-name {
        font-size: 32px;
    }

    .category-card {
        padding: 10px;
    }

    /* On home page */
    .popular-categories-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 360px - 480px */
@media (max-width: 480px) {
    .category-card-title {
        &.on-home {
            font-size: 15px;
        }
    }

    /* Pagination */
    .pagination {
        justify-content: space-between;
    }

    .pagination-num,
    .pagination-btn-prev,
    .pagination-btn-next {
        width: 40px;
        height: 40px;
    }
}
/* #endregion CATEGORY */

/* #region DESKTOP-CATALOG */
.desktop-catalog {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease;

    &.active {
        grid-template-rows: 1fr;
    }

    & .container {
        min-height: 0;
    }
}

.desktop-catalog-inner {
    display: flex;
    min-height: 50dvh;
    max-height: calc(100dvh - 300px);
    overflow-y: hidden;

    background-color: var(--white);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.desktop-categories-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 33%;

    padding: 20px;
    border-right: 2px solid var(--purple-border);
    overflow-y: scroll;
}

.desktop-category {
    padding-block: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.desktop-category-icon {
    max-width: 24px;
}

.desktop-category-name {
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;

}
.desktop-category:hover .desktop-category-name,
.desktop-category.active .desktop-category-name {
    color: var(--purple-dark);
}

.desktop-category-arrow {
    margin-left: auto;
    /* margin-right: 10px; */
    flex-shrink: 0;
    opacity: 0;

    transition: all 0.3s ease;
}
.desktop-category:hover .desktop-category-arrow,
.desktop-category.active .desktop-category-arrow {
    opacity: 1;
}


/* CONTENT */
.categories-content-list {
    width: 67%;
    overflow-y: scroll;
}
.category-content {
    display: none;

    flex-direction: column;
    gap: 40px;
    padding: 30px 20px;

    &.active, &.show {
        display: flex;
    }
}
.categories-content-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    .categories-content-cards-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
    .desktop-category-name {
        font-size: 16px;
    }
}

/* 768px - 992px */
@media (max-width: 992px) {
    .desktop-categories-list {
        width: 45%;
    }

    .categories-content-list {
        width: 55%;
        overflow-y: scroll;
    }

    .categories-content-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 576px - 768px */
@media (max-width: 768px) {
    .desktop-catalog {
        display: none;
    }
}

/* 360px - 480px */
@media (max-width: 480px) {

}
/* #endregion DESKTOP-CATALOG */

/* #region MOBILE-NAV */
.mobile-nav {
    display: none;
}

/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {

}

/* 768px - 992px */
@media (max-width: 992px) {

}

/* 576px - 768px */
@media (max-width: 768px) {
    .mobile-nav {
        display: flex;
        align-items: center;
        gap: 20px;

        width: fit-content;
        position: fixed;
        left: 50%;
        bottom: 20px;
        z-index: 200;
        translate: -50%;

        padding: 15px 30px;
        background-color: var(--white);
        border: 2px solid var(--purple-border);
        border-radius: 50px;

        &.hide {
            display: none;
        }
    }

    .mobile-nav-icon, .mobile-nav-btn {
        display: grid;
        place-items: center;

        width: 36px;
        height: 36px;
        border-radius: 50%;

        & svg {
            color: var(--purple-black);
        }

        &.active {
            background-color: var(--purple-dark);
        }
        &.active svg {
            color: var(--white);
        }
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {
    .mobile-nav {
        width: calc(100% - 40px);
        justify-content: space-between;
    }
}
/* #endregion MOBILE-NAV */

/* #region MOBILE-CATALOG */
.mobile-catalog {
    display: none;
}

/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {

.mobile-catalog {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    right: 100%;
    z-index: 150;

    width: 100%;
    height: 100dvh;
    padding: 20px 20px 105px;
    background-color: var(--white);

    transition: all 0.3s ease;
    &.active {
        right: 0;
    }
}

/* SEARCH-INPUT */
.catalog-search-input-wrapper {
    display: flex;
    padding-bottom: 20px;
    /* padding-block: 20px; */
}
.catalog-search-input {
    width: 100%;
    flex-grow: 1;

    font-size: 16px;
    background-color: var(--white);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 13px 0 13px 20px;
    border-bottom: 2px solid var(--purple);
    border-left: 2px solid var(--purple);
    border-top: 2px solid var(--purple);

    &::placeholder {
        font-size: 16px;
        color: var(--text-grey);
    }
}
.catalog-search-input-btn {
    display: grid;
    place-items: center;

    translate: -1px 0;
    padding: 13px 20px 13px 13px;

    background-color: var(--white);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 2px solid var(--purple);
    border-right: 2px solid var(--purple);
    border-top: 2px solid var(--purple);
}

.mobile-categories-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;

    position: relative;
}

.mobile-category {
    padding-block: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mobile-category-icon {
    max-width: 24px;
}
.mobile-category-name,
.mobile-category-back-text {
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-category-arrow {
    margin-left: auto;
    margin-right: 10px;
    flex-shrink: 0;

    &.hidden {
        display: none;
    }
}

.mobile-subcategories-list {
    position: absolute;
    top: 0;
    right: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;

    width: 100%;
    height: 100%;
    background-color: var(--white);

    transition: all 0.3s ease;
    &.active {
        right: 0;
    }
}

.mobile-category-back-btn {
    padding-block: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-category-back-arrow {
    margin-right: 10px;
    rotate: 180deg;
}

}

/* 360px - 480px */
@media (max-width: 480px) {

}
/* #endregion MOBILE-CATALOG */

/* #region MOBILE-MENU */
.mobile-menu {
    display: none;
}

/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {

}

/* 768px - 992px */
@media (max-width: 992px) {

}

/* 576px - 768px */
@media (max-width: 768px) {
    .mobile-menu {
        display: flex;
        flex-direction: column;

        position: fixed;
        top: 75px;
        left: 100%;
        z-index: 150;

        width: 100%;
        height: calc(100dvh - 75px);
        /* height: 100%; */
        background-color: var(--white);

        transition: all 0.3s ease;
        &.active {
            left: 0;
        }
    }

    .mobile-menu-links-list {
        display: flex;
        flex-direction: column;
        padding-block: 10px;

        border-bottom: 2px solid var(--purple-light);
    }

    .mobile-menu-link {
        display: flex;
        align-items: center;
        gap: 5px;

        padding-block: 10px;
        /* font-size: 16px; */
        line-height: 1.5;
        color: var(--text);
    }


    .mobile-menu-contacts {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 15px;
    }

    .soclinks-wrapper {
        display: flex;
        gap: 10px;
        translate: -7px;
    }
    .mobile-menu-soclink {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        color: var(--purple-dark);
    }

    .mobile-menu-langs-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-block: 20px;
        border-bottom: 2px solid var(--purple-light);
    }
    .mobile-menu-lang {
        padding: 7px 15px;
        line-height: 1.5;
        color: var(--text);

        &.active {
            background-color: var(--purple-dark);
            color: var(--white);
            border-radius: 8px;
        }
    }

    .mobile-menu-contact-link {
        /* font-size: 16px; */
        color: var(--text);
        &.bold {
            font-weight: bold;
        }
    }
}

/* 360px - 480px */
@media (max-width: 480px) {

}
/* #endregion MOBILE-MENU */

/* #region FOOTER */
.footer {
    padding-block: 80px;
    background-color: var(--purple-black);
    color: var(--white);
    line-height: 1.5;

    & a {
        color: var(--white);
        line-height: 1.5;
    }
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-address {
    font-size: 16px;
    font-style: normal;
}

.footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact-link {
    font-size: 24px;
}

.footer-socials {
    display: flex;
    gap: 20px;

    & a {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border-radius: 5px;

        transition: all 0.3s ease;

        &:hover {
            background-color: var(--purple);
        }
    }
}

.footer-column, .footer-categories {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-column:nth-of-type(3) {
    flex-shrink: 0;
}

.footer-dropdown-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-dropdown-title {
    font-size: 24px;
    pointer-events: none;
}

.footer-dropdown-icon {
    display: none;
    min-width: 24px;
    transition: all 0.3s ease;
}
.footer-dropdown-title-wrapper.active .footer-dropdown-icon {
    rotate: 135deg;
}

.footer-dropdown-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease, margin-top 0.2s ease;
}
.footer-dropdown.open .footer-dropdown-content-wrapper {
    grid-template-rows: 1fr;
    margin-top: 12px;
    /* padding: 0 20px 20px; */
}
.footer-dropdown-content {
    min-height: 0;
}

.footer-title {
    font-size: 24px;

    &.margin-top {
        margin-top: 20px;
    }
}

.footer-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-categories-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.footer-link, .footer-category {
    color: var(--text-light) !important;
    transition: all 0.3s ease;

    &:hover {
        color: var(--white) !important;
    }
}

.footer-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;

    p, a {
        color: var(--text-light) !important;
    }
    a {
        transition: all 0.3s ease;
        &:hover {
            color: var(--white) !important;
        }
    }
}

/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    .footer .container {
        padding-inline: 50px;
    }
    .footer-inner {
        flex-wrap: wrap;
    }
    .footer-categories {
        width: 100%;
    }
    .footer-categories-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 768px - 992px */
@media (max-width: 992px) {
    .footer-inner {
        justify-content: space-evenly;
    }

    .footer-contacts {
        width: 100%;
    }
}

/* 576px - 768px */
@media (max-width: 768px) {
    .footer {
        padding-bottom: 130px;
    }

    .footer-inner {
        justify-content: space-between;
    }

    .footer-categories-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: center;

        p, a {
            text-align: center;
            text-wrap: balance;
        }
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {
    .footer .container {
        padding-inline: 20px;
    }

    .footer-inner {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .footer-dropdown-title {
        pointer-events: all;
    }

    .footer-dropdown-icon {
        display: block;
    }

    .footer-contacts {
        order: -2;
    }

    .footer-categories {
        order: -1;
    }
    .footer-categories-wrapper {
        grid-template-columns: 1fr;
    }
}
/* #endregion FOOTER */

/* #region PRODUCTS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 20px;
    border-radius: 10px;
    position: relative;

    transition: all 0.3s ease;
    &:hover {
        box-shadow: 0 0 10px 0 rgba(93, 0, 167, 0.2);
    }
}

.product-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--product-bg);
}

.product-card-labels {
    display: flex;
    align-items: center;
    gap: 5px;
}
.product-card-label {
    padding: 6px 10px;
    background-color: var(--purple-light);
    border-radius: 10px;

    font-size: 14px;
    color: var(--purple-dark);
    font-weight: 500;
    text-transform: uppercase;

    &.no-label {
        visibility: hidden;
    }
}
.product-card-discount {
    padding: 6px 10px;
    background-color: var(--purple-black);
    border-radius: 10px;

    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;

    &.no-label {
        visibility: hidden;
    }
}

.product-card-tools {
    display: none;
    /* display: flex; */
    align-items: center;
}

.product-card-compare-btn,
.product-card-wishlist-btn {
    position: relative;
    z-index: 10;

    & svg {
        transition: all 0.3s ease;
    }

    &:hover {
        & svg {
            color: var(--purple-dark);
        }
    }
}
.product-card-compare-btn {
    padding-right: 5px;
}
.product-card-wishlist-btn {
    padding-left: 5px;
}

.product-card-img-wrapper {
    aspect-ratio: 5/4;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--product-bg);
}

.product-card-img {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    transition: all 0.3s ease;
}
.product-card:hover .product-card-img {
    scale: 1.05;
}

.product-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.product-card-action-btn-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    /* z-index: 10; */

    background-color: var(--white);
    border-top: 6px solid var(--white);
    border-left: 6px solid var(--white);
    border-top-left-radius: 24px;
}

.product-card-action-btn {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    padding: 7px;
    border-radius: 50%;
    background-color: var(--purple-dark);

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--purple-black);
    }

    &::before {
        content: "";
        --size: 16px;
        position: absolute;
        bottom: calc(100% + 5px);
        right: -1px;
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at top left, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at top left, transparent calc(var(--r) - 1px), black var(--r));
    }

    &::after {
        content: "";
        --size: 16px;
        position: absolute;
        bottom: -1px;
        right: calc(100% + 5px);
        width: var(--size);
        height: var(--size);
        background-color: var(--white);
        --r: calc(var(--size) * 1);
        mask-image: radial-gradient(circle at top left, transparent calc(var(--r) - 1px), black var(--r));
        -webkit-mask-image: radial-gradient(circle at top left, transparent calc(var(--r) - 1px), black var(--r));
    }
}

.product-card-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product-card-category {
    font-size: 16px;
    color: var(--text-grey);
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    position: relative;
    z-index: 10;

    transition: all 0.3s ease;
    &:hover {
        color: var(--text);
    }
}
.product-card-name {
    color: var(--text);
    font-weight: 500;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: all 0.3s ease;
}
.product-card:hover .product-card-name {
    color: var(--purple-dark);
}

.product-card-price-wrapper {
    display: flex;
    flex-direction: column;
    margin: 8px 0 4px;
}
.product-card-old-price {
    font-size: 16px;
    color: var(--text-grey);
    line-height: 1.5;
    text-decoration: line-through;
}

.product-card-instock {
    font-size: 16px;
    color: var(--purple-dark);
    line-height: 1.5;

    &.color-red {
        color: var(--red);
    }
}



/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    .product-card-actions {
        /* align-items: start; */
        position: relative;
        justify-content: end;
    }
    .product-card-labels {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 3;

        flex-direction: column;
        align-items: start;
    }
}

/* 768px - 992px */
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 576px - 768px */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-card {
        padding: 10px;
    }

    .product-card-actions {
        padding: 0;
    }
    .product-card-img-wrapper {
        aspect-ratio: 1;
        border-radius: 10px;
    }

    .product-card-tools {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        flex-direction: column;
        gap: 5px;
    }
    .product-card-label {
        font-size: 10px;
    }
    .product-card-discount {
        font-size: 10px;
    }

    .product-card-compare-btn,
    .product-card-wishlist-btn {
        display: grid;
        place-items: center;

        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: var(--white);
        padding: 0;

        & svg {
            max-height: 90%;
        }
    }
}

/* 360px - 480px */
/* @media (max-width: 576px) */
@media (max-width: 480px) {
    .product-card-tools {
        top: 4px;
        right: 4px;
    }

    .product-card-name {
        font-size: 15px;
    }
    .product-card-category {
        font-size: 13px;
    }
    .product-card-old-price {
        font-size: 14px;
    }
    .product-card-price {
        font-size: 16px;
    }
}
/* #endregion PRODUCTS */

/* #region PRODUCT */
.product-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.product-name {
    font-family: 'Prosto One', sans-serif;
    font-size: 48px;
    line-height: 1.3;
    color: var(--purple-black);
    grid-column: span 2;
}


/* PRODUCR GALLERY */
.product-gallery {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    max-height: 520px;
}

.product-photos-slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    max-height: 100%;
    flex-shrink: 0;
}

.photos-slider-btn {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--purple-dark);
    user-select: none;

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--purple-light);
    }

    &.swiper-button-disabled {
        color: var(--white);
        background-color: var(--text-light);
        opacity: 0.3;
    }
}

.product-slide-photo {
    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1;
    padding: 10px;
    cursor: pointer;
    overflow: hidden;
    
    &.active {
        border: 1px solid var(--purple-dark);
        border-radius: 20px;
    }
}
.product-slide-photo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    transition: all 0.2s ease;
}
.product-slide-photo:hover .product-slide-photo-img {
    scale: 0.9;
}

.product-main-photo {
    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 1;
    padding: 20px;
}
.product-main-photo-img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    &.active {
        display: block;
    }
}


/* PRODUCT INFO */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-labels {
    display: flex;
    align-items: center;
    gap: 5px;
}
.product-label {
    padding: 6px 10px;
    background-color: var(--purple-light);
    border-radius: 10px;
    font-size: 14px;
    color: var(--purple-dark);
    font-weight: 500;
    text-transform: uppercase;
}
.product-discount {
    padding: 6px 10px;
    background-color: var(--purple-black);
    border-radius: 10px;
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
}

.product-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-share-btn,
.product-compare-btn,
.product-wishlist-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;

    transition: all 0.3s ease;
    &:hover {
        background-color: var(--purple-light);
    }
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product-code-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
}
.product-code-text {
    color: var(--text-grey);
}

.product-instock-text {
    font-size: 16px;
    color: var(--text-grey);
    padding-left: 18px;
    position: relative;

    &.green {
        &::before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            translate: 0 -50%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #0ED543;
        }
    }
    &.red {
        &::before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            translate: 0 -50%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #D50E0E;
        }
    }
}

.product-pricing {
    display: flex;
    flex-direction: column;
}
.product-old-price {
    font-size: 16px;
    color: var(--text-grey);
    line-height: 1.5;
    text-decoration: line-through;
}

.product-price-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}
.product-price {
    font-family: 'Prosto One', sans-serif;
    font-size: 32px;
    line-height: 1.3;
    color: var(--text);
}

.product-quantity-btns {
    display: flex;
    align-items: center;
    gap: 15px;

    width: fit-content;
    padding: 5px 10px;
    border-radius: 50px;
    border: 2px solid var(--purple-light);
}
.product-quantity-btn {
    display: grid;
    place-items: center;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--text-grey);

    transition: all 0.3s ease;
    &:hover {
        color: var(--purple-dark);
        background-color: var(--purple-light);
    }
}

.without-nds {
    font-size: 16px;
    color: var(--text-grey);
}

.product-order-btn {
    width: fit-content;
    padding: 15px 30px;
    background-color: var(--purple-dark);
    border-radius: 50px;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    cursor: pointer;
}


/* PRODUCT ABOUT */
.product-about {
    margin-top: 20px;
}

.product-tabs {
    display: flex;
    gap: 20px;

    padding-bottom: 10px;
    border-bottom: 2px solid var(--purple-light);
}
.product-tab {
    font-family: 'Prosto One', sans-serif;
    font-size: 24px;
    line-height: 1.5;
    color: var(--purple-black);
    user-select: none;
    cursor: pointer;

    margin-bottom: -12px;
    padding-bottom: 10px;

    &.active {
        border-bottom: 2px solid var(--purple-dark);
    }
}
.product-tabs-content {
    margin-top: 20px;
}

.product-tab-content {
    display: none;
    &.active {
        display: block;
    }
}

.product-table {
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding-right: 80px;
}

.product-table-row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 20px;
}

.feature-name, .feature-desc {
    color: var(--grey);
    line-height: 1.5;
    text-wrap: balance;
}
.feature-desc {
    color: var(--text);
}

.product-desc {
    display: flex;
    flex-direction: column;

    h2, h3, h4, h5, h6 {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    p {
        line-height: 1.4;
        padding-bottom: 12px;
    }
    a {
        color: var(--text);
        text-decoration: underline;
        line-height: 1.4;
    }
    ul, ol {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 12px;
    }
    ul li {
        list-style: disc;
        margin-left: 16px;
    }
    ol li {
        margin-left: 16px;
    }
}


.product-pickup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.product-pickup-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product-pickup-title {
    display: flex;
    align-items: center;
    gap: 5px;

    p {
        font-family: 'Prosto One', sans-serif;
        font-size: 24px;
        line-height: 1.5;
        color: var(--purple-black);
    }
}
.product-pickup-text {
    line-height: 1.5;
    color: var(--text);
}


/* ORDER MODAL */
.order-modal {
    display: none;
    position: fixed;

    width: max-content;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 100;

    padding: 45px 30px 30px;
    background-color: var(--white);
    border-radius: 20px;

    &.active {
        display: block;
    }
}

.order-modal-title {
    font-family: 'Prosto One', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    color: var(--purple-black);
    text-align: center;
    margin-bottom: 30px;
}

.order-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    /* display: flex;
    flex-direction: column;
    gap: 20px; */
}

.order-form-item {
    position: relative;

    &:first-of-type {
        grid-column: span 2;
    }
}
.order-form-input {
    display: block;
    width: 100%;
    padding: 12px 20px 10px;
    border: 2px solid var(--purple-border);
    border-radius: 10px;
    position: relative;
}

.order-form-label {
    position: absolute;
    top: 50%;
    left: 10px;
    translate: 0 -50%;
    cursor: text;
    z-index: 10;
    padding: 0 10px;
    background-color: var(--white);
    transition: all 0.3s ease;
}

.order-form-item input:focus + label,
.order-form-item input:valid + label,
.order-form-item input[readonly] + label {
    font-size: 14px;
    top: 0;
}

.radios-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 17px 20px 10px;
    border: 2px solid var(--purple-border);
    border-radius: 10px;
    position: relative;
}
.radio-title {
    position: absolute;
    top: 0;
    left: 10px;
    translate: 0 -50%;
    cursor: text;
    z-index: 10;
    padding: 0 10px;
    background-color: var(--white);
    font-size: 14px;
}
.order-form-radio-input {
    scale: 1.3;
}
.radio-item {
    display: flex;
    gap: 5px;
    cursor: pointer;
}

.order-form-subbtn {
    width: 100%;
    padding: 10px 20px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--white);
    background-color: var(--purple-dark);
    border-radius: 50px;
    text-wrap: nowrap;
}

.modal-close-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
}


/* ADAPTIVE */
/* 992px - 1200px */
@media (max-width: 1200px) {
    .product-price-wrapper {
        align-items: start;
        flex-direction: column;
        gap: 10px;
    }
}

/* 768px - 992px */
@media (max-width: 992px) {
    .product-name {
        font-size: 36px;
    }
    .feature-name, .feature-desc {
        font-size: 16px;
    }
}

/* 576px - 768px */
@media (max-width: 768px) {
    .product-name {
        font-size: 24px;
        grid-column: unset;
    }
    .product-inner {
        display: flex;
        flex-direction: column;
    }

    .product-gallery {
        align-items: center;
        flex-direction: column-reverse;
        max-width: 100%;
        max-height: unset;
    }
    .product-photos-slider-wrapper {
        flex-direction: row;
        max-width: 100%;
    }

    .product-main-photo {
        width: 100%;
    }
    .photos-slider-btn {
        display: none;
    }

    .product-tabs {
        width: 100%;
        justify-content: space-between;
        gap: 0;
        padding-bottom: 0;
        border-bottom: unset;
        border-radius: 50px;
        background-color: var(--purple-light);
    }
    .product-tab {
        flex-grow: 1;
        text-align: center;
        font-size: 16px;
        padding: 10px 20px;
        margin-bottom: 0;

        border-radius: 50px;
        background-color: var(--purple-light);
        
        &.active {
            color: var(--white);
            border-bottom: unset;
            background-color: var(--purple);
        }
    }

    .product-table {
        padding: 0;
        gap: 10px;
    }
    .product-table-row {
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--purple-light);
    }
    
    .product-pickup {
        grid-template-columns: 1fr;
    }

    .order-form {
        grid-template-columns: 1fr;
    }
    .order-form-item {
        &:first-of-type {
            grid-column: unset;
        }
    }
}

/* 360px - 480px */
@media (max-width: 480px) {
    .product-price {
        font-size: 28px;
    }

    .product-order-btn {
        width: 100%;
        text-align: center;
    }
    .feature-name, .feature-desc {
        font-size: 14px;
    }

    .order-modal {
        width: fit-content;
    }
    .order-modal {
        top: 70%;
        translate: -50% -70%;
        width: calc(100% - 40px);
        padding: 45px 20px 20px;
    }
}
/* #endregion PRODUCT */

/* #region FAQ */
.faq-inner {
    padding: 40px;
    border: 2px solid var(--purple-border);
    border-radius: 40px;
}

.faq-list {
    display: flex;
    flex-direction: column;
}
.faq-item {
    padding-block: 20px;

    &:first-child {
        padding-top: 0;
    }
    &:not(:first-child) {
        border-top: 1px solid var(--purple-light);
    }
    &:last-child {
        padding-bottom: 0;
    }
    &:not(:last-child) {
        border-bottom: 1px solid var(--purple-light);
    }
}

.faq-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.faq-question {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
    user-select: none;
    transition: all 0.3s ease;
}
.faq-title-wrapper.active .faq-question {
    color: var(--purple-dark);
}
.faq-item:hover .faq-question {
    color: var(--purple-dark);
}

.faq-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
}

.faq-icon-line {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-color: var(--purple-border);
    border-radius: 2px;

    &:nth-child(1) {
        width: 2px;
        height: 25px;
    }
    &:nth-child(2) {
        width: 25px;
        height: 2px;
    }
}

.faq-title-wrapper.active .faq-icon {
    rotate: 180deg;
}
.faq-title-wrapper.active .faq-icon-line {
    &:nth-child(1) {
        opacity: 0;
    }
    &:nth-child(2) {
        background-color: var(--purple-dark);
    }
}

.faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease, margin-top 0.2s ease;
}
.faq-item.open .faq-answer-wrapper {
    grid-template-rows: 1fr;
    margin-top: 12px;
}
.faq-answer {
    min-height: 0;

    p {
        line-height: 1.5;
        text-wrap: balance;
    }
}

/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
    .faq-inner {
        padding: 20px;
    }
}

/* 360px - 480px */
@media (max-width: 480px) {
    .faq-question {
        font-size: 20px;
    }
    .faq-answer {
        p {
            font-size: 18px;
        }
    }
}
/* #endregion FAQ */

/* #region INDEV */
.indev-hide {
    display: none;
}

.indev-message {
    width: 100%;
    height: calc(100vh - 144px - 100px);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.indev-message-img {
    max-width: 300px;
}

.indev-message-text {
    font-family: 'Prosto One', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    color: var(--purple-black);
    margin-top: 30px;
}

.indev-message-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 30px;
    border-radius: 15px;
    background-color: var(--purple-dark);
    font-family: 'Prosto One', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    color: var(--white);
    margin-top: 50px;
}

/* ADAPTIVE */
/* 576px - 768px */
@media (max-width: 768px) {
    .indev-message {
        height: calc(100vh - 75px - 70px);
    }
    .indev-message-text, .indev-message-link {
        font-size: 18px;
    }
}
/* #endregion INDEV */