﻿
/* Make text look crisper and more legible in all browsers */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
}
/* Set color style to inherit */
.inherit-color * {
    color: inherit;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
    margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext > :last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
}
/* Make sure containers never lose their center alignment */
.container-medium, .container-small, .container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}
/*
Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/
/* Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* These classes are never overwritten */
.hide {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .hide-mobile-landscape {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .hide-mobile {
        display: none !important;
    }
}

.margin-0 {
    margin: 0rem !important;
}

.padding-0 {
    padding: 0rem !important;
}

.spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
}

.margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

.margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}


/* активний стан */
.addcart-modal-overlay.show {
    display: flex;
    opacity: 1;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.popular-item.color-card.not-move:hover .popular-card {
    transform: none;
}

.popular-item:hover .img-arrow {
    opacity: 1;
}

.logo-carousel__track {
    display: flex;
    flex-wrap: nowrap; /* головне — НЕ переносити */
    align-items: center;
    white-space: nowrap;
}

.logo-carousel__wrapper {
    display: flex;
    gap: 32px;
    flex-shrink: 0; /* не стискається */
    width: auto; /* ключове — замінено з 100% */
}

.wrapper-logo-chain {
    flex: none;
}

@media (max-width: 991px) {
    /* Градієнт бекграунд для меню */
    body.light-theme .navbar-navigation {
        background-image: linear-gradient(#EFEFEF, #D6BCC5);
    }
    /* Тексти */
    body.light-theme .navbar-link,
    body.light-theme .mobile-nav-title,
    body.light-theme .mobile-nav-link {
        color: #9D9D9D;
    }
    /* Dropdown (Каталог → лінки) */
    body.light-theme .catalog-dropdown-link {
        color: #5D5D5D;
    }
    /* Лінії */
    body.light-theme .divider-nav {
        background-color: #FFFFFF;
    }
    /* Соц. іконки */
    body.light-theme .mobile-social-icon {
        background-color: #9D9D9D;
        color: #E6E6E8;
    }
    /* Лого у мобільному меню */
    body.light-theme .mobile-social-brand {
        color: #9D9D9D;
    }

    body.light-theme .burger-menu.w--open .top-line-burger,
    body.light-theme .burger-menu.w--open .center-line-burger,
    body.light-theme .burger-menu.w--open .bottom-line-burger {
        background-color: #9D9D9D;
    }

    body.light-theme .burger-button-wrapper .top-line-burger,
    body.light-theme .burger-button-wrapper .center-line-burger,
    body.light-theme .burger-button-wrapper .bottom-line-burger {
        background-color: #A9828B;
    }

    body.light-theme .footer {
        border-top: 0;
    }
}

.popular-item:hover .popular-footer {
    height: 70px;
    overflow: visible;
}

.popular-item:hover .popular-card {
    transform: translateY(-26px);
}

.wrapper-item-size.active .size-marker {
    width: 12px;
    transition: width 0.3s ease;
    background-color: #8F8E8E;
}
/* Базові стилі */
.addcart {
    transition: background-color 0.3s ease;
}
/* Ховер на всій кнопці */
.popular-footer:hover .addcart:not(:hover) {
    background-color: #E3E3E3;
}
/* Ховер безпосередньо на іконці (має пріоритет) */
.popular-footer .addcart:hover {
    background-color: #402424;
    color: white;
}

.cart-popup.is-hidden {
    transition: all .2s;
    transform: translate(106%);
}

.cart-popup.open {
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}

.image-product {
    transition: transform 0.8s ease, opacity 0.8s ease;
    transform-origin: center center;
}

    .image-product.zoom-out {
        transform: scale(1.08); /* трошки збільшується */
        opacity: 0.7; /* легке затемнення */
    }
/* cart-page Якщо працюєш без препроцесора (чистий CSS) — ось той самий код: */
.cart-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}
/* 7px загальна ширина */
.cart-item-list::-webkit-scrollbar {
    width: 7px;
}
/* 2px сіра лінія — справжня, не штучна */
.cart-item-list::-webkit-scrollbar-track {
    background: #1a1a1a; /* фон */
}

    .cart-item-list::-webkit-scrollbar-track:vertical {
        background: linear-gradient( to right, transparent 2px, rgba(255,255,255,0.12) 2px, rgba(255,255,255,0.12) 4px, transparent 4px );
    }
/* 5px рожевий повзунок — строго по центру */
.cart-item-list::-webkit-scrollbar-thumb {
    background: #ca8b8e;
    border-radius: 10px;
    /* центрування хендла: */
    width: 5px;
    margin-left: 1px;
    margin-right: 1px;
}

    .cart-item-list::-webkit-scrollbar-thumb:hover {
        background: #d79a9d;
    }

@media (max-width: 991px) {
    .popular-item:hover .popular-footer {
        height: 58px;
    }

    .footer-product-info {
        width: calc(100% + 16px); /* додаємо 8px зліва і 8px справа */
        margin-left: -8px;
        margin-right: -8px;
    }
}

.image-product {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.blur-anim {
    filter: blur(8px);
    transform: scale(1.08);
}


body {
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Світла тема */
body.light-theme {
    background-color: #EAEAEE !important;
}
    /* Світла тема */
    body.light-theme .is-black {
        display: none !important;
    }

    body.light-theme .is-white {
        display: inline-flex !important;
    }
    /* Світла тема — фон футера */
    body.light-theme .footer {
        margin-top: 0px;
        background-color: #EFEFEF !important;
    }
    /* Світла тема — section-team прозора */
    body.light-theme .section-team {
        background-color: transparent !important;
    }
    /* HERO */
    body.light-theme .section-head-home .hero-title {
        color: #5D5D5D;
    }

    body.light-theme .section-head-home .hero-text {
        color: #9D9D9D;
    }
    /* TECHNOLOGY */
    body.light-theme .section-technology .technology-title {
        color: #5D5D5D;
    }

    body.light-theme .section-technology .technology-text {
        color: #7C7B7B;
    }
    /* ABOUT */
    body.light-theme .section-about .about-title {
        color: #626262;
    }

    body.light-theme .section-about .about-text {
        color: #B4B4B4;
    }
    /* ЛОГО (SVG) */
    body.light-theme .navbar .logo-code-svg,
    body.light-theme .navbar .logo-code-svg svg,
    body.light-theme .navbar .logo-code-svg path {
        color: #5D5D5D;
    }

    body.light-theme .theme-toggle-btn {
        justify-content: flex-start; /* кружечок вліво */
        background-image: linear-gradient(90deg, #DEB1BF 0%, #DF9EB2 51%, #CF8CA1 100%);
    }
/* Темна тема (за замовчуванням) */
.theme-toggle-btn .black-theme {
    display: block;
}

.theme-toggle-btn .white-theme {
    display: none;
}
/* Світла тема */
body.light-theme .theme-toggle-btn .black-theme {
    display: none;
}

body.light-theme .theme-toggle-btn .white-theme {
    display: block;
}
/* Світла тема — неактивні елементи */
body.light-theme .wrapper-item-size {
    color: #C0C0C1;
}

    body.light-theme .wrapper-item-size .size-marker {
        background-color: #C0C0C1;
    }
    /* Світла тема — активний елемент */
    body.light-theme .wrapper-item-size.active {
        color: #A4A4A4;
    }

        body.light-theme .wrapper-item-size.active .size-marker {
            background-color: #A4A4A4;
        }

body.light-theme .hero-button {
    color: #402424;
}

    body.light-theme .hero-button:hover {
        background-color: #FFACC6;
    }

    body.light-theme .hero-button:active {
        background-color: #402424;
        color: #FFFFFF;
    }

body.light-theme .popular-button-text {
    color: #402424;
}

    body.light-theme .popular-button-text:hover {
        color: #402424;
        background-color: #FFACC6;
    }

body.light-theme .addcart {
    background-color: #FFACC6;
}

body.light-theme .logo-tech {
    color: #FFACC6;
}

body.light-theme .logo-footer {
    color: #C4C4C4;
}

body.light-theme .footer-link,
body.light-theme .footer-column-title,
body.light-theme .footer-contact-title,
body.light-theme .footer-contact-type,
body.light-theme .footer-contact-number {
    color: #C4C4C4;
}

body.light-theme .footer-contact-value {
    color: #ACACAC;
}

    body.light-theme .footer-contact-value:hover {
        color: #FFACC6;
    }

body.light-theme .footer-link:hover {
    color: #FFACC6;
}

body.light-theme .popular-link {
    color: #7C7B7B;
}

    body.light-theme .popular-link:hover {
        color: #FFACC6;
    }

.popular-item:hover .popular-category,
.popular-item:hover .popular-price {
    color: #585151;
}
/* Фон */
body.light-theme .cart-popup,
body.light-theme .cart-popup-header {
    background-color: #EFEFEF;
}
/* Текст 9D9D9D */
body.light-theme .cart-popup-title,
body.light-theme .cart-popup-close,
body.light-theme .cart-popup-price {
    color: #9D9D9D;
}
/* cart-popup-name — колір 5D5D5D */
body.light-theme .cart-popup-name {
    color: #5D5D5D;
}
/* Колір для size-label/value/remove — 7C7B7B */
body.light-theme .cart-popup-size-label,
body.light-theme .cart-popup-size-value,
body.light-theme .cart-popup-remove {
    color: #7C7B7B;
}
/* Кнопки кількості */
body.light-theme .quantity-btn {
    background-color: #E5E5E5;
    color: #5D5D5D; /* щоб текст не зникав */
}
/* quantity-number */
body.light-theme .quantity-number {
    border-color: #5D5D5D;
    color: #FFFFFF;
}
/* quantity-number — текст 5D5D5D */
body.light-theme .quantity-number {
    color: #5D5D5D;
    border-color: #5D5D5D;
}
/* Бордер між айтемами */
body.light-theme .cart-popup-item {
    border-bottom: 1px solid #EAEAEE;
}
/* summary блок */
body.light-theme .cart-popup-summary {
    background-color: #EFEFEF;
}
/* checkout кнопка */
body.light-theme .summary-checkout-btn {
    color: #5D5D5D;
}
/* summary labels */
body.light-theme .summary-label,
body.light-theme .summary-value {
    color: #9D9D9D;
}

body.light-theme .cart-popup-close:hover {
    color: #FFACC6;
}
/* Дефолт */
body.light-theme .summary-checkout-btn {
    color: #5D5D5D;
}
    /* Hover */
    body.light-theme .summary-checkout-btn:hover {
        background-color: #FFACC6;
    }
    /* Active (Pressed) */
    body.light-theme .summary-checkout-btn:active {
        background-color: #402424;
        color: #FFFFFF;
    }

body.light-theme .navbar-link:hover {
    color: #402424;
}
/* Заголовок товару */
body.light-theme .product-title {
    color: #5D5D5D;
}
/* Хлібні крихти */
body.light-theme .breadcrumbs-link {
    color: #9D9D9D;
}

    body.light-theme .breadcrumbs-link.last {
        color: #C4C4C4;
    }
/* Ціна */
body.light-theme .product-price {
    color: #9D9D9D;
}
/* Параметри (характеристики) */
body.light-theme .param-label {
    color: #9D9D9D;
}

body.light-theme .param-value {
    color: #5D5D5D;
}
/* Заголовок розмірів */
body.light-theme .product-size-title {
    color: #C4C4C4;
}

body.light-theme .product-size-guide {
    color: #5D5D5D;
}

body.light-theme .popular-footer.button-head {
    background-color: #FFFFFF;
}

body.light-theme .arrow-breadcrumbs {
    color: #9D9D9D;
}
/* quantity-btn — фон білий */
body.light-theme .quantity-btn._w-b {
    background-color: #FFFFFF;
}
/* quantity-number — бордер */
body.light-theme .quantity-number._w-b {
    border-color: #795F5F;
}
/* cart-title */
body.light-theme .cart-title {
    color: #5D5D5D;
}
/* summary cart labels */
body.light-theme .summary-label-cart,
body.light-theme .summary-value-cart {
    color: #9D9D9D;
}

body.light-theme .cart-popup-name:hover,
body.light-theme .cart-popup-remove:hover {
    color: #FFACC6;
}

body.light-theme .cart-item,
body.light-theme .summary-row-cart {
    border-bottom: 2px solid #D5D5D5;
}

body.light-theme .summary-checkout-btn {
    background-color: #FFFFFF;
}
/* Заголовки */
body.light-theme .checkout-title,
body.light-theme .checkout-section-title {
    color: #5D5D5D;
}
/* Рядки з бордером */
body.light-theme .checkout-row {
    border-bottom: 2px solid #D5D5D5;
}
/* Чекбокс обведення */
body.light-theme .checkout-checkbox {
    border-color: #9D9D9D;
}

body.light-theme .checkout-section {
    border-bottom: 2px solid #D5D5D5;
}

body.light-theme .checkout-input {
    border-color: #D5D5D5;
}

body.light-theme .checkout-input {
    color: #7C7B7B;
}

body.light-theme .checkout-section.not-padding {
    border-bottom: none;
}

body.light-theme .cart-item-list .cart-item:last-child {
    border-bottom: none;
}
/* Фон треку */
body.light-theme .cart-item-list::-webkit-scrollbar-track {
    background: #D5D5D5;
}
    /* 2px сіра лінія */
    body.light-theme .cart-item-list::-webkit-scrollbar-track:vertical {
        background: linear-gradient( to right, transparent 2px, #D5D5D5 2px, #D5D5D5 4px, transparent 4px );
    }
/* 5px рожевий повзунок */
body.light-theme .cart-item-list::-webkit-scrollbar-thumb {
    background: #FFACC6;
}
/* Внутрішній квадрат — зменшено пропорційно */
.checkout-checkbox::after {
    content: "";
    position: absolute;
    inset: 2px; /* ⬅ пропорційний внутрішній паддинг */
    background: transparent;
    transition: 0.25s ease;
}
/* Позбавляємось дефолтного білої заливки Webflow */
.checkout-checkbox.w--redirected-checked {
    background-color: #0E0C0C !important;
    background-image: none !important;
    border-color: #C7A8A8;
}
    /* CHECKED — білий квадрат + glow під нові розміри */
    .checkout-checkbox.w--redirected-checked::after {
        background: #FFFFFF;
        box-shadow: 0 0 14px rgba(255, 255, 255, 0.35), 0 0 7px rgba(255, 255, 255, 0.55);
    }
/* Внутрішній квадрат */
body.light-theme .checkout-checkbox::after {
    content: "";
    position: absolute;
    inset: 2px; /* новий інсет */
    background: transparent;
    transition: 0.25s ease;
}
/* Stan CHECKED — FFACC6 квадрат + glow */
body.light-theme .checkout-checkbox.w--redirected-checked {
    background-color: #EAEAEE !important;
    border-color: #9D9D9D;
    background-image: none !important;
}
    /* Внутрішній квадрат з glow */
    body.light-theme .checkout-checkbox.w--redirected-checked::after {
        background: #FFACC6;
        box-shadow: 0 0 16px rgba(255, 172, 198, 0.45), /* велике світіння */
        0 0 8px rgba(255, 172, 198, 0.65); /* ближче сильніше */
    }
/* Дефолт */
body.light-theme .catalog-tab-link {
    color: #C4C4C4;
}
    /* Hover */
    body.light-theme .catalog-tab-link:hover {
        color: #FFACC6;
    }
    /* Активний таб */
    body.light-theme .catalog-tab-link.w--current {
        color: #9D9D9D;
        border-bottom-color: #9D9D9D;
    }

body.light-theme .breadcrumbs-link:hover {
    color: #FFACC6;
}
/* Останній breadcrumb — повністю без ховера */
body.light-theme .breadcrumbs-link.last {
    color: #C4C4C4;
    pointer-events: none; /* мишка не реагує */
    cursor: default; /* курсор звичайний */
}

    body.light-theme .breadcrumbs-link.last:hover {
        color: #C4C4C4; /* фіксуємо */
    }

.breadcrumbs-link.last {
    pointer-events: none;
}

body.light-theme .delivery-content p {
    color: #9D9D9D;
}

body.light-theme .delivery-content h2 {
    color: #5D5D5D;
}

body.light-theme .delivery-nav-row {
    color: #9D9D9D;
}

    body.light-theme .delivery-nav-row:hover {
        color: #5D5D5D;
    }

    body.light-theme .delivery-nav-row.w--current {
        color: #5D5D5D;
    }

body.light-theme .popular-card.height-medium {
    background-color: #FFACC6;
}

    body.light-theme .popular-card.height-medium.card-color2 {
        background-color: #62001F;
    }

    body.light-theme .popular-card.height-medium.card-3 {
        background-color: #EAEAEE;
    }

body.light-theme .img-arrow {
    color: #CD7893;
}

body.light-theme p.text-card-cat {
    color: #A6A6A6;
}

    body.light-theme p.text-card-cat .light-span {
        color: #CD7893;
    }

body.light-theme .subtitle-tech {
    color: #CD7893;
}

body.light-theme .benefits-title {
    color: #5D5D5D;
}

body.light-theme .benefit-item {
    background-image: linear-gradient(rgba(255,255,255,0.40), rgba(255,255,255,0));
}

body.light-theme .benefit-name {
    color: #A6A6A6;
}

body.light-theme .benefit-text {
    color: #9D9D9D;
}

body.light-theme .wrapper-logo-chain {
    color: #BABABA;
}

body.light-theme .founder-name {
    color: #D9D9D9;
}

body.light-theme .text-card-cat-text2 {
    color: #A6A6A6;
}

body.light-theme .wrapper-item-size:hover {
    color: #A4A4A4 !important;
}

body.light-theme .benefit-item:hover {
    background-image: none;
    background-color: #fff;
}

body.light-theme .wrapper-404 {
    background-color: #EAEAEE;
}

@media (max-width: 479px) {
    body.light-theme a.footer-contact-value.color {
        color: rgba(255, 255, 255, 0.40);
    }

    body.light-theme p.footer-contact-type.color {
        color: rgba(255, 255, 255, 0.20);
    }
}

body.light-theme .cart-floating-btn {
    background-color: #FFFFFF;
}

    body.light-theme .cart-floating-btn:hover {
        background-color: #CD7893; /* твій рожевий */
        color: white; /* текст/іконка */
    }


/* Стандартний стан — кошик видно */
.navbar .cart-open-trigger {
    opacity: 1;
    transition: opacity 0.2s ease;
}
/* Коли бургер у стані w--open → ховаємо кошик */
.navbar:has(.w-nav-button.w--open) .cart-open-trigger {
    opacity: 0;
    pointer-events: none; /* щоб по невидимому лінку не клікалось */
}




