/*
Theme Name: Artistick Child New
Theme URI: https://marinavitkovska.ua
Description: Дочірня тема Artistick для marinavitkovska.ua
Author: Anatolii
Template: artistick
Version: 1
Text Domain: artistick-child
*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
div,
button,
.woocommerce button.button .woocommerce-page button.button,
input[type="submit"],
.widget input[type="submit"] {
  font-family: "Cardo", serif;
}
.fa {
    font-family: 'FontAwesome', sans-serif;
}

/**************** product-category ****************/
.products {
  display: flex;
  flex-wrap: wrap;
}
div.product-block-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 10px !important;
}
.product-block-inner .product-detail-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 15px;
}
.product-block-inner .image-block img {
  display: block;
  height: auto;
  max-width: 100%;
}

woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex !important; /* Увімкнути Flexbox */
  flex-wrap: wrap; /* Дозволяє елементам переноситись на новий рядок */
  /* Можливо, тут є gap для проміжків між елементами, якщо ще немає: */
  /* gap: 20px; */
  margin: 0 -10px; /* Від'ємний margin для компенсації margin: 10px; на product-block-inner */
}
.woocommerce ul.products li .container-inner .product-block-inner,
.woocommerce-page ul.products li .container-inner .product-block-inner {
  display: flex !important;
  flex-direction: column;
  height: 100%;

  padding: 0px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.product-block-inner .product-detail-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Додайте padding, якщо він був у product-block-inner */
  padding: 15px; /* Зазвичай тут додають padding, щоб відступити від бордеру */
  box-sizing: border-box;
}

/* Якщо у вас є короткий опис, який може мати різну висоту, дозвольте йому рости */
/* .product-block-inner .woocommerce-product-details__short-description {
  flex-grow: 1; 
  margin-bottom: auto; 
} */

/* Елемент з ціною та кнопкою "Читати далі" (або "Додати в кошик") */
.product-block-inner .gridlist-buttonwrap,
.product-block-inner .product-block-outer {
  /* Якщо у вас є кілька таких блоків */
  margin-top: auto; /* Відштовхне цей блок до низу .product-detail-wrapper */
}

/* Це потрібно, щоб .product-detail-wrapper був батьківським Flex-контейнером для вирівнювання ціни/кнопки */
.product-block-inner .product-detail-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between; /* Якщо ви хочете, щоб назва була зверху, а кнопки/ціна - знизу */
  /* Важливо: додайте padding, якщо його ще немає, щоб контент не прилипав до бордеру */
  padding: 15px; /* Приклад, відрегулюйте за потребою */
  box-sizing: border-box;
}

/* 1. Забезпечуємо мінімальну висоту для gridlist-buttonwrap */
/* Це контейнер, який містить ціну або порожній, коли ціни немає */
.product-block-inner .gridlist-buttonwrap {
  min-height: 2.5em; /* Приблизно висота одного рядка ціни. Підберіть значення. */
  display: flex; /* Робимо його теж flex-контейнером, щоб вирівняти елементи всередині, якщо вони є */
  align-items: center; /* Вирівнюємо по центру вертикально, якщо там ціна */
  margin-top: auto; /* Відштовхує цей блок до низу .product-detail-wrapper */
}

/* 2. Якщо є блок з описом, дозвольте йому розтягуватися */
/*.product-block-inner .woocommerce-product-details__short-description {*/
/*  flex-grow: 1; */
/*  margin-bottom: 10px;*/
/*}*/

/* 3. Гарантуємо, що кнопка "Додати в кошик" / "Читати далі" також буде вирівняна */
/* Якщо кнопка "Читати далі" знаходиться в .product-block-outer */
.product-block-inner .product-block-outer {
  margin-top: auto; /* Це відштовхне кнопку до низу, незалежно від наявності ціни */
}

/* 4. Забезпечуємо однакову висоту для заголовка, щоб не було зміщення, якщо назва в 1 або 2 рядки */
.product-block-inner .product-name {
  min-height: 3.1em; /* Достатньо місця для 2 рядків тексту. Налаштуйте, якщо потрібно. */
  margin-bottom: 10px; /* Відступ від опису або ціни */
}
.product-block-inner .price {
  min-height: 1.6em;
}

/* 5. Додатково: якщо є кнопки "Додати в кошик" або "Читати далі", забезпечте їм однакову висоту */
.product-block-inner .button {
  min-height: 40px; /* Приклад, відрегулюйте, якщо ваші кнопки мають іншу висоту */
  line-height: 40px; /* Для вертикального вирівнювання тексту */
  padding: 0 15px; /* Забезпечити горизонтальні відступи */
  text-align: center;
  box-sizing: border-box;
}
/**************** end product-category ****************/
/**************** СТОРІНКА ТОВАРУ ****************/
/* --- Зміна форми лупи (zoomLens) на круглу --- */
.zoomLens {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  /* overflow: hidden !important; */
  /* border: none !important; */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important; */
}
/* фон лайтбоксу */
.nfancybox-bg {
  background-color: #f4f4f4 !important;
  opacity: 1 !important;
}
.nfancybox-is-open {
  opacity: 1 !important;
}
/* Відновлюємо видимість основного блоку слайдера продукту */
.images.nickx_product_images_with_video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.xoo-cp-content .xoo-cp-pimg img {
  width: 100px !important;
  height: auto !important;
  max-width: none !important;
}
/**************** КІНЕЦЬ СТОРІНКА ТОВАРУ ****************/
/**************** МОДАЛЬНЕ ВІКНО ****************/
/* Приховуємо кнопку "видалити товар" у модальному вікні кошика */
.xoo-cp-remove {
  display: none !important;
}
/* Стилі для контейнера кнопок у модальному вікні кошика */
.xoo-cp-btns {
  display: flex !important;
  flex-wrap: nowrap !important; /* Жорстко забороняємо перенесення */
  justify-content: center !important; /*якщо space-between занадто сильно розтягує */

  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 0 !important;
}

/* Стилі для самих кнопок у модальному вікні */
.xoo-cp-btns .xcp-btn {
  width: auto !important; /* Скидаємо фіксовану ширину 30% */
  display: block !important; /* Змінюємо на block, щоб flexbox працював краще */
  /* АБО display: inline-flex !important; */

  flex-grow: 0 !important; /* Не розтягувати */
  flex-shrink: 1 !important; /* Дозволити стискатися, якщо місця замало */
  flex-basis: auto !important; /* Базова ширина за вмістом */

  min-width: 100px !important; /* Знімаємо будь-які min-width, щоб дозволити максимальне стиснення */

  text-align: center !important;
  padding: 10px 10px !important; /* Важливий padding. Налаштуйте. */

  white-space: nowrap !important; /* Текст в один рядок */
  overflow: hidden !important; /* Приховуємо, що виходить за межі */
  text-overflow: ellipsis !important; /* Три крапки, якщо обрізається */

  /* Якщо текст "Перейти до кошика" все ще переноситься */
  font-size: 0.89em !important; /* Спробуйте зменшити розмір шрифту */
}

/* Адаптація для мобільних пристроїв*/
@media (max-width: 767px) {
  .xoo-cp-btns {
    flex-direction: column !important; /* Кнопки одна під одною */
    gap: 10px !important;
    flex-wrap: wrap !important; /* Дозволити перенесення на мобільних */
  }
  .xoo-cp-btns .xcp-btn {
    width: 100% !important; /* На мобільних займаємо всю ширину */
    flex-grow: 1 !important; /* Дозволити їм розтягуватися на мобільних */
    white-space: normal !important; /* Дозволяємо тексту переноситись на мобільних */
    min-width: unset !important;
    font-size: unset !important;
    padding: 10px 15px !important;
    text-overflow: clip !important;
  }
}
/**************** Кінець модадьне вікно ****************/

/**************** КОШИК ****************/
/* Розмір мініатюри */
.shop_table.cart .product-thumbnail img {
  width: 90px !important;
  height: auto !important;
  /* max-width: none !important; */
  max-width: 90px;
  max-height: 90px;
  border: 1px solid #f2f3f5;
  padding: 5px;
  margin: 0 20px 0 0;
}
/*Шрифт назви товару*/
td.product-name {
  font-size: 16px !important;
}
/* Приховати заголовок таблиці кошика */
.shop_table.cart thead {
  display: none !important;
}
/* Прибрати всі border з таблиці та її комірок */
.shop_table.cart,
.shop_table.cart th,
.shop_table.cart td {
  border: none !important;
}
/* Прибираємо нижній border з рядка actions (дії, кнопки оновлення/купону) */
.shop_table.cart tr.actions {
  border-bottom: none !important;
}
/* Приховуємо стовпець "Ціна" */
.shop_table.cart .product-price {
  display: none !important;
}
/* Приховуємо напис "Кількість" у полі кількості */
.shop_table.cart .tmpmela-quantity {
  display: none !important;
}

/* Приховуємо блок "Доставка" ТІЛЬКИ у підсумках кошика */
body.woocommerce-cart .woocommerce-shipping-totals.shipping {
  display: none !important;
}

/* Приховуємо блок купону */
.woocommerce-cart-form .coupon {
  display: none !important;
}

/* Приховуємо кнопку "Оновити кошик" */
.woocommerce-cart-form button[name="update_cart"] {
  display: none !important;
}

/* Приховуємо весь блок cart-collaterals поки ми його переробляємо */
/* Можливо, ми його переробимо в іншому місці, або сховаємо і покажемо частину */
.cart-collaterals {
  display: none !important;
}

/* Ховаємо старий блок wc-proceed-to-checkout, бо будемо створювати свій */
.wc-proceed-to-checkout {
  display: none !important;
}

/* Реорганізація нижнього рядка actions */
/* Робимо actions row flex-контейнером для розміщення елементів */
.woocommerce-cart-form .actions {
  display: flex !important;
  justify-content: space-between !important; /* Розміщуємо елементи по краях */
  align-items: center !important; /* Вирівнюємо по центру вертикально */
  flex-wrap: wrap !important; /* Дозволяємо переносити на новий рядок на малих екранах */
  padding: 15px 0 !important; /* Додаємо внутрішні відступи */
  border-top: 1px solid #e0e0e0 !important; /* Додаємо верхній бордер, щоб відмежувати від товарів */
}
/* Стилі для нового контейнера загальної вартості та кнопки */
.cart-summary-bottom {
  display: flex; /* Забезпечуємо flex всередині actions */
  justify-content: space-between; /* Розміщуємо H2 та кнопку по краях */
  align-items: center;
  width: 100%; /* Займає всю ширину батьківського елемента */
  /* Додаткові стилі, якщо потрібно, наприклад, відступи */
}

.cart-summary-bottom .cart-total-title {
  margin: 0 !important;
}
div.cart-summary-bottom-outside {
  padding-right: 40px;
}

.cart-summary-bottom .checkout-button {
  margin: 0 !important; /* Прибираємо стандартні маржини кнопки */
}
.cart-summary-bottom-outside {
  /* Додаємо flex-direction: column, якщо батьківський контейнер display: flex; */
  /* Це змусить дочірні елементи розташовуватися вертикально. */
  display: flex; /* Переконайтеся, що це flex-контейнер */
  flex-direction: column; /* Елементи розташовуються один під одним */
  align-items: flex-end;
  /* Можливо, вам знадобиться adjust width, margin, padding here if they are not full width */
  width: 100%; /* Займає всю доступну ширину */
  box-sizing: border-box; /* Враховує padding і border у ширині */
}
.cart-summary-bottom-outside .cart-total-title {
  /* Заголовок теж має бути блочним елементом */
  display: block; /* Заголовок займає всю ширину */
  text-align: center; /* Вирівнювання тексту в центрі заголовка */
  font-size: 16px;
  box-sizing: border-box; /* Враховує padding і border у ширині */
}

.cart-summary-bottom-outside .checkout-button {
  /* Переконайтеся, що кнопка займає всю ширину або вирівняна */
  display: block; /* Зробить кнопку блочним елементом, займаючи всю ширину */
  text-align: center; /* Вирівнювання тексту в центрі кнопки */
  margin-bottom: 15px; /* Додаємо відступ знизу для кнопки */
  /* width: 100%; */
  box-sizing: border-box; /* Враховує padding і border у ширині */
  /* Можливо, тут є justify-content: space-between, який потрібно переписати */
}

.cart-summary-bottom-outside .checkout-button:hover {
  background-color: #45a049;
}

/* Адаптивність */
@media (max-width: 768px) {
  .cart-summary-bottom-outside {
    flex-direction: column; /* На мобільних - в стовпець */
    align-items: flex-start; /* Вирівняти по лівому краю */
  }

  .cart-summary-bottom-outside .cart-total-title {
    margin-bottom: 10px;
  }
}
/**************** Кінець КОШИК ****************/
/**************** ОФОРМИТИ ЗАМОВЛЕННЯ(checkout) ****************/
/* Media query для мобільних пристроїв */
@media (max-width: 767px) {
  /* Стандартна точка зламу для мобільних */

  /* Загальні стилі для комірок таблиці на мобільних */
  .shop_table.woocommerce-checkout-review-order-table th,
  .shop_table.woocommerce-checkout-review-order-table td {
    padding: 10px 8px; /* Внутрішні відступи комірок */
    vertical-align: top; /* Вирівнювання по верхньому краю */
    border: 1px solid #eee; /* Межі для візуального розділення */
    word-break: break-word; /* Дозволяємо розривати довгі слова */
    text-align: left; /* Вирівнюємо весь текст комірок по лівому краю */
    box-sizing: border-box; /* Важливо: padding включається в загальну ширину */
  }

  /* Вирівнювання для суми товару та загальної суми */
  .shop_table.woocommerce-checkout-review-order-table .product-total,
  .shop_table.woocommerce-checkout-review-order-table tfoot .cart-subtotal td,
  .shop_table.woocommerce-checkout-review-order-table tfoot .order-total td {
    text-align: right; /* Суми по правому краю */
  }

  /* Ховаємо заголовки таблиці на мобільних, якщо вони не потрібні */
  .shop_table.woocommerce-checkout-review-order-table thead {
    /* display: none; */ /* Розкоментуйте, якщо хочете приховати заголовки */
  }

  /* Специфічні стилі для комірки "Доставка" */
  .woocommerce-shipping-totals.shipping td[data-title="Доставка"] {
    padding: 5px 8px !important; /* Трохи менший padding для цієї комірки */
    text-align: left !important; /* ГАРАНТУЄМО вирівнювання вмісту комірки по лівому краю */
  }

  /* Загальні стилі для списків радіо-кнопок (доставка та оплата) */
  .woocommerce-shipping-methods,
  .wc_payment_methods {
    list-style: none; /* Прибираємо маркери */
    margin: 0;
    padding: 0; /* Прибираємо стандартний відступ зліва у ul */
    width: 100%; /* Список займає всю доступну ширину */
    box-sizing: border-box; /* Важливо */
  }

  /* Стилі для LI елементів методів доставки/оплати */
  .woocommerce-shipping-methods li,
  .wc_payment_methods li {
    display: flex; /* Flexbox для контролю розташування */
    flex-direction: column; /* Елементи в колонку: інпут зверху, лейбл знизу */
    align-items: flex-start; /* ВІРІВНЮЄМО інпут та лейбл ПО ЛІВОМУ КРАЮ li */
    margin-bottom: 15px; /* Відступ між кожним методом */
    padding: 0 0 8px 0 !important; /* Перевизначаємо padding li: top, right, bottom (8px), left (0) */
    text-indent: 0 !important; /* СКИДАЄМО text-indent, який зміщував елементи */
    list-style: none !important; /* Переконаємося, що list-style вимкнено */
    border-bottom: 1px solid #eee; /* Роздільник */
    box-sizing: border-box; /* Важливо */
  }

  /* Стилі для інпута радіо-кнопки */
  .woocommerce-shipping-methods input[type="radio"].shipping_method,
  .wc_payment_methods input[type="radio"].input-radio {
    margin-right: 0; /* Прибираємо горизонтальний відступ */
    margin-bottom: 5px; /* Відступ між інпутом та лейблом */
    margin-left: 0; /* Притискаємо інпут до лівого краю li */
    min-width: 18px; /* Фіксований розмір */
    min-height: 18px;
    flex-shrink: 0; /* Забороняємо стискатися */
  }

  /* Стилі для лейбла радіо-кнопки */
  .woocommerce-shipping-methods label,
  .wc_payment_methods label {
    white-space: normal; /* Дозволяємо перенесення тексту */
    word-break: break-word; /* Дозволяємо розривати довгі слова */
    text-align: left; /* ВІРІВНЮЄМО ТЕКСТ ЛЕЙБЛА ПО ЛІВОМУ КРАЮ */
    width: 100%; /* Лейбл займає всю доступну ширину */
    margin-left: 0; /* Притискаємо лейбл до лівого краю li */
    font-size: 0.95em;
    line-height: 1.3;
    box-sizing: border-box; /* Важливо */
  }

  /* Забезпечуємо, що span#wcus-shipping-cost теж буде вирівняний */
  #wcus-shipping-cost {
    display: inline-block;
    width: 100%;
    text-align: left;
  }

  /* Окремий стиль для зображення WayForPay */
  .wc_payment_methods label img {
    display: block; /* Зображення під текстом лейбла */
    margin-top: 5px; /* Відступ від тексту */
    margin-left: 0; /* Притиснути до лівого краю */
    max-width: 80px; /* Обмежити ширину */
    height: auto;
  }

  /* Прибираємо зайві відступи для payment_box, якщо вони є */
  .wc_payment_methods .payment_box {
    padding: 10px 0; /* Внутрішній відступ для опису методу оплати */
    margin-left: 0; /* Прибираємо лівий відступ */
    border-left: none; /* Прибираємо ліву межу */
  }
}
/**************** Кінець ОФОРМИТИ ЗАМОВЛЕННЯ(checkout) ****************/

/* --- Спеціальні стилі для вкладок WooCommerce в правій колонці --- */

/* Основний контейнер вкладок */
.single-product div.summary.entry-summary .woocommerce-tabs.wc-tabs-wrapper {
  /* Переконаємось, що блок займає всю доступну ширину своєї батьківської колонки */
  width: 100%;
  /* Прибираємо будь-яке плавання (float), яке могло б зсувати блок */
  float: none;
  /* Забезпечуємо, що блок починається з нового рядка, очищаючи плаваючі елементи вище */
  clear: both;
  /* Прибираємо зайві зовнішні відступи, якщо вони штовхають блок */
  margin-left: 0;
  margin-right: 0;
  /* Додамо трохи відступу зверху, щоб відокремити від попередніх елементів (наприклад, кнопки "Додати в кошик") */
  margin-top: 30px;
  /* Важливо для правильного розрахунку ширини з внутрішніми відступами */
  box-sizing: border-box;
  /* Додамо рамку для візуального відділення блоку, якщо потрібно */
  border: 1px solid #eee; /* Можеш змінити колір або прибрати */
  border-radius: 5px; /* Трохи заокруглимо кути */
  overflow: hidden; /* Щоб рамка обрізала вміст, якщо він виходить за межі */
}

/* Навігація вкладок (ul.tabs) */
.single-product
  div.summary.entry-summary
  .woocommerce-tabs.wc-tabs-wrapper
  ul.tabs {
  /* Приберемо стандартні відступи та маркування списку */
  list-style: none;
  padding: 0;
  margin: 0;
  /* Візуально відокремимо навігацію від вмісту */
  border-bottom: 1px solid #eee;
  /* Використовуємо flexbox для гнучкого розташування вкладок у рядку */
  display: flex;
  flex-wrap: wrap; /* Дозволимо вкладкам переноситися на новий рядок, якщо їх багато */
  justify-content: flex-start; /* Вирівнюємо вкладки до лівого краю */
  background: #f7f7f7; /* Трохи темніший фон для навігації */
}

/* Окрема вкладка (li) */
.single-product
  div.summary.entry-summary
  .woocommerce-tabs.wc-tabs-wrapper
  ul.tabs
  li {
  /* Налаштуємо відступи та розмір шрифту для кожної вкладки */
  padding: 12px 18px; /* Внутрішні відступи */
  font-size: 0.95em; /* Трохи менший шрифт */
  line-height: 1.2;
  cursor: pointer;
  /* Стилі для неактивних вкладок */
  background: #f7f7f7;
  border: 1px solid #eee;
  border-bottom: none; /* Щоб низ вкладки зливався з рамкою вмісту */
  border-radius: 5px 5px 0 0; /* Заокруглені верхні кути */
  margin-right: 5px; /* Відступ між вкладками */
  position: relative;
  top: 1px; /* Трохи накладається на рамку вмісту для безшовного вигляду */
  transition: background 0.3s ease; /* Плавний перехід при наведенні */
}

/* Стилі для активної вкладки */
.single-product
  div.summary.entry-summary
  .woocommerce-tabs.wc-tabs-wrapper
  ul.tabs
  li.active {
  background: #fff; /* Білий фон для активної вкладки */
  border-bottom-color: #fff; /* Щоб зливалося з вмістом */
  z-index: 2; /* Щоб активна вкладка була поверх інших */
  font-weight: bold; /* Жирний шрифт для активної вкладки */
}

/* Панель з вмістом вкладки (div.panel) */
.single-product
  div.summary.entry-summary
  .woocommerce-tabs.wc-tabs-wrapper
  .panel {
  /* Стилі для блоку з текстом опису/догляду */
  padding: 20px; /* Внутрішні відступи вмісту */
  background: #fff; /* Білий фон */
  border: 1px solid #eee; /* Рамка (якщо вона не додана до батьківського контейнера) */
  border-top: none; /* Щоб не дублювати рамку від вкладок */
  border-radius: 0 0 5px 5px; /* Заокруглені нижні кути */
  /* Переконаємось, що зображення всередині опису є адаптивними */
  max-width: 100%;
  height: auto;
}
.single-product
  div.summary.entry-summary
  .woocommerce-tabs.wc-tabs-wrapper
  .panel
  img {
  max-width: 100%;
  height: auto;
  display: block; /* Уникаємо зайвого простору під зображеннями */
}