.elementor-9 .elementor-element.elementor-element-fb0abc1{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-1578cba *//* =========================================
   СТИЛІЗАЦІЯ ОСОБИСТОГО КАБІНЕТУ WOOCOMMERCE
========================================= */

/* 1. Вбиваємо стандартні сині посилання */
.woocommerce-account a {
    color: #151515 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
.woocommerce-account a:hover {
    color: #888888 !important;
}

/* 2. Стилізуємо меню (робимо його чистим і сучасним) */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    border: none !important; 
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #eaeaea !important;
}
.woocommerce-MyAccount-navigation li:first-child {
    border-top: 1px solid #eaeaea !important;
}
.woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 15px 10px !important;
    font-family: 'Helvetica', sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888888 !important;
}

/* Ефект наведення та активного пункту меню */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: #151515 !important;
    font-weight: 500 !important;
    padding-left: 20px !important; /* Легкий стильний зсув тексту вправо */
    background: transparent !important;
}

/* 3. Стилізуємо контентну частину (текст привітання) */
.woocommerce-MyAccount-content {
    font-family: 'Helvetica', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #151515 !important;
}

/* Робимо виділення імені (жирний текст) чорним, а не системним */
.woocommerce-MyAccount-content mark {
    background: none !important;
    color: #151515 !important;
    font-weight: 500 !important;
}

/* 4. Стилізація кнопок та повідомлень всередині кабінету */
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
    background: #151515 !important;
    color: #fff !important;
    border-radius: 100px !important; /* Пігулка, як у кошику */
    font-family: 'Helvetica', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    font-size: 13px !important;
    padding: 15px 30px !important;
    text-transform: uppercase !important;
    border: 1px solid #151515 !important;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover {
    background: #2a2a2a !important;
}

/* =========================================
   СТИЛІЗАЦІЯ ФОРМ ВХОДУ ТА РЕЄСТРАЦІЇ
========================================= */

/* Загальний контейнер для форм */
.woocommerce-account .u-columns.col2-set {
    max-width: 800px !important;
    margin: 0 auto !important; /* Центруємо на сторінці */
}

/* Ховаємо великі стандартні заголовки H2 */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
    font-family: 'Helvetica', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
    color: #151515 !important;
}

/* Стилізуємо поля вводу (Input) - тонкі лінії, багато простору */
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="email"] {
    background-color: transparent !important;
    border: 1px solid #eaeaea !important;
    border-radius: 0 !important; /* Гострі кути як у AFED */
    padding: 15px 20px !important;
    font-family: 'Helvetica', sans-serif !important;
    font-size: 14px !important;
    color: #151515 !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
}

/* При наведенні або кліку на поле - чорна рамка */
.woocommerce-account form input[type="text"]:focus,
.woocommerce-account form input[type="password"]:focus,
.woocommerce-account form input[type="email"]:focus {
    border-color: #151515 !important;
    outline: none !important;
}

/* Стилізуємо текст над полями (Лейбли) */
.woocommerce-account form label {
    font-family: 'Helvetica', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
    font-weight: 400 !important;
    margin-bottom: 8px !important;
    display: block !important;
}
.woocommerce-account form label .required {
    color: #cc0000 !important; /* Червона зірочка, як на скріні */
}

/* Стилізуємо кнопку "УВІЙТИ В СИСТЕМУ" / "РЕЄСТРАЦІЯ" */
.woocommerce-account form .woocommerce-Button {
    background-color: #151515 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* Гострі кути */
    padding: 18px !important;
    font-family: 'Helvetica', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    width: 100% !important; /* Кнопка на всю ширину */
    margin-top: 15px !important;
    transition: background-color 0.3s ease !important;
}
.woocommerce-account form .woocommerce-Button:hover {
    background-color: #333333 !important;
}

/* Посилання "Забули пароль?" */
.woocommerce-account .lost_password {
    text-align: right !important;
    margin-top: -45px !important; /* Піднімаємо на рівень чекбоксу */
    margin-bottom: 30px !important;
}
.woocommerce-account .lost_password a {
    font-size: 13px !important;
    color: #888888 !important;
    text-decoration: none !important;
}
.woocommerce-account .lost_password a:hover {
    color: #151515 !important;
}

/* =========================================
   6. ТАБИ (ВКЛАДКИ) ДЛЯ ВХОДУ ТА РЕЄСТРАЦІЇ
========================================= */

/* Контейнер вкладок */
.ultraniche-tabs {
    display: flex !important;
    justify-content: center !important;
    border-bottom: 1px solid #eaeaea !important;
    margin-bottom: 30px !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Самі кнопки-вкладки */
.un-tab {
    background: transparent !important;
    border: none !important;
    padding: 15px 40px !important;
    font-family: 'Helvetica', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: #888888 !important;
    cursor: pointer !important;
    position: relative !important;
    text-transform: uppercase !important;
}

/* Активна вкладка (чорний текст і лінія знизу) */
.un-tab.active {
    color: #151515 !important;
    font-weight: 500 !important;
}
.un-tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #151515 !important;
}

/* Відключаємо стандартну поведінку WooCommerce (дві колонки) */
.woocommerce-account .u-columns.col2-set {
    display: block !important;
    max-width: 500px !important; /* Робимо форму вузькою та акуратною по центру */
    margin: 0 auto !important;
}
.woocommerce-account .u-column1, 
.woocommerce-account .u-column2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* =========================================
   8. ФІКСИ ДЛЯ КАБІНЕТУ: ІНДИКАТОР ПАРОЛЯ ТА ІНФО-ПОВІДОМЛЕННЯ
========================================= */

/* 1. Назавжди ховаємо смужку складності пароля та підказки під нею */
.woocommerce-password-strength,
.woocommerce-password-hint {
    display: none !important;
}

/* 2. Стилізуємо плашки Info (Немає замовлень, Немає завантажень) */
.woocommerce-info {
    background-color: #ffffff !important; 
    color: #151515 !important; 
    border: 1px solid #eaeaea !important; 
    border-top-color: #eaeaea !important; /* Вбиваємо синю смугу від теми Astra */
    border-left: 3px solid #151515 !important; /* Наш фірмовий чорний акцент */
    padding: 15px 25px !important; 
    border-radius: 4px !important;
    font-family: 'Helvetica', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; 
    
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* Щоб на телефоні кнопка і текст не злипалися */
    gap: 15px !important;
    position: relative !important;
}

/* Прибираємо стандартні іконки теми */
.woocommerce-info::before,
.woocommerce-info::after {
    display: none !important;
}

/* Додаємо власну мінімалістичну іконку "i" (інфо) */
.woocommerce-info::before {
    content: "i" !important; 
    font-family: 'Helvetica', sans-serif !important; 
    font-style: italic !important;
    font-weight: 600 !important; 
    position: static !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #151515 !important;
    border-radius: 50% !important; /* Робимо її акуратним кружечком */
    color: #151515 !important; 
    font-size: 12px !important; 
    margin-right: 10px !important; 
    flex-shrink: 0 !important; 
}

/* 3. Кнопка "Перейти до крамниці" всередині повідомлення */
.woocommerce-info .button {
    margin-left: auto !important; /* Відштовхує кнопку в самий правий край */
    background: #151515 !important;
    color: #fff !important;
    border-radius: 100px !important; /* Форма пігулки */
    font-size: 12px !important;
    padding: 12px 24px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.woocommerce-info .button:hover {
    background: #333333 !important;
}/* End custom CSS */