/* Fonts */
@font-face {
    font-family: 'TTHoves';
    src: url('./fonts/TTHoves/TTHoves-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TTHoves';
    src: url('./fonts/TTHoves/TTHoves-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TTHoves';
    src: url('./fonts/TTHoves/TTHoves-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'TTHoves';
    src: url('./fonts/TTHoves/TTHoves-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'transgender';
    src: url('./fonts/transgender/Transgender Grotesk-Regular-Web.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Evolventa';
    src: url('./fonts/Evolventa/Evolventa-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Evolventa';
    src: url('./fonts/Evolventa/Evolventa-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad';
    src: url('./fonts/Myriad/MyriadPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* Variables */
:root {
    --tabs-color: rgba(24, 24, 24, 0.70);
    --title-color: rgba(0, 0, 0, 0.70);
    --shadow-color: 0px 20px 20px 0px rgba(0, 0, 0, 0.05);
    --swiper-navigation-next-offset: -45px;
    --swiper-navigation-prev-offset: -30px;
    --zoom-factor: 1;
    --placeholder-font-size: 14px;
}

/* Reset and base styles */
.uc-container *,
.uc-container *::before,
.uc-container *::after {
    box-sizing: border-box !important;
}

.uc-container h2,
.uc-container h3,
.uc-container p {
    margin: 0;
    /* font-weight: normal !important; */
    font-weight: inherit;
}

.uc-container {
    font-family: 'TTHoves', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F2F2F2;
    overflow: hidden;
    position: relative;
    padding: 0 0 30px;
    isolation: isolate;
}

/* Container styles */
.container {
    width: 1200px;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    padding: 20px 40px;
    font-family: 'TTHoves', sans-serif;
}

.container * {
    font-family: inherit;
}

/* Left column styles */
.left-column {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

/* Tabs styles */
.tabs {
    display: flex;
    gap: 15px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    height: 40px;
    border: none;
    border-radius: 30px;
    background: #fff;
    cursor: pointer;
    font-family: 'TTHoves', sans-serif;
    font-weight: 500;
    color: var(--tabs-color);
    transition: all 0.3s ease;
    opacity: 0.5;
    box-shadow: none;
}

.tab-btn .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.tab-btn .tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.tab-btn span {
    font-size: 14px;
}

.tab-btn:hover {
    opacity: 1;
}

.tab-btn.active {
    box-shadow: var(--shadow-color);
    opacity: 1;
}

/* Анимация при наведении теперь для img */
.tab-btn:hover .tab-icon img,
.tab-btn.active .tab-icon img {
    transform: scale(1.1);
}

/* Main slider styles */
.slider-container {
    position: relative;
    width: 870px;
    padding: 0 40px;
    margin: 0 -40px;
    box-sizing: border-box;
    clip-path: inset(-100vh 10px -100vh 0);
    z-index: 100;
    overscroll-behavior: none;
}

.main-slider {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.slide-header {
    margin-bottom: 30px;
    white-space: nowrap;
}

.slide-header h2 {
    font-family: 'transgender', sans-serif;
    font-size: 28px;
    color: var(--tabs-color);
    margin-bottom: 10px;
}

.slide-header p {
    font-size: 16px;
    color: var(--tabs-color);
    font-weight: 300;
}

.slide-header img {
    margin-left: 7px;
}

.slide-header span:not(:first-child) {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 5px;
}

@media (min-width: 960px) {
    .main-slider .swiper-slide:first-child .slide-header {
        margin-bottom: 40px;
    }
}

.slide-header br {
    display: none;
}

/* Nested slider styles */

.nested-slider {
    position: relative;
    width: 730px;
    margin: 0;
    overscroll-behavior: none;
}

.nested-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.main-slider .swiper-slide:first-child .nested-slider .swiper-wrapper {
    gap: 30px 20px;
}

.nested-slider .swiper-wrapper {
    gap: 20px 20px;
}

/* Start-content slider styles */

.start-content {
    overflow: visible;
}

.start-content .swiper-slide {
    width: 130px;
    height: 115px !important;
}

.start-content .start-item {
    width: 130px;
    height: 115px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    cursor: pointer;
}

.start-content .start-item::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--item-color);
    border: 2px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    border-radius: 20px;
    z-index: -1;
}

.start-content .start-item:hover::before {
    transform: translate(-50%, -50%) scale(1.15);
    border: 2px solid #00000020;
}

.start-item-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    right: 0;
    transition: transform 0.3s ease;
}

.start-content .start-item:hover .start-item-icon {
    transform: translate(7.5px, -5.5px);
}

.start-item-image {
    width: 68px;
    height: 81px;
    object-fit: contain;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.start-item-text {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    height: 28px;
    color: var(--tabs-color);
}

/* Color content slider styles */

.color-content {
    overflow: visible;
}

.color-content .swiper-slide {
    width: 130px;
    height: 130px !important;
}

.color-content .color-item {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.color-item-text {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: var(--tabs-color);
}

.color-content .color-item .color-item-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    border-radius: 100%;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.color-content .color-item:hover .color-item-image {
    transform: translate(-50%, -50%) scale(1.15);
}

.color-content .color-item .color-item-image::before {
    content: '';
    border: 2px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s ease;
}

.color-content .color-item:hover .color-item-image::before {
    border: 2px solid #00000020;
}

/* Aroma content slider styles */

.aroma-content {
    overflow: visible;
}

.aroma-content .swiper-slide {
    width: 130px;
    height: 130px !important;
}

.aroma-content .aroma-item {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    cursor: pointer;
}

.aroma-content .aroma-item::before {
    content: '';
    width: 100%;
    height: 100%;
    background: #fff;
    border: 2px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    border-radius: 20px;
    z-index: -1;
}

.aroma-content .aroma-item:hover::before {
    transform: translate(-50%, -50%) scale(1.15);
    border: 2px solid #00000020;
}

.aroma-item-days {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 10px 8px 11px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tabs-color);
    background: #fff;
    border: 2px solid #F2F2F2;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.aroma-content .aroma-item:hover .aroma-item-days {
    transform: translate(7.5px, -5.5px);
    border: 2px solid #00000020;
}

.aroma-item-image {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

.aroma-item-text {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    height: 28px;
    color: var(--tabs-color);
}

/* Wick content styles */

.wick-content {
    overflow: visible;
    display: flex;
    gap: 20px;
}

.wick-item {
    width: 100%;
    height: 150px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    gap: 5px;
    cursor: pointer;
}

.wick-item::after {
    transition: all 0.3s ease;
    z-index: -1;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
}

.wick-item:first-child::after {
    background-image: url('./img/wick/photo-1.png');
}

.wick-item:last-child::after {
    background-image: url('./img/wick/photo-2.png');
}

.wick-item:hover::after {
    z-index: -1;
    transform: scale(1.05);
    border: 2px solid #00000020;
}

.wick-item:hover:before {
    transform: scale(1.05);
}

.wick-item h3 {
    font-size: 18px;
    font-family: 'transgender', sans-serif;
    color: var(--title-color);
}

.wick-item p {
    font-size: 12px;
    color: var(--tabs-color);
    font-weight: 300;
}

/* Price panel styles */
.price-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 24px;
    background: #fff;
    border-radius: 60px;
    box-shadow: var(--shadow-color);
    z-index: 1;
}

.price-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.price {
    font-size: 24px;
    font-family: 'transgender', sans-serif;
    color: var(--tabs-color);
}

.price-text {
    font-size: 16px;
    color: var(--tabs-color);
    font-weight: 400;
}

.price-divider {
    width: 1px;
    height: 32px;
    background: #000;
    opacity: 0.1;
}

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

.prev-btn {
    width: 50px;
    height: 50px;
    background-color: #F2F2F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.prev-btn img {
    filter: invert(1);
    opacity: 0.7;
    transition: all 0.3s ease;
    margin-top: 2px;
}

.prev-btn:hover {
    background: #92D3FF;
}

.prev-btn:hover img {
    filter: invert(0);
    opacity: 1;
}

.next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #A573F7;
    width: 140px;
    height: 50px;
    border-radius: 30px;
    color: white;
    border: none;
    cursor: pointer;
    font-family: 'TTHoves', sans-serif;
    font-weight: 500;
    transition: background 0.3s ease;
    font-size: 14px;
}

.next-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #FD96CC;
}

.next-btn .next-icon {
    width: 16px;
    height: 16px;
}

/* Right column styles */
.right-column {
    position: relative;
    overflow: hidden;
}

.right-slider,
.right-slider .swiper-wrapper,
.right-slider .swiper-slide {
    height: 100%;
}

.content-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 0;
    border-radius: 20px;
    height: 100%;
    width: 100%;
    gap: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.content-start::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: conic-gradient(from 267deg at 50% 50%, #FD96CC 34.19999957084656deg, #7385F7 90.44758558273315deg, #7ADB75 196.2000060081482deg, #F8DD98 277.1999931335449deg, #FD96CC 360deg);
    transform: translate(-50%, -50%);
    animation: rotateContainer 15s linear infinite;
    transform-origin: center center;
    will-change: transform;
    z-index: -1;
}

@keyframes rotateContainer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.content-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-text-container span {
    font-size: 22px;
    font-family: 'transgender', sans-serif;
    color: #fff;
    opacity: 0.5;
}

.content-text-container h3 {
    font-size: 22px;
    font-family: 'transgender', sans-serif;
    margin-bottom: 10px;
    color: #fff;
}

.content-text-container p {
    font-size: 16px;
    color: #fff;
    font-weight: 300;
}

.content-image-container {
    width: 220px;
    height: 260px;
    position: relative;
    pointer-events: none;
}

.content-image-container .content-image-png {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-image-container .content-image-gif {
    position: absolute;
    top: -38px;
    left: 51%;
    transform: translateX(-50%);
    width: 30%;
    height: 38%;
    object-fit: contain;
    mix-blend-mode: overlay;
}

.content-start-btn {
    width: 220px;
    height: 50px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%), #6DBE5B;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.content-start-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%), #FF4D4A;
}

.content-start-btn span {
    font-family: 'TTHoves', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}

/* Content end styles */

.content-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0 10px;
}

.content-review {
    display: none;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    background: #fff;
    padding: 15px 20px 10px 20px;
    border-radius: 10px;
}

.content-review-title {
    font-size: 14px;
    font-family: 'transgender', sans-serif;
    color: var(--tabs-color);
    max-height: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.content-review-stars {
    font-size: 14px;
    color: #FD96CC;
    display: flex;
    letter-spacing: 0.20em;
    position: relative;
}

.content-review-stars::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '★★★★★';
    color: #FD96CC;
    opacity: 0.3;
}

.content-review-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--tabs-color);
    margin-top: -5px;
}

.content-review-container .rewiev-name {
    font-weight: 500;
    color: var(--title-color);
}

.content-review-container .rewiev-date {
    color: rgba(24, 24, 24, 0.30);
}

.content-review-container .rewiev-divider {
    width: 1px;
    height: 10px;
    background: #000;
    opacity: 0.1;
}

.rewiev-text {
    font-size: 12px;
    color: var(--title-color);
    max-height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rewiev-divider {
    width: 100%;
    height: 1px;
    background: #000;
    opacity: 0.1;
}

.btn-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.btn-container-divider {
    width: 1px;
    height: 100%;
    background: #000;
    opacity: 0.1;
}

.review-btn-all {
    font-size: 12px;
    color: #FD96CC;
    display: flex;
    gap: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.3s ease;
    opacity: 1;
    font-family: 'TTHoves', sans-serif;
    padding: 0;
}

.review-btn-all.fragrance-notes {
    color: #5FADE3;
}

.review-btn-all a {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}

.review-btn-all:hover {
    opacity: 0.7;
}

.content-review-mobile,
.content-notes-mobile {
    display: none;
}

.content-end-container {
    pointer-events: none;
    position: relative;
    margin-top: auto;
}

.content-end-container .mockup-candle {
    width: 280px;
    height: 333px;
    object-fit: cover;
    z-index: 1;
    position: relative;
}

.content-end-container .label-candle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 99%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

.content-end-container svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -49%);
    width: 99%;
    height: 100%;
    object-fit: cover;
}

.content-aroma-container {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: #fff;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
}

/* Swiper custom styles */
.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: none;
}

@keyframes nudgeButton {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.nested-slider .swiper-button-next {
    animation: nudgeButton 1s ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: 3;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url('./img/arrow-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.swiper-button-prev::after {
    transform: rotate(180deg);
}

/* Responsive adjustments for the nested slider */
.nested-slider .swiper-button-next:hover,
.nested-slider .swiper-button-prev:hover {
    box-shadow: var(--shadow-color);
    background: #92D3FF;
}

.nested-slider .swiper-button-next:hover::after,
.nested-slider .swiper-button-prev:hover::after {
    transform: scale(1.1);
    opacity: 1;
    filter: invert(0);
}

.slider-shadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.slider-shadow.hide-right-shadow::after,
.slider-shadow.hide-left-shadow::before,
.slider-shadow::before {
    opacity: 0;
}

.slider-shadow.show-left-shadow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 30%;
    height: 120%;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 120px 0 50px -50px rgba(242, 242, 242, 1);
    transition: opacity 0.3s ease-in-out;
    transform: translateY(-50%);
    opacity: 1;
}

.slider-shadow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -90px;
    width: 30%;
    height: 120%;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset -120px 0 50px -50px rgba(242, 242, 242, 1);
    transition: opacity 0.3s ease-in-out;
    transform: translateY(-50%);
}

button {
    user-select: none;
}

.swiper-fade .swiper-slide-active .swiper-slide {
    pointer-events: auto !important;
}

.main-slider .swiper-slide-active .nested-slider .swiper-slide {
    pointer-events: auto;
}

/* Swiper custom styles */
.swiper-button-next {
    right: var(--swiper-navigation-next-offset) !important;
}

.swiper-button-prev {
    left: var(--swiper-navigation-prev-offset) !important;
}

/* Text tabs styles */

.text-tabs {
    display: flex;
    gap: 10px;
    margin-top: -2px;
}

.text-tab-btn {
    border: none;
    border-radius: 20px 20px 0px 0px;
    cursor: pointer;
    font-family: 'transgender', sans-serif;
    font-size: 18px;
    height: 50px;
    overflow: visible;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    z-index: 1;
}

.text-tab-btn::before {
    content: '';
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 20px 20px 0px 0px;
}

.text-tab-btn.active[data-content="catalog"]::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #A573F7;
}

.text-tab-btn.active[data-content="custom"]::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #F2BC50;
}

.text-tab-btn:not(.active) {
    background: rgba(24, 24, 24, 0.05);
    color: var(--tabs-color);
}

.text-tab-btn.active {
    color: #fff;
}

.text-tab-btn.active::before {
    opacity: 1;
}

.text-tab-btn .tab-label {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 8px 6px 9px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: 10px;
    font-weight: 500;
    color: var(--tabs-color);
    color: #fff;
    background: #FF4D4A;
    border: 2px solid #F2F2F2;
    border-radius: 100px;
    transition: all 0.3s ease;
    font-family: 'TTHoves', sans-serif;
}

.text-tab-btn:hover .tab-label {
    border: 2px solid #F2F2F2;
}

.text-tab-btn.active .tab-label {
    color: #fff;
    background: #FF4D4A;
    border: 2px solid #F2F2F2;
}

.text-tab-btn br {
    display: none;
}

.text-content {
    background: rgba(24, 24, 24, 0.05);
    border-radius: 0 0 20px 20px;
}

.text-catalog-container {
    background: #fff;
    padding: 20px;
    border: 2px solid #A573F7;
    border-radius: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.text-content-section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.text-content-section.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sub-tab-btn {
    background: transparent;
    border: none;
    color: var(--tabs-color);
    cursor: pointer;
    font-family: 'TTHoves', sans-serif;
    font-size: 14px;
    height: 45px;
    padding: 8px 20px;
    transition: all 0.3s ease;
    border-radius: 30px;
    border: 2px solid #F2F2F2;
}

.sub-tab-btn.active {
    background: #A573F7;
    border: 2px solid #A573F7;
    color: #fff;
}

.sub-tab-btn:hover {
    background: #A573F7;
    border: 2px solid #A573F7;
    color: #fff;
}

.sub-content-section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sub-content-section.active {
    display: block;
    opacity: 1;
}

.sub-content-section .dropdown .dropdown-header {
    min-height: 66px;
}

.dropdown {
    position: relative;
    border-radius: 10px;
    overflow: visible;
}

.dropdown-header {
    background: #F2F2F2;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    gap: 3px;
    border-radius: 10px;
    transition: background 0.3s ease;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
}

.dropdown-header.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 2px solid #F2F2F2;
    border-left: 2px solid #F2F2F2;
    border-right: 2px solid #F2F2F2;
    border-bottom: 1px solid #eee;
}

.dropdown-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--tabs-color);
    text-transform: uppercase;
}

.dropdown-subtitle {
    font-size: 12px;
    color: var(--tabs-color);
}

.dropdown-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    /* Центрируем по вертикали */
    transition: transform 0.3s ease;
}

.dropdown-header.open .dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
    /* Поворачиваем стрелку */
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-radius: 0 0 10px 10px;
    padding: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.dropdown-content.open {
    max-height: 192px;
    overflow-y: auto;
    border: 2px solid #F2F2F2;
    border-top: none;
}

.dropdown-item {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: content-box;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dropdown-item:hover {
    background-color: #E6E6E6;
}

.dropdown-item:first-child {
    border-top: none;
}

.dropdown-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--tabs-color);
    text-transform: uppercase;
}

.dropdown-item-subtitle {
    font-size: 12px;
    color: #666;
}

.custom-text-container {
    background: #fff;
    padding: 20px;
    border: 2px solid #F2BC50;
    border-radius: 20px 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-input-wrapper {
    height: 107px;
    width: 100%;
    position: relative;
}

.custom-input {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    resize: none;
    border-radius: 10px;
    background: #F2F2F2;
    border: none;
    outline: none;
    color: var(--tabs-color);
}

.custom-input::placeholder {
    color: var(--tabs-color);
    font-family: 'TTHoves', sans-serif;
    font-size: var(--placeholder-font-size, 14px);
}

.custom-input-wrapper:first-child .custom-input {
    text-transform: uppercase;
}

.custom-input-wrapper:first-child .custom-input::placeholder {
    content: "Введите заголовок";
    text-transform: uppercase;
}

.custom-input-wrapper:last-child .custom-input::placeholder {
    content: "Введите подзаголовок";
}

.char-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: var(--tabs-color);
    opacity: 0.5;
    pointer-events: none;
}

.next-btn.last-slide {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #FD96CC;
}

.next-btn.last-slide:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #A573F7;
}

.content-end-container {
    position: relative;
}

.label-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #000;
    pointer-events: none;
    z-index: 3;
    width: 185px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.label-title {
    font-size: 18px;
    font-family: 'Evolventa', sans-serif;
    font-weight: 700 !important;
    line-height: 100%;
    margin: 0;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.label-subtitle {
    font-size: 11px;
    margin: 0;
    font-family: 'Myriad', sans-serif;
}

/* Стили для выбраных элементов */
.start-item.selected::before {
    transform: translate(-50%, -50%) scale(1.15);
    border: 2px solid #00000020;
}

.start-item.selected .start-item-icon {
    transform: translate(7.5px, -5.5px);
}

.color-item.selected .color-item-image {
    transform: translate(-50%, -50%) scale(1.15);
}

.color-item.selected .color-item-image::before {
    border: 2px solid #00000020;
}

.aroma-item.selected::before {
    transform: translate(-50%, -50%) scale(1.15);
    border: 2px solid #00000020;
}

.aroma-item.selected .aroma-item-days {
    transform: translate(7.5px, -5.5px);
    border: 2px solid #00000020;
}

.wick-item.selected::after {
    transform: scale(1.05);
    border: 2px solid #00000020;
}

.wick-item.selected::before {
    transform: scale(1.05);
}

.mockup-candle {
    display: none;
}

.mockup-candle.active {
    display: block;
}

.wick-item.selected {
    position: relative;
}

@media (min-width: 960px) {
    .right-column {
        overflow: visible;
    }

    .right-slider {
        overflow: visible;
    }

    .right-slider .swiper-slide>span {
        display: none;
    }
}

@media (max-width: 959px) {
    .uc-container .container {
        zoom: var(--zoom-factor);
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .uc-container {
        padding: 10px 0 30px;
        margin: 0;
    }

    .container {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0 20px;
        gap: 20px;
    }

    /* tabs */

    .tabs {
        justify-content: space-between;
    }

    .tab-btn {
        padding: 0;
        justify-content: center;
        flex-grow: 1;
    }

    /* slider */

    .slider-container {
        position: relative;
        width: auto;
        margin: -10px -20px -10px -20px;
        padding: 10px 20px 10px 20px;
        clip-path: none;
        overflow: hidden;
    }

    .slide-header {
        margin-bottom: 30px;
        white-space: wrap;
        padding-right: 10px;
        height: 80px;
    }

    .slide-header p br {
        display: block;
    }

    .nested-slider {
        width: 100%;
    }

    /* buttons */

    .swiper-button-next {
        right: -10px !important;
    }

    .swiper-button-prev {
        left: 0 !important;
    }

    .slider-shadow::after {
        right: -50px;
    }

    /* right panel */

    .right-slider .swiper-slide:first-child>span {
        display: none;
    }

    /* dropdown */

    .dropdown-content {
        bottom: 100%;
        top: auto;
        z-index: 100;
        border-bottom: none;
    }

    .dropdown-header.open {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom: 2px solid #F2F2F2;
        border-top: 1px solid #eee;
    }

    .dropdown-content.open {
        border-bottom: none;
        border-top: 2px solid #F2F2F2;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .dropdown-header.open .dropdown-icon {
        transform: translateY(-50%) rotate(0deg);
    }

    .dropdown-icon {
        transform: translateY(-50%) rotate(180deg);
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .uc-container {
        padding: 10px 0 30px;
        margin: 0;
    }

    .container {
        position: relative;
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "tabs"
            "right"
            "slider"
            "panel";
        gap: 20px;
        padding: 0 10px;
        background: none;
        box-shadow: none;
    }

    .tabs {
        grid-area: tabs;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .tab-btn {
        padding: 0;
        justify-content: center;
        flex-direction: column;
        height: auto;
        gap: 2px;
        padding: 10px 0;
    }

    .tab-btn:nth-child(5) .tab-icon {
        width: 22px;
    }

    .right-column {
        grid-area: right;
    }

    .left-column {
        display: contents;
    }

    .main-slider .swiper-slide:first-child .nested-slider .swiper-wrapper {
        gap: 25px 20px;
    }

    .nested-slider .swiper-wrapper {
        gap: 20px 20px;
    }

    .slider-container {
        position: relative;
        grid-area: slider;
        width: auto;
        margin: -20px -10px;
        padding: 20px 15px;
        clip-path: none;
        overflow: hidden;
    }

    .slider-container .main-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .slider-container .slide-header {
        text-align: center;
    }

    .slide-header br {
        display: inline;
    }

    .nested-slider {
        width: 100%;
    }

    /* start-content */

    .start-content .swiper-slide {
        width: 130px;
        height: 115px !important;
    }

    .start-content .start-item {
        width: 130px;
        height: 115px;
    }

    .start-content .start-item:hover::before,
    .start-item.selected::before {
        transform: translate(-50%, -50%) scale(1.10);
        border: 2px solid #00000020;
    }

    /* color-content */

    .color-content .swiper-slide {
        width: 124px;
        height: 124px !important;
    }

    .color-content .color-item {
        width: 124px;
        height: 124px;
    }

    .color-content .color-item:hover .color-item-image,
    .color-item.selected .color-item-image {
        transform: translate(-50%, -50%) scale(1.10);
    }

    /* aroma-content */

    .aroma-content .swiper-slide {
        width: 124px;
        height: 124px !important;
    }

    .aroma-content .aroma-item {
        width: 124px;
        height: 124px;
    }

    .aroma-content .aroma-item:hover::before,
    .aroma-item.selected::before {
        transform: translate(-50%, -50%) scale(1.10);
        border: 2px solid #00000020;
    }

    /* wick-content */

    .wick-content {
        height: 268px;
        flex-direction: column;
    }

    .wick-item.selected::after,
    .wick-item:hover::after {
        transform: scale(1.01);
        border: 2px solid #00000020;
    }

    /* container-text */

    .text-tabs {
        padding-top: 0;
        margin-top: 0;
    }

    .text-tab-btn .tab-label {
        right: 0;
    }

    .container-text {
        height: 268px;
        display: flex;
        flex-direction: column;
    }

    .custom-input-wrapper,
    .text-content,
    .text-catalog-container,
    .custom-text-container,
    .text-content-section {
        height: 100%;
    }

    .text-catalog-container,
    .custom-text-container {
        padding: 10px;
    }

    .sub-content,
    .sub-content-section,
    .sub-content-section .dropdown,
    .sub-content-section .dropdown .dropdown-header {
        height: 100%;
    }

    .dropdown-content {
        bottom: 100%;
        z-index: 100;
        top: auto;
        border-bottom: none;
    }

    .dropdown-header.open {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom: 2px solid #F2F2F2;
        border-top: 1px solid #eee;
    }

    .dropdown-content.open {
        border-bottom: none;
        border-top: 2px solid #F2F2F2;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .dropdown-header.open .dropdown-icon {
        transform: translateY(-50%) rotate(0deg);
    }

    .dropdown-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    /* price-panel */

    .price-panel {
        grid-area: panel;
        width: 100%;
    }

    .swiper-button-next {
        right: -10px !important;
    }

    .swiper-button-prev {
        left: -10px !important;
    }

    .slider-shadow::after {
        right: -50px;
    }

    /* Стили для content-start */
    .content-start {
        display: grid;
        grid-template-areas:
            "text image"
            "button image";
        justify-content: space-between;
        padding: 30px;
        height: auto;
        gap: 20px;
    }

    .content-text-container {
        grid-area: text;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .content-text-container span {
        display: none;
    }

    .content-start-btn {
        grid-area: button;
        align-self: flex-start;
    }

    .content-image-container {
        grid-area: image;
        zoom: 0.5;
    }

    .right-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .right-slider .swiper-slide:first-child>span {
        display: block;
        font-size: 22px;
        font-family: 'transgender', sans-serif;
        color: #1818181A;
    }

    .content-end-container {
        zoom: 0.8;
    }

    @supports (-webkit-hyphens:none) {
        .content-end-container {
            zoom: unset;
            transform: scale(0.8);
            transform-origin: top;
        }
    }

    .content-aroma-container {
        zoom: 1.2;
        right: -40px;
        bottom: 0;
    }

    .content-review-mobile,
    .content-notes-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 0;
        gap: 3px;
        background: #fff;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        text-decoration: none;
        cursor: pointer;
    }

    .content-review-mobile {
        right: 0;
    }

    .content-notes-mobile {
        left: 0;
    }

    .content-review-mobile img,
    .content-notes-mobile img {
        width: 30px;
        height: 30px;
    }

    .content-review-mobile span,
    .content-notes-mobile span {
        font-size: 12px;
        color: var(--title-color);
        text-align: center;
    }

    /* Buttons */
    .start-content.nested-slider .swiper-button-next,
    .start-content.nested-slider .swiper-button-prev {
        top: calc((100% + 13px) / 2) !important;
    }

    .color-content.nested-slider .swiper-button-next,
    .color-content.nested-slider .swiper-button-prev,
    .aroma-content.nested-slider .swiper-button-next,
    .aroma-content.nested-slider .swiper-button-prev {
        top: calc((100% + 26px) / 2) !important;
    }
}

@media (min-width: 320px) and (max-width: 639px) {
    .uc-container {
        padding: 10px 0 0;
        margin: 0;
    }

    .container {
        position: relative;
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "tabs"
            "right"
            "slider"
            "panel";
        gap: 20px;
        padding: 0 10px;
        background: none;
        box-shadow: none;
    }

    .tabs {
        grid-area: tabs;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }

    .tab-btn {
        padding: 0;
        justify-content: center;
        flex-direction: column;
        height: 35px;
        gap: 2px;
        padding: 4px 13px;
    }

    .tab-btn .tab-icon {
        width: 12px;
        height: 12px;
    }

    .tab-btn:nth-child(5) .tab-icon {
        width: 14px;
    }

    .tab-btn span {
        font-size: 8px;
    }

    .right-column {
        grid-area: right;
        margin-top: -10px;
    }

    .left-column {
        display: contents;
    }

    .main-slider .swiper-slide:first-child .nested-slider .swiper-wrapper {
        gap: 18px 10px;
    }

    .nested-slider .swiper-wrapper {
        gap: 7px 10px;
    }

    .slider-container {
        position: relative;
        grid-area: slider;
        width: auto;
        margin: -20px -10px -20px;
        padding: 5px 15px 20px;
        clip-path: none;
        overflow: hidden;
    }

    .slider-container .main-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .slider-container .slide-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .slider-container .slide-header h2 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .slider-container .slide-header p {
        font-size: 10px;
    }

    .slide-header br {
        display: inline;
    }

    .slide-header img {
        margin-left: 3px;
        width: 15px;
    }

    .nested-slider {
        width: 100%;
    }

    /* start-content */

    .start-content .swiper-slide {
        width: 88px;
        height: 78px !important;
    }

    .start-content .start-item {
        width: 88px;
        height: 78px;
    }

    .start-content .start-item::before {
        border: 1px solid transparent;
        border-radius: 10px;
    }

    .start-content .start-item:hover::before,
    .start-item.selected::before {
        transform: translate(-50%, -50%) scale(1.08);
        border: 1px solid #00000020;
    }

    .start-item-image {
        width: 42px;
        height: 52px;
        top: -10px;
    }

    .start-item-text {
        font-size: 10px;
        height: 24px;
    }

    .start-item-icon {
        width: 20px;
        height: 20px;
        top: -5px;
        right: -3px;
    }

    .start-item-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .start-item.selected .start-item-icon,
    .start-content .start-item:hover .start-item-icon {
        transform: translate(3.5px, -2.5px);
    }

    /* color-content */

    .color-content .swiper-slide {
        width: 88px;
        height: 88px !important;
    }

    .color-content .color-item {
        width: 88px;
        height: 88px;
    }

    .color-content .color-item .color-item-image::before {
        border: 1px solid transparent;
    }

    .color-content .color-item:hover .color-item-image::before,
    .color-item.selected .color-item-image::before {
        border: 1px solid #00000020;
    }

    .color-content .color-item:hover .color-item-image,
    .color-item.selected .color-item-image {
        transform: translate(-50%, -50%) scale(1.08);
    }

    .color-item-text {
        font-size: 10px;
    }

    /* aroma-content */

    .aroma-content .swiper-slide {
        width: 88px;
        height: 88px !important;
    }

    .aroma-content .aroma-item {
        width: 88px;
        height: 88px;
        gap: 2px;
    }

    .aroma-content .aroma-item::before {
        border: 1px solid transparent;
        border-radius: 10px;
    }

    .aroma-content .aroma-item:hover::before,
    .aroma-item.selected::before {
        transform: translate(-50%, -50%) scale(1.08);
        border: 1px solid #00000020;
    }

    .aroma-item.selected .aroma-item-days,
    .aroma-content .aroma-item:hover .aroma-item-days {
        border: 1px solid #F2F2F2;
        transform: translate(0, 0);
    }

    .aroma-item-days {
        font-size: 8px;
        padding: 4px 6px;
        height: auto;
        top: -5px;
        right: -6px;
        border: 1px solid #F2F2F2;
    }

    .aroma-item-image {
        width: 44px;
        height: 44px;
    }

    .aroma-item-text {
        font-size: 10px;
        height: 24px;
    }

    /* wick-content */

    .wick-content {
        height: 183px;
        flex-direction: column;
        gap: 8px;
    }

    .wick-item.selected::after,
    .wick-item:hover::after {
        transform: scale(1.02);
        border: 1px solid #00000020;
    }

    .wick-item {
        height: 100%;
        padding: 16px 20px;
    }

    .wick-item::after {
        border: 1px solid transparent;
        border-radius: 10px;
    }

    .wick-item h3 {
        font-size: 12px;
    }

    .wick-item p {
        font-size: 10px;
    }

    /* container-text */

    .text-tabs {
        padding-top: 0;
        margin-top: 0;
        gap: 4px;
    }

    .text-tab-btn {
        font-size: 12px;
        border-radius: 10px 10px 0px 0px;
        height: 40px;
    }

    .text-tab-btn::before {
        border-radius: 10px 10px 0px 0px;
    }

    .text-tab-btn .mobile-break {
        display: inline;
    }

    .text-tab-btn .space {
        display: none;
    }

    .text-tab-btn .tab-label,
    .text-tab-btn.active .tab-label,
    .text-tab-btn:hover .tab-label {
        font-size: 8px;
        padding: 4px 6px;
        height: auto;
        top: -5px;
        right: -6px;
        border: 1px solid #F2F2F2;
    }

    .text-content {
        border-radius: 0 0 10px 10px;
    }

    .text-catalog-container {
        border-radius: 0 10px 10px 10px;
        border: 1px solid #A573F7;
        gap: 8px;
    }

    .custom-text-container {
        border: 1px solid #F2BC50;
        border-radius: 10px 0 10px 10px;
        gap: 8px;
    }

    .custom-input {
        padding: 8px;
        font-size: 10px;
        border-radius: 5px;
    }

    .custom-input::placeholder {
        font-size: var(--placeholder-font-size, 10px);
    }

    .char-counter {
        font-size: 8px;
    }

    .sub-tabs {
        gap: 2px;
    }

    .sub-tab-btn {
        font-size: 8px;
        padding: 6px 12px;
        height: auto;
        border: 1px solid #F2F2F2;
    }

    .sub-tab-btn.active,
    .sub-tab-btn:hover {
        border: 1px solid #A573F7;
    }

    .container-text {
        height: 183px;
        display: flex;
        flex-direction: column;
    }

    .custom-input-wrapper,
    .text-content,
    .text-catalog-container,
    .custom-text-container,
    .text-content-section {
        height: 100%;
    }

    .text-catalog-container,
    .custom-text-container {
        padding: 8px;
    }

    .dropdown {
        border-radius: 5px;
    }

    .dropdown-header {
        padding: 8px;
        min-height: auto !important;
        border-radius: 5px;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

    .dropdown-content {
        bottom: 100%;
        z-index: 100;
        top: auto;
        border-bottom: none !important;
        padding: 0;
    }

    .dropdown-title,
    .dropdown-item-title {
        font-size: 10px;
    }

    .dropdown-subtitle,
    .dropdown-item-subtitle {
        font-size: 8px;
    }

    .dropdown-item {
        padding: 8px;
    }

    .dropdown-header.open {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom: 1px solid #F2F2F2;
        border-top: 1px solid #eee;
        border-left: 1px solid #F2F2F2;
        border-right: 1px solid #F2F2F2;
    }

    .dropdown-content.open {
        border-bottom: none;
        border-top: 1px solid #F2F2F2;
        border: 1px solid #F2F2F2;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .dropdown-header.open .dropdown-icon {
        transform: translateY(-50%) rotate(0deg);
    }

    .dropdown-icon {
        transform: translateY(-50%) rotate(180deg);
        right: 8px;
    }

    /* price-panel */

    .price-panel {
        grid-area: panel;
        width: calc(100% + 20px);
        margin: 0 -10px;
        height: 51px;
        padding: 8px 10px;
        border-radius: 0;
        box-shadow: none;
    }

    .price-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .price {
        font-size: 14px;
    }

    .price-divider {
        display: none;
    }

    .price-text {
        font-size: 10px;
    }

    .controll-btn {
        gap: 4px;
    }

    .next-btn {
        height: 35px;
        width: auto;
        padding: 18px 16px;
        font-size: 12px;
    }

    .prev-btn {
        width: 35px;
        height: 35px;
    }

    .prev-btn img {
        margin-bottom: -2px;
        margin-right: 2px;
    }

    /* buttons */

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        width: 12px;
        height: 12px;
    }

    .swiper-button-next {
        right: -10px !important;
    }

    .swiper-button-prev {
        left: -10px !important;
    }

    .start-content.nested-slider .swiper-button-next,
    .start-content.nested-slider .swiper-button-prev {
        top: calc((100% + 9px) / 2) !important;
    }

    .color-content.nested-slider .swiper-button-next,
    .color-content.nested-slider .swiper-button-prev,
    .aroma-content.nested-slider .swiper-button-next,
    .aroma-content.nested-slider .swiper-button-prev {
        top: calc((100% + 18px) / 2) !important;
    }

    .slider-shadow {
        display: none;
    }

    .slider-shadow::after {
        right: -50px;
    }

    /* Стили для content-start */
    .content-start {
        display: grid;
        grid-template-areas:
            "text image"
            "button image";
        justify-content: space-between;
        padding: 12px;
        height: auto;
        gap: 12px;
        border-radius: 10px;
    }

    .content-start::before {
        background: linear-gradient(148deg, #7385F7 6.11%, #FD96CC 35.5%, #F8DD98 59.39%, #95E883 92.24%);
        width: 100%;
        height: 100%;
        animation: none;
    }

    .content-text-container {
        grid-area: text;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .content-text-container span {
        display: none;
    }

    .content-text-container h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .content-text-container p {
        font-size: 10px;
    }

    .content-start-btn {
        grid-area: button;
        align-self: flex-start;
        display: flex;
        align-items: center;
        width: fit-content;
        height: 35px;
        padding: 18px 24px;
    }

    .content-start-btn span {
        font-size: 10px;
    }

    .content-image-container {
        grid-area: image;
        zoom: 0.39;
    }

    .content-image-container .content-image-gif {
        width: 50%;
        height: 50%;
    }

    .right-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .right-slider .swiper-slide:first-child>span {
        display: block;
        font-size: 14px;
        font-family: 'transgender', sans-serif;
        color: #1818181A;
    }

    .content-end-container {
        zoom: 0.45;
    }

    .content-review-mobile,
    .content-notes-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 0;
        gap: 3px;
        background: #fff;
        height: 60px;
        width: 60px;
        border-radius: 50%;
        text-decoration: none;
        cursor: pointer;
    }

    .content-review-mobile {
        right: 0;
    }

    .content-notes-mobile {
        left: 0;
    }

    .content-review-mobile img,
    .content-notes-mobile img {
        width: 16px;
        height: 16px;
        margin-top: -5px;
    }

    .content-review-mobile span,
    .content-notes-mobile span {
        font-size: 8px;
        line-height: 1;
        color: var(--title-color);
        text-align: center;
    }

    @supports (-webkit-hyphens:none) {
        .content-end-container {
            zoom: unset;
            transform: scale(0.45);
            transform-origin: top;
        }
    }

    .content-aroma-container {
        zoom: 1.2;
        right: -40px;
        bottom: 0;
    }

    .content-notes-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        gap: 3px;
        background: #fff;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        text-decoration: none;
        cursor: pointer;
    }

    .content-notes-mobile img {
        width: 30px;
        height: 30px;
    }

    .content-notes-mobile span {
        font-size: 12px;
        color: var(--title-color);
        text-align: center;
    }

    @media (max-width: 639px) {
        .content-notes-mobile {
            height: 60px;
            width: 60px;
        }

        .content-notes-mobile img {
            width: 16px;
            height: 16px;
            margin-top: -5px;
        }

        .content-notes-mobile span {
            font-size: 8px;
            line-height: 1;
        }
    }
}

@media (hover: none) {

    .uc-container,
    .uc-container * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (min-width: 640px) and (max-width: 959px) {
        .right-column {
            margin-bottom: -30px;
        }
    }

    @media (min-width: 320px) and (max-width: 639px) {
        .right-column {
            margin-bottom: -20px;
        }

        .slider-container {
            padding: 15px 15px 20px;
            margin: -15px -10px -20px;
        }

        .right-slider .swiper-slide:first-child>span {
            margin-top: -5px;
        }
    }
}

/* popup */

.uc-review .t-popup__container {
    border-radius: 10px;
    height: fit-content !important;
    overflow: hidden;
    zoom: var(--zoom-factor);
}

.popup-content-review {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    background: #fff;
    padding: 40px 40px 0;
    border-radius: 10px;
    max-width: 100%;
    max-height: 500px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.popup-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.popup-close-btn img {
    width: 100%;
    height: 100%;
}

.uc-review .t-popup__close {
    display: none;
}

.popup-content-review-title {
    font-size: 24px;
    font-family: 'transgender', sans-serif;
    color: var(--tabs-color);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.popup-content-reviews-container {
    overflow-y: auto;
    max-height: calc(500px - 80px);
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-review-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'TTHoves', sans-serif;
}

.popup-review-item:last-child {
    padding-bottom: 30px;
    border-bottom: none;
}

.popup-content-review-stars {
    font-size: 14px;
    color: #FD96CC;
    display: flex;
    letter-spacing: 0.20em;
    position: relative;
}

.popup-content-review-stars::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '★★★★★';
    color: #FD96CC;
    opacity: 0.3;
}

.popup-content-review-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--tabs-color);
}

.popup-content-review-container .popup-rewiev-name {
    font-weight: 500;
    color: var(--title-color);
}

.popup-content-review-container .popup-rewiev-date {
    color: rgba(24, 24, 24, 0.30);
}

.popup-content-review-container .popup-rewiev-divider {
    width: 1px;
    height: 10px;
    background: #000;
    opacity: 0.1;
}

.popup-rewiev-text {
    font-size: 12px;
    color: var(--title-color);
    overflow: hidden;
}

@media (max-width: 639px) {
    .popup-close-btn {
        top: 16px;
        right: 16px;
        width: 16px;
        height: 16px;
        z-index: 11;
    }

    .popup-content-review {
        padding: 16px 16px 0;
        max-height: 315px;
        gap: 10px;
    }

    .popup-content-review-title {
        font-size: 14px;
    }

    .popup-content-reviews-container {
        max-height: calc(315px - 40px);
        gap: 15px;
    }
}

/* popup confirm */

.uc-confirm .t-popup__container {
    border-radius: 10px;
    max-width: 400px;
    height: fit-content !important;
    overflow: hidden;
    zoom: var(--zoom-factor);
}

.popup-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.popup-close-btn img {
    width: 100%;
    height: 100%;
}

.uc-confirm .t-popup__close {
    display: none;
}

.popup-content-confirm {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    background: #fff;
    padding: 40px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.popup-content-confirm * {
    font-family: 'TTHoves', sans-serif;
}

.popup-confirm-title {
    font-size: 24px;
    font-family: 'transgender', sans-serif;
    color: var(--tabs-color);
}

.popup-confirm-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--tabs-color);
}

.popup-confirm-row {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
}

.popup-confirm-container>.popup-confirm-row:nth-child(1),
.popup-confirm-container>.popup-confirm-row:nth-child(2),
.popup-confirm-container>.popup-confirm-row:nth-child(3) {
    align-items: center;
}

.popup-confirm-label {
    min-width: 100px;
}

.popup-confirm-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-circle,
.aroma-icon,
.wick-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #fff;
}

.color-circle:before,
.aroma-icon:before,
.wick-icon:before {
    content: '';
    display: block;
    border: 0.5px solid #00000020;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    mix-blend-mode: hard-light;
}

.aroma-icon {
    background-size: 80%;
}

.wick-icon {
    background-position: right;
}

.inscription-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.inscription-value span:first-child {
    text-transform: uppercase;
}

.inscription-note {
    color: var(--text-color);
}

.inscription-disclaimer {
    color: rgba(24, 24, 24, 0.30);
    font-size: 10px;
}

.popup-confirm-footer {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 20px;
}

.popup-confirm-footer .popup-confirm-row {
    flex-direction: column;
    min-width: 100px;
    gap: 5px;
}

.popup-confirm-footer .popup-confirm-row .popup-confirm-value {
    font-size: 24px;
    font-family: 'transgender', sans-serif;
    color: var(--tabs-color);
}

.popup-confirm-button {
    margin-top: 10px;
    padding: 18px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #FD96CC;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.popup-confirm-button:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #A573F7;
}

@media (max-width: 639px) {
    .popup-close-btn {
        top: 16px;
        right: 16px;
        width: 16px;
        height: 16px;
        z-index: 11;
    }

    .popup-content-confirm {
        padding: 16px 16px;
        gap: 15px;
    }

    .popup-confirm-title,
    .popup-confirm-footer .popup-confirm-row .popup-confirm-value {
        font-size: 16px;
    }

    .popup-confirm-row {
        gap: 0;
        font-size: 12px;
    }

    .popup-confirm-button {
        margin-top: 0;
        padding: 0 24px;
        height: 35px;
        vertical-align: middle;
    }

    .popup-confirm-footer {
        padding-top: 10px;
        margin-top: 0;
        gap: 0;
    }
}

.tooltip {
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--tabs-color);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    z-index: 1000;
    max-width: 250px;
}

.tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.tooltip[data-placement='bottom'] .tooltip-arrow {
    top: -4px;
}

.tooltip[data-placement='top'] .tooltip-arrow {
    bottom: -4px;
}

.tooltip-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    white-space: normal;
    word-wrap: break-word;
}

.tooltip-text span:first-child {
    font-weight: 500;
}