/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0.0
*/


/* #region -------- Шрифт варіативний -------- */

/* Застосувати варіативність до всього шрифту Kyiv */
@font-face {
    font-family: 'Kyiv';
    src: url('https://www.ruzha.com.ua/wp-content/uploads/2025/05/KyivTypeSans-VarGX.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

/* Глобальні налаштування варіативності */
body {
    font-variation-settings: "wght" 626.34, "CONT" 919.24, "MIDL" -1000;
}

/* #endregion */



/* --- WordPress --- */


/* --- Головне меню, ефект підкреслення --- */
/* --- Хедер: пункти меню. Керуємо лінію яка підкреслює пункти меню, для двох положень хедера, сабменю --- */

:root {
  --menu-underline-offset-default: -3px;
  --menu-underline-offset-stuck: 12px;
}

/* ПІДКРЕСЛЕННЯ (глобально на весь сайт) */
.site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck)
#primary-menu > li > a::after {
  bottom: var(--menu-underline-offset-default) !important;
}

.site-main-header-wrap.kadence-sticky-header.item-is-stuck
#primary-menu > li > a::after {
  bottom: var(--menu-underline-offset-stuck) !important;
}



/* САБМЕНЮ — однаково на всіх сторінках */
.site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck)
.header-navigation ul ul.sub-menu {
  top: calc(100% - 0px);
}

.site-main-header-wrap.kadence-sticky-header.item-is-stuck
.header-navigation ul ul.sub-menu {
  top: calc(100% - 15px);
}

.header-navigation ul ul.sub-menu,
.header-navigation ul ul.submenu {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top: none;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  overflow: hidden;
}



/* КОЛІР ХЕДЕРА І МЕНЮ ПРИ СКРОЛІ — по всьому сайту */
.site-main-header-wrap.kadence-sticky-header.item-is-stuck {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}


/* --- Хедер: Кошик, плашка на якій цифри --- */

/* Задній фон для іконки корзини в хедері */
.header-cart-wrap,
.header-cart-wrap .header-cart-button {
    background-color: rgba(155, 155, 155, 0.3); /* напівпрозорий сірий */
    border-radius: 6px;        /* закруглення */
    padding: 6px;              /* простір навколо */
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease; /* Плавність */
}

/* Стиль для значка кількості товарів */
.header-cart-wrap .cart-contents .count {
    background-color: #007bff; /* синій кружечок */
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
}

/* Плавна зміна фону при наведенні */
.header-cart-wrap:hover,
.header-cart-wrap .header-cart-button:hover {
  background-color: rgba(231, 231, 231, 0.4); /* трохи світліше при наведенні */
}

/* Забезпечити, щоб фон не зміщував верстку */
.header-cart-wrap .header-cart-button {
    line-height: 0;
}

/* Налаштування іконки корзини */
.header-cart-wrap svg,
.header-cart-wrap .kadence-svg-icon {
    display: block;
}

/* Кошик. Плашка кількість, прибрати фон залишити лише цифру кількості товарів у кошику */
.header-cart-total {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ТІЛЬКИ для прозорого хедера на головній — біла іконка та цифра */
body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) .header-cart-wrap svg,
body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) .header-cart-wrap .kadence-svg-icon {
  color: white !important;
  fill: white !important;
}

body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) .header-cart-total {
  color: white !important;
}




/* --- Головна сторінка, з прозорим хежером page-id-78 --- */

/* ТІЛЬКИ ДЛЯ ГОЛОВНОЇ СТОРІНКИ — page-id-78 */
.page-id-78 .site-header,
body.page-id-78 .site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck) {
  background-color: transparent !important;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Білі пункти меню (верхній рівень), тільки на головній у прозорому хедері */
body.page-id-78 .site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck)
#primary-menu > li > a {
  color: white !important;
}

/* УСІ SVG-іконки — білі (наприклад, меню, пошук тощо) */
body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) .kadence-svg-icon {
  color: white !important;
  fill: white !important;
}

/* ТІЛЬКИ кошик — темний */
body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) li.menu-item-cart > a .kadence-svg-icon {
  color: #333 !important;
  fill: #333 !important;
}

/* Білий прозорий розділювач — тільки на головній */
body.page-id-78 .kadence-sticky-header:not(.item-is-stuck) .header-divider {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  opacity: 0.6 !important;
}

/* Приховуємо тінь і бордер на старті (головна) */
body.page-id-78 .site-main-header-wrap:not(.item-is-stuck) .site-header-row-container-inner {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Повертаємо тінь і бордер при прилипанні (головна) */
body.page-id-78 .site-main-header-wrap.item-is-stuck .site-header-row-container-inner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}





* WordPress: Логотип SVG  --------

/* 🔒 Початково: показуємо тільки дефолтне лого */
.logo-default {
  display: block;
}
.logo-white {
  display: none;
}

/* 💻 ДЕСКТОП + МОБІЛЬНЕ — на головній, поки хедер прозорий — біле лого */
body.page-id-78 .site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck) .logo-default {
  display: none;
}
body.page-id-78 .site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck) .logo-white {
  display: block;
}

/* 💻 ДЕСКТОП + МОБІЛЬНЕ — коли хедер стиснутий — дефолтне лого */
body.page-id-78 .site-main-header-wrap.kadence-sticky-header.item-is-stuck .logo-default {
  display: block;
}
body.page-id-78 .site-main-header-wrap.kadence-sticky-header.item-is-stuck .logo-white {
  display: none;
}

/* 🎯 Додатково: max-height для всіх варіантів */
.site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck) .logo-default,
.site-main-header-wrap.kadence-sticky-header:not(.item-is-stuck) .logo-white {
  max-height: 65px !important;
  transition: max-height 0.3s ease;
}
.site-main-header-wrap.kadence-sticky-header.item-is-stuck .logo-default,
.site-main-header-wrap.kadence-sticky-header.item-is-stuck .logo-white {
  max-height: 54px !important;
}

/* ✅ МОБІЛЬНА ВЕРСІЯ — логіка повторюється для мобільного хедера */
@media (max-width: 768px) {
  body.page-id-78 .site-header-mobile-navigation .logo-default {
    display: none;
  }
  body.page-id-78 .site-header-mobile-navigation .logo-white {
    display: block;
  }

  /* Якщо хедер стиснутий (sticky), повертаємо дефолтне */
  body.page-id-78 .site-header-mobile-navigation.kadence-sticky-header.item-is-stuck .logo-default {
    display: block;
  }
  body.page-id-78 .site-header-mobile-navigation.kadence-sticky-header.item-is-stuck .logo-white {
    display: none;
  }

  .site-header-mobile-navigation .logo-default,
  .site-header-mobile-navigation .logo-white {
    max-height: 40px !important;
  }
}


@media (max-width: 1024px) {
  /* Прибрати зайвий відступ */
  .site-header-upper-inner-wrap,
  .site-main-header-inner-wrap,
  #mobile-header .site-main-header-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Зменшити висоту основного мобільного хедера */
  #mobile-header .site-header-inner-wrap {
    padding: 0 !important;
    min-height: 60px !important;
    height: auto !important;
  }

  /* Зменшення розміру логотипа */
  #mobile-header .custom-logo-wrapper img {
    max-height: 45px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Вирівнювання по вертикалі */
  #mobile-header .site-header-main-section-left,
  #mobile-header .site-header-main-section-right {
    display: flex;
    align-items: center;
  }

  /* Видалення зайвих <br> всередині HTML логотипа */
  .mobile-html-inner br {
    display: none;
  }

  /* Можлива додаткова мінімізація */
  .site-header-upper-wrap {
    height: auto !important;
  }
}


/* Ландшафтний режим мобільних пристроїв */
@media (max-width: 768px) and (orientation: landscape) {
  /* Фіксуємо висоту хедера */
  #mobile-header .site-header-inner-wrap {
    min-height: 60px !important;
    max-height: 60px !important;
    height: 60px !important;
  }
  
  /* Фіксуємо розмір логотипу */
  #mobile-header .custom-logo-wrapper img {
    max-height: 40px !important;
    width: auto !important;
  }
  
  /* Центруємо вміст хедера */
  #mobile-header .site-header-main-section-left,
  #mobile-header .site-header-main-section-right {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Приховуємо зайві елементи */
  .site-header-upper-wrap {
    display: none !important;
  }
  
  /* Фікс для кнопки меню */
  #mobile-header .mobile-toggle-open-container .menu-toggle {
    padding: 0 15px !important;
  }
}


@media (max-width: 768px) and (orientation: landscape) {
  #mobile-header {
    position: relative !important;
    overflow: hidden !important;
  }
}





/* WordPress: Головна сторінка HERO блок з відео -------- */

/* --- Фон для секції з відео на головній сторінці до його завантаження --- */
.elementor-element-7547cfd6 {
  background-color: #313131 !important; /* темний фон */
  background-image: none !important;
}



/* --- WordPress Blog */

body.page-id-528 {
  background-color: #F7FAFC; /* 🔧 Колір фону під патерном */
  background-image: url('https://www.ruzha.com.ua/wp-content/uploads/2025/06/pattern_002.png'); /* Лінк до вашого патерну */
  background-repeat: repeat; /* ⬅️ Це головне: повторення */
  background-size: auto; /* Або 'contain', якщо треба масштабу */
  background-position: top left;
}


/* Прибераемо тінь у контент блока поста */
.entry.single-entry,
.entry {
    box-shadow: none !important;
    border-radius: 3px !important;
}

/* Відступ під основним заголовком та метаданими */
.entry-header.post-title {
	padding-top: 50px;
	padding-bottom: 50px;
}

@media (max-width: 768px) {
  .entry-header.post-title {
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Відступ під заголовком Схожі записи */
h2.entry-related-title {
  margin-bottom: 50px !important;
}


/* Фон блоку Схожі записи */
.entry-related {
background: #F2F2F2 !important;
}


/* Схожі записи. Відступ навколо контенту в мобільному */
@media (max-width: 768px) {
  .related-posts .entry-header,
  .loop-entry .entry-header {
    padding: 20px;
  }
}


/* Встановлюємоо висоту хедера для Блог поста в мобільному.*/
@media (max-width: 768px) {
  .wp-site-blocks .post-thumbnail.kadence-thumbnail-ratio-1-2 {
    height: 300px;
  }
}

/* Блог - Прибрати стрілки у каруселі схожих постів */
.entry-related-carousel .splide__arrows {
    display: none !important;
}


/* --- WooCommerce --- */


/* --- Select2 (випадаючі списки WooCommerce): Задаємо однакову висоту --- */
.select2-container .select2-selection--single {
  height: 45px !important; /* Висота селекта */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 45px !important; /* Вирівнювання тексту */
  padding-left: 10px; /* Відступ зліва */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 45px !important; /* Висота стрілки */
}


/* --- WooCommerce: Приховати повідомлення "Товар додано до кошика" на сторінці товару --- */
.woocommerce-message {
  display: none !important;
}


/* Приховати повідомлення "Товар додано до кошика" тільки на сторінці товару, і тільки на смартфонах */
@media (max-width: 767px) {
    body.single-product .woocommerce-message {
        display: none !important;
    }
}


/* Приховуємо блок "Доставка від Морква" з усім шо всередені */
body.woocommerce-cart .woocommerce-shipping-totals.shipping,
body.woocommerce-cart .woocommerce-shipping-methods {
    display: none !important;
}


/* Додатковий фікс для відступів */
main#main.site-main {
  margin-top: 0 !important;
    }
}



/* --- WooCommerce: Cart - Кошик --- */

/* --- WooCommerce: Повністю прибрати секцію доставки у підсумках кошика --- */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals,
.woocommerce-cart .cart_totals .shipping {
  display: none !important;
}


/* --- WooCommerce Cart: Клас для примусового показу після перевірки, якщо є знижки відображається загалом, по дефолту ні ---*/
.cart_totals .order-total.show-order-total {
  display: table-row !important;
}

/* --- WooCommerce: Сховати рядок "Загалом" у підсумках кошика --- 
.cart_totals .order-total {
  display: none !important;
}
*/


/* --- WooCommerce Cart: Вирівняти ціну в колонці "Ціна"*/
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form .product-subtotal {
    white-space: nowrap;
    vertical-align: middle;
}


/* --- WooCommerce Cart: Вирівняти праву колонку ("Підсумки кошика") — ціни по правому краю*/
.cart_totals table td:last-child {
    text-align: right;
}


/* --- WooCommerce Cart: Cart Page — Заголовок блоку підсумків */
body.woocommerce-cart .cart_totals > h2,
body.woocommerce-cart .cart-summary > h2 {
  margin-top: 10px !important;
  margin-bottom: 50px !important;
}


/* --- WooCommerce Cart: Cart Page — порожній кошиш відступ зверху контенту */
.woocommerce .cart-empty.woocommerce-info {
  margin-top: 30px !important; /* або 0, якщо взагалі не треба */
  margin-bottom: 30px !important; /* або 0, якщо взагалі не треба */
}


/* --- WooCommerce Cart: Cart Page — Розширюємо стовпець із назвами товарів у кошику */
/* Спільні стилі — працюють на всіх пристроях */
.woocommerce-cart .cart-collaterals .cart_totals table td {
  white-space: nowrap !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr {
  vertical-align: middle;
}

/* Мобільні пристрої: до 768px */
@media (max-width: 768px) {
  .woocommerce-cart .cart-collaterals .cart_totals table th {
    padding-right: 10px !important;
    width: auto !important; /* Щоб не ламалося на малих екранах */
    white-space: normal !important;
  }

  .woocommerce-cart .cart-collaterals .cart_totals table td {
    width: auto !important; /* Дати можливість адаптуватися */
  }
}

/* Десктоп: від 769px і ширше */
@media (min-width: 769px) {
  .woocommerce-cart .cart-collaterals .cart_totals table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .woocommerce-cart .cart-collaterals .cart_totals table th {
    width: 70% !important;
    white-space: normal !important;
    padding-right: 10px !important; /* Можна залишити */
  }

  .woocommerce-cart .cart-collaterals .cart_totals table td {
    width: 30% !important;
  }
}



/* --- WooCommerce Cart: Cart Page — збільшили мініатюру товару до 100пх в мобільному */
@media (max-width: 768px) {
  .woocommerce-cart table.cart img,
  .woocommerce-checkout table.cart img,
  #add_payment_method table.cart img {
    width: 100px !important;
    height: auto !important;
  }
}








/* --- WooCommerce MyAccount*/

/* --- WooCommerce MyAccount-content: примусово відображає блок з накопичувальною знижкою */
.woocommerce-MyAccount-content .woocommerce-message {
    display: block !important;
    background-color: #e0f7e9; /* мʼякий зелений фон */
    border: 1px solid #25a55f;
    margin-top: 20px;
    padding: 15px;
    font-size: 16px;
}

.woocommerce-MyAccount-content .woocommerce-message h3 {
    margin-top: 0;
    color: #1d7a45;
}


/* --- WooCommerce поле пасворд з іконкою око */
.woocommerce form .woocommerce-password-strength + .woocommerce-password-input,
.woocommerce form .woocommerce-password-input {
  position: relative;
}

.woocommerce form .woocommerce-password-input input[type="password"],
.woocommerce form .woocommerce-password-input input[type="text"] {
  padding-right: 3rem !important; /* Додатковий простір для іконки */
  box-sizing: border-box;
}

.woocommerce form .woocommerce-password-input .show-password-input {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}


header.entry-header.page-title {
    margin-bottom: 0 !important;
}








/* --- WooCommerce Checkout */


/* --- WooCommerce Checkout: Доставка Морква - Основні стилі - робимо блок доставки з ліва - скріптом */
#custom-shipping-block {
    width: 100%;
    clear: both;
    cursor: pointer; /* Дублюємо для надійності */
}

#custom-shipping-block .woocommerce-shipping-methods {
    padding-left: 0;
    margin: 0;
}

#custom-shipping-block .woocommerce-shipping-methods li {
    cursor: pointer; /* Дублюємо для надійності */
}

#custom-shipping-block .woocommerce-shipping-methods li:hover {
    background: #f5f5f5 !important;
}

/* Стилі для активного пункту */
#custom-shipping-block .woocommerce-shipping-methods li.active-shipping-item {
    background: #f0f7ff !important;
    border-color: #b8d6ff !important;
    box-shadow: 0 0 0 1px #b8d6ff !important;
}

/* Приховуємо оригінальні елементи */
#order_review .woocommerce-shipping-methods {
    display: none !important;
}

/* Додаткові поля */
#order_review .mrkv_ua_shipping_checkout_fields {
    display: block !important;
    margin-top: 15px;
}


/* --- WooCommerce Checkout: Checkout Page — кнопка "Повернтись в кошик" */
a.button.wc-backward {
    background: #ffffff;
    color: #333;
    padding: 10px 20px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    box-shadow: none;
    text-decoration: none;
}

a.button.wc-backward:hover {
    background: #f0f7ff;
    border-color: #b8d6ff;
    box-shadow: 0 0 0 1px #b8d6ff;
    color: #000;
}

.checkout-back-to-cart hr {
    border: none;
    border-top: 1px solid #e0e0e0;
}



/* --- WooCommerce Checkout: Checkout Page — Заголовок секції "Платіжні дані" */
body.woocommerce-checkout .woocommerce-billing-fields > h3 {
  margin-top: 20px !important;
  margin-bottom: 30px !important;
}

.woocommerce table.shop_table {
  font-size: 16px !important;
}


/* --- WooCommerce Checkout:  Checkout Page — Заголовок "Ваше замовлення" */
body.woocommerce-checkout #order_review_heading {
  margin-top: 20px !important;
  margin-bottom: 30px !important;
}


/* --- WooCommerce Checkout: ховаємо рядки в полі Ваше замовлення*/
/* 🔒 Приховати "Проміжний підсумок" */
.woocommerce-checkout-review-order-table .cart-subtotal {
    display: none !important;
}

/* 🔒 Приховати "Доставка" */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals {
    display: none !important;
}


/* --- WooCommerce Checkout: Зміна кольору плейсхолдера (якщо використовується) */
#order_comments::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}



/* --- WooCommerce Checkout: Скидаємо стандартні стилі WooCommerce для полів Прізвище і Імя  */
#billing_first_name_field, 
#billing_last_name_field {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-right: 0 !important;
}

/* Опціонально: робимо інпути повноширинними Прізвище і Імя*/
#billing_first_name, 
#billing_last_name {
    width: 100% !important;
    box-sizing: border-box;
}



/* Приховуємо всі hidden-поля Morkva UA */
.woocommerce-checkout .form-row input[type="hidden"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Не підтримується у Safari, але добре прибирає всю обгортку */
.woocommerce-checkout p.form-row:has(> span > input.input-hidden) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Вирівнює селектори міста/відділення */
.select2-container {
    margin-bottom: 0.5em !important;
}



/* --- WooCommerce Archive Page Заголовок і лінія */
.archive.woocommerce .page-title.archive-title::after {
	content: "";
	display: block;
	width: 350px;
	height: 1px;
	background-color: #c0c0c0; /* Колір лінії */
	margin: 20px 0 0 0;
}

.archive-description {
    max-width: 50%;
    margin: 0 0 0 60px auto; /* зверху 0, знизу 60px, по центру */
    text-align: left;
}



/* --- WooCommerce Archive Page Головна, текст на сторінці */
.custom-shop-text {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 0px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .custom-shop-text {
        width: 75%;
    }
}

@media (min-width: 1024px) {
    .custom-shop-text {
        width: 60%;
    }
}



/* --- WooCommerce Offside mini-cart */

/* Offside mini-cart: Зміна шрифту для заголовка "Огляд кошика" міні-кошика */
.side-cart-header,
.side-cart-header h2 {
    font-family: 'Fixel', sans-serif !important;
    font-weight: 500 !important; /* Напівжирний (за потреби) */
    letter-spacing: normal !important;
}


.woocommerce-mini-cart__buttons .button.wc-forward:first-child {
    display: inline-block !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    background: #fff !important;
}


/* Текст під "Разом" у міні-карті */
.woocommerce-mini-cart__total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
}

.woocommerce-mini-cart__total:after {
    content: "Знижки якщо вони є, порахуємо вже у кошику.";
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: normal;
    color: #777;
    padding-top: 25px;
    padding-bottom: 10px;
    order: 2; /* Переміщує під основний блок */
    text-align: center; /* Ось це центрує текст */
}



/* --- WooCommerce WooCommerce Product Page --- */

/* Кнопка "Переглянути кошик" */
@media (max-width: 767px) {
    /* Стилі ТІЛЬКИ для "Переглянути кошик" */
    a.added_to_cart.wc-forward {
        display: block !important;
        width: 100% !important;
        margin-top: 3px !important;
        text-align: center !important;
        padding: 8px !important;
        background: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
        border-radius: 2px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* Фікс для контейнера повідомлення */
    .woocommerce-message {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

@media (max-width: 767px) {
    form.cart .single_add_to_cart_button {
        border: 1px solid var(--btn-border-color) !important;
        margin-bottom: 12px !important;
    }
    
    a.added_to_cart.wc-forward {
        border: 2px solid var(--btn-border-color) !important;
        background: #f8f8f8 !important;
        margin-top: 12px !important;
        display: block !important;
        clear: both !important;
        width: calc(100% - 30px) !important;
        padding: 10px 12px !important;
        position: relative !important;
        z-index: 10 !important;
    }
}


/* Відствнь зверху зірок рейтинга */
.woocommerce-product-rating {
  margin-top: 10px;
}


/* Заголовок товару, лайнжейдж відставнь */
@media (max-width: 1024px) {
  .woocommerce div.product .product_title {
    line-height: 1.2 !important;
    }
}

/* --- WooCommerce Product Page, стиль модального вікна для входу на сайт де коменти --- */

/* Приховане модальне вікно */
.login-modal.hidden {
	display: none !important;
}

/* Модальне затемнення  */
.login-modal {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* напівпрозорий фон */
	display: flex; /* Для центрування */
	align-items: center; /* Центрування по вертикалі */
	justify-content: center; /* Центрування по горизонталі */
}

/* Контейнер модального вікна */
.login-modal-content {
	background: #ffffff;
	padding: 40px 30px;
	border-radius: 12px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	position: relative !important;
	font-family: "Open Sans", sans-serif;
}

/* Кнопка закриття (хрестик)  */
.login-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	transition: color 0.3s ease;
}

.login-modal-close:hover {
	color: #000;
}

/* Заголовок модального вікна */
.login-modal-content h2 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 25px;
	text-align: center;
	color: #333;
}

/* Поля вводу: логін, пароль */
#ajax-login-form input[type="text"],
#ajax-login-form input[type="password"] {
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 18px;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	font-size: 15px;
	background-color: #fafafa;
	box-sizing: border-box;
	transition: border 0.3s ease, background 0.3s ease;
}

#ajax-login-form input[type="text"]:focus,
#ajax-login-form input[type="password"]:focus {
	outline: none;
	border-color: #004aad;
	background-color: #fff;
}

/* Чекбокс "Запам’ятати мене" */
#ajax-login-form label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #555;
}

/* Кнопка входу */
#ajax-login-form input[type="submit"] {
	width: 100%;
	background-color: #004aad;
	color: #fff;
	padding: 14px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

#ajax-login-form input[type="submit"]:hover {
	background-color: #00327e;
}

/* Повідомлення про помилку/успіх */
.login-error {
	text-align: center;
	font-size: 14px;
	margin-top: -10px;
	color: red;
	min-height: 20px;
}

/* Посилання на реєстрацію */
#ajax-login-form p {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
}

#ajax-login-form a {
	color: #004aad;
	text-decoration: underline;
	transition: color 0.2s ease;
}

#ajax-login-form a:hover {
	color: #002f6d;
}


#ajax-login-form input[type="submit"]:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}


/* --- WooCommerce Product Page, блок «Супутні товари» (тобто над related products)  --- */


/* Додаємо лінію над блоком «Супутні товари» */
.related.products {
    border-top: 1px solid #ccc;
    padding-top: 30px;
    margin-top: 50px;
}

/* Додаємо відступ вниз від заголовка «Супутні товари» */
.related.products h2 {
	display: block;
	padding-bottom: 30px;
}




/* --- WooCommerce Archive Page Стилі для селектора --- */
.woocommerce-ordering select {
    font-size: 14px !important;
    font-family: 'Fixel', sans-serif !important;
    font-weight: normal !important; /* Фікс для Firefox */
    color: #333 !important;
    background-color: #f8f8f8 !important;
    padding: 8px 30px 8px 12px !important;
    border: 1px solid #ddd !important; /* Додано явну рамку */
    border-radius: 2px !important; /* Повне видалення закруглень */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    cursor: pointer !important;
}


/* Випадаюча плашка (для Firefox/IE) */
.woocommerce-ordering select option {
    font-size: 14px !important;
    font-weight: normal !important; /* Фікс напівжирного тексту */
    padding: 8px !important;
    background: #fff !important;
    border-radius: 0 !important;
}

/* Фікс для Firefox (вплив user-agent стилів) */
@-moz-document url-prefix() {
    .woocommerce-ordering select {
        font-weight: 400 !important;
        text-indent: 0.01px; /* Фікс відступів */
        text-overflow: ''; /* Фікс тексту */
    }
}

/* Стилі при фокусі */
.woocommerce-ordering select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

/* Мобільні пристрої */
@media (max-width: 768px) {
    .woocommerce-ordering select { /* Стилі для селектора */
        font-size: 12px !important;
        padding: 6px 25px 6px 8px !important;
    }
}

@media (max-width: 768px) {
    .archive.woocommerce .page-title.archive-title::after {
        width: 250px; !important;
        
    }
}

@media (max-width: 768px) {
    .archive-description {
        max-width: 100%;
        
    }
}



/* --- WooCommerce Archive Page Стилі для блоків товарів --- */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    border: 1px solid #ececec !important; /* Сіра рамка */
    border-radius: 2px !important; /* Без закруглень */
    padding: 1px !important; /* Відступи всередині */
    background: #fff !important; /* Білий фон */
    box-shadow: none !important; /* Видаляємо тіні (якщо є) */
    transition: all 0.3s ease !important; /* Плавні ефекти */
}

/* Фікс для зображень товарів */
.woocommerce ul.products li.product a img {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    border-radius: 2px 2px 0 0 !important; /* Без закруглень */
}



/* --- WooCommerce Register. Блок регистраціх */


/* Забираємо рамку і фон із стандартного WooCommerce login */
.woocommerce form.login {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Робимо поле логіну і реєстрації однаковими */
.login-register-wrapper input[type="text"],
.login-register-wrapper input[type="email"],
.login-register-wrapper input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* Стилі кнопок однакові */
.login-register-wrapper button,
.login-register-wrapper input[type="submit"] {
    background-color: #21759b;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.login-register-wrapper button:hover,
.login-register-wrapper input[type="submit"]:hover {
    background-color: #1a5d7c;
}

/* Стилі заголовків */
.login-register-wrapper h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
}

/* Вирівнювання блоків */
.login-register-wrapper .login-box,
.login-register-wrapper .register-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Головний контейнер */
.login-register-wrapper {
    display: flex;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 60px !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 1400px;
    margin: 30px;
    box-sizing: border-box;
}

/* Колонки входу та реєстрації */
.login-box,
.register-box {
    flex: 1 1 300px;
    min-width: 300px;
}

/* Розділювач */
.divider {
    background: #ddd;
    flex-shrink: 0;
}


/* Розділювач */
body.woocommerce-account .entry-content-wrap {
  padding: 0 !important;
}


/* Десктоп — вертикальна лінія */
@media (min-width: 768px) {
    .divider {
        width: 1px;
        height: auto;
        min-height: 300px;
        align-self: stretch;
        margin: 0 20px;
    }
}

/* Мобільна версія — горизонтальна лінія */
@media (max-width: 767px) {
    .divider {
        width: 100%;
        height: 1px;
        margin: 20px 0;
    }
    .login-register-wrapper {
        gap: 30px; /* відставнь між меню і контентом */
        padding: 20px !important;
        margin: 0px;
}
}

@media (max-width: 767px) {
  .entry-content-wrap {
    padding: 1px !important; /* або padding: 10px, якщо потрібен мінімальний */
  }
}


/* Мобільна версія — відступи навколо контенту */
@media (max-width: 767px) {
  body.woocommerce-checkout .entry-content-wrap,
  body.woocommerce-cart .entry-content-wrap {
    padding-left: 1rem !important; 
    padding-right: 1rem !important; 
    padding-top: 1rem !important; 
    padding-bottom: 1.8rem !important; 
  }
}


/* Прибераємо відступи всередині блоку реєстрації, над алертами які з'явлються */
    .single-content {
        margin: 0 !important;
    }



/* --- WooCommerce MyAccount.  */


/* Мобільна версія — меню в MyAccount */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important; /* дозволяє переноситись */
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    margin: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex: 1 1 auto;
    margin: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    text-align: center;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-weight: 600;
    transition: all 0.2s ease;
    color: #333;
  }

  /* активна кнопка — такі ж стилі як на десктопі */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: #f0f7ff !important;
    border-color: #b8d6ff !important;
    box-shadow: 0 0 0 1px #b8d6ff !important;
    color: #333 !important;
  }

  /* ховер як на десктопі */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: #f0f7ff;
    border-color: #b8d6ff;
    box-shadow: 0 0 0 1px #b8d6ff;
    color: #333;
  }
}



/* Мобільна версія — MyAccount - таблиця замовлення */

@media (max-width: 768px) {

  /* основний контейнер */
  body.woocommerce-account .woocommerce-orders-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }

  body.woocommerce-account .woocommerce-orders-table thead {
    display: none !important;
  }

  body.woocommerce-account .woocommerce-orders-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  body.woocommerce-account .woocommerce-orders-table tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 15px 15px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
    text-align: left !important;
  }

  /* прибираємо службові псевдоелементи kadence */
  body.woocommerce-account .woocommerce-orders-table td::before {
    display: none !important;
  }

  /* базові стилі комірок */
  body.woocommerce-account .woocommerce-orders-table td,
  body.woocommerce-account .woocommerce-orders-table th {
    display: block !important;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Стилізація заголовку з номером замовлення */
  body.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number {
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
    color: #2f74c0 !important;
  }

  body.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number a {
    text-decoration: none !important;
    color: #2f74c0 !important;
  }

  body.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number a:hover {
    text-decoration: underline !important;
  }

  /* Стилізація дати — під номером */
  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date {
    margin-top: -4px !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    color: #666 !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date time::before {
    content: "від ";
  }

  /* дата */
  body.woocommerce-account .woocommerce-orders-table td.order-date {
    display: inline-block !important;
    width: auto !important;
    margin-right: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
  }

  /* статус замовлення — жирний, яскравий */
  body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
    display: inline-block !important;
    width: auto !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  /* “Загалом” нижче */
  body.woocommerce-account .woocommerce-orders-table td.order-total {
    display: block !important;
    margin-top: 8px !important;
    font-weight: 700 !important;
  }

  /* кнопка без “Дії” */
  body.woocommerce-account .woocommerce-orders-table td.order-actions::before {
    display: none !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.order-actions {
    margin-top: 15px !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.order-actions .button {
    display: block !important;
    width: 100% !important;
    background: #2f74c0 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
  }

  body.woocommerce-account .woocommerce-orders-table td.order-actions .button:hover {
    background: #1d5da5 !important;
  }
}






/* Перезаписуємо Вукомерс стилиі під себе */
/* Робимо аліджн текста в ліво */
@media screen and (max-width: 719px) {
  body.woocommerce-account table.shop_table_responsive tr td,
  body.woocommerce-account.woocommerce-page table.shop_table_responsive tr td {
    text-align: left !important;
  }
}

/* Прибераєсо сірий фон через одне замовлення */
@media screen and (max-width: 719px) {
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important;
  }
}


/*Робимо кнопки в меню без жирного бордера з однієї сторони */
@media screen and (max-width: 767px) {
  .woocommerce-account .account-navigation-wrap li.is-active > a {
    border-left: none !important;
    font-weight: normal !important;
  }
}









/* --- WordPress - Футер */



/* Відштовхуючий блок над списком лінків, плаваючий розмір */
/* ховаємо блок на всіх, крім великих десктопів */
#block-12 {
    display: none !important;
}

/* показуємо тільки на десктопах від 1280px */
@media (min-width: 1280px) {
  #block-12 {
    display: block !important;
  }
}




/* Приховуємо маркери списку на планшетах і мобільних */
/* За замовчуванням (мобільні) — без точок */
#block-8 .wp-block-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Тільки з 1025px і більше — з точками */
@media screen and (min-width: 1025px) {
    #block-8 .wp-block-list {
        list-style: disc !important;
        padding-left: 20px !important;
    }
}








/* --- Переробляємо блок "Додати відгук" */

/* Рамка яка обготає блок коменіт у мобільному */
.woocommerce div.product .woocommerce-tabs {
    border: none !important;
}


/* --- Блок привью товару в мобільному, додали відступи*/
@media (max-width: 768px) {
.woocommerce ul.products li.product .entry-content-wrap {
    margin: 1em !important;
    }
}




/* --- Pages. Міняємо фото на сторінці Ружа. */
@media (max-width: 767px) {
  .elementor-element-b52a7b2 img {
    content: url("https://www.ruzha.com.ua/wp-content/uploads/2025/10/jb_ruzha_mobile.jpg");
  }
}