/*
Theme Name: Tea Pro Theme
Template: hello-elementor
Version: 1.0
*/

:root {
  --green-main: #2f5d3a;
}

/* =========================
   GLOBAL BACKGROUND (SAFE)
========================= */

body {
  background:
    linear-gradient(rgba(247,247,242,0.5), rgba(247,247,242,0.5)),
    url('https://tealand.store/wp-content/uploads/2026/04/2026-04-02-19.08.49.jpg') center/cover no-repeat;
  min-height: 100dvh;; /* Фікс білого екрану внизу */
  background-attachment: fixed; /* Фіксуємо фон при скролі */
}

/* НЕ ЧІПАЄМО WooCommerce */
.site,
.site-main {
  background: transparent !important;
}

/* =========================
   BUTTONS
========================= */

.button,
.woocommerce button.button {
  background: var(--green-main) !important;
  color: #fff !important;
  border-radius: 30px;
  padding: 12px 18px;
}

/* =========================
   PRICE
========================= */

.woocommerce * .amount {
  color: #000000 !important;
}

/* =========================
   PRODUCTS GRID (DESKTOP)
========================= */

.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.woocommerce ul.products li.product {
  width: calc(25% - 22.5px);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 15px 15px 65px 15px; /* Фікс перекриття тексту кнопкою */
  transition: all 0.4s ease;
  border: 1px solid rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.woocommerce ul.products li.product img {
  border-radius: 14px;
  transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product h2 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 12px;
  color: #1f2d1f;
}

.woocommerce ul.products li.product .price {
  margin: 8px 0;
  font-size: 15px;
}

/* КНОПКА В КАРТЦІ (DESKTOP) */
.woocommerce ul.products li.product .button {
  position: absolute;
  bottom: -60px;
  left: 15px;
  right: 15px;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 30px;
  text-align: center;
}

.woocommerce ul.products li.product:hover .button {
  bottom: 15px;
  opacity: 1;
}

/* =========================
   CART FIX (DESKTOP)
========================= */

.woocommerce-cart .checkout-button {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* =========================
   MOBILE & TABLET
========================= */

@media (max-width: 768px) {

/* --- 1. Сітка товарів (Коректна математика для 2 колонок) --- */
  .woocommerce ul.products[class] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 15px !important;
  }

  .woocommerce ul.products[class] li.product {
    /* Збільшуємо віднімання до 10px для безпечного запасу на малих екранах */
    width: calc(50% - 10px) !important; 
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    padding-bottom: 15px; 
    float: none !important; /* Вимикаємо старі стилі Woo */
  }

  /* --- 2. Кнопки в картках товарів (Завжди видимі на мобільному) --- */
  .button,
  .woocommerce button.button {
    font-size: 14px;
    padding: 10px 14px;
  }

  .woocommerce ul.products li.product .button {
    position: static;
    opacity: 1;
    margin-top: 15px;
    width: 100%;
    display: block;
  }

  /* --- 3. Фікс сторінки кошика --- */
  
  /* Центрування та запобігання горизонтальному скролу */
  .woocommerce-cart .woocommerce {
    padding: 0 15px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Скидання негативних зміщень таблиці */
  .woocommerce-cart .shop_table,
  .woocommerce-cart .cart-collaterals {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* Адаптація рядків таблиці, щоб вони не ламали ширину екрана */
  .woocommerce-cart table.shop_table_responsive tr {
    display: block;
    margin-bottom: 15px;
  }

  /* Кнопка "Перейти до оформлення" - дозволяємо перенесення довгого тексту */
  .woocommerce-cart .checkout-button {
    width: 100%;
    margin-bottom: 60px;
    white-space: normal !important;
    height: auto;
    line-height: 1.4;
    padding: 15px !important;
  }

}
/* Виправляємо "порожнє місце" перед першим товаром */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* Додатковий фікс для правильного вирівнювання, якщо товарів непарна кількість */
.woocommerce ul.products[class] {
    justify-content: flex-start !important; /* Товари будуть липнути до лівого краю */
}

@media (max-width: 768px) {
    .woocommerce ul.products[class] {
        gap: 15px !important;
    }
    
    .woocommerce ul.products[class] li.product {
        /* Трохи коригуємо відступ, щоб два товари ідеально входили в рядок */
        margin-right: 0 !important; 
        margin-left: 0 !important;
    }
}
/* Оновлений контейнер для кнопки "Повернутися до магазину" */
.return-to-shop-container {
    /* Збільшуємо відступи: 40px зверху, 0 по боках, 30px знизу */
    margin: 40px 0 30px 0 !important; 
    padding: 0 15px; 
    display: block;
    clear: both; /* Гарантує, що кнопка не буде обтікати інші елементи */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Легка лінія знизу для відокремлення */
    padding-bottom: 20px;
}

/* Стиль самої кнопки */
.return-to-shop-btn {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    color: var(--green-main) !important;
    border: 1px solid var(--green-main) !important;
    border-radius: 30px;
    padding: 12px 25px !important; /* Трохи більша кнопка */
    font-size: 15px !important;
    font-weight: 500;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.return-to-shop-btn:hover {
    background: var(--green-main) !important;
    color: #fff !important;
    transform: translateX(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Адаптація для мобільних пристроїв (iPhone 11/12 mini) */
@media (max-width: 768px) {
    .return-to-shop-container {
        margin: 30px 0 20px 0 !important; /* Трохи менші відступи для малих екранів */
        text-align: center; /* Центруємо кнопку на мобільному для зручності */
    }
    
    .return-to-shop-btn {
        width: 100%; /* На мобільному кнопка на всю ширину виглядає краще */
        justify-content: center;
    }
}
/* =========================
   ЕЛЕГАНТНІ ЗАГОЛОВКИ КАТЕГОРІЙ
========================= */

/* Додаємо стилі для самого класу та для h2 всередині (про всяк випадок) */
.shop-category-title, 
.shop-category-title h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important; /* Елегантний шрифт із засічками */
    font-size: 46px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important; /* Глибокий чорний колір */
    text-align: center !important;
    margin: 90px auto 40px auto !important;
    display: block !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important; /* Невеликий відступ для виразності */
    text-transform: none !important;
    position: relative;
    border: none !important;
}

/* Витончена риска під заголовком */
.shop-category-title::after,
.shop-category-title h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 1px; /* Робимо риску дуже тонкою та витонченою */
    background: #1a1a1a;
    margin: 20px auto 0 auto;
    opacity: 0.6;
}

/* Ефект м'якої появи (якщо хочете трохи магії) */
.shop-category-title {
    animation: fadeInTitle 1.5s ease-out;
}

@keyframes fadeInTitle {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================
   МОБІЛЬНА ВЕРСІЯ (iPhone)
========================= */

@media (max-width: 768px) {
    .shop-category-title, 
    .shop-category-title h2 {
        font-size: 32px !important; /* Збільшуємо, щоб було виразно на мобільному */
        margin: 60px auto 30px auto !important;
        letter-spacing: 0.5px !important;
    }
}
/* =========================
   СТИЛЬ КНОПОК-КАТЕГОРІЙ
========================= */

/* Контейнер для центрування */
.shop-nav-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 40px auto 60px auto !important;
    flex-wrap: wrap;
    padding: 10px;
}

/* Самі кнопки (посилання всередині контейнера) */
.shop-nav-container a.wp-block-button__link, 
.shop-nav-container a {
    background: rgba(255, 255, 255, 0.4) !important; /* Напівпрозорий фон */
    backdrop-filter: blur(8px); /* Ефект скла */
    color: #1a1a1a !important; /* Глибокий чорний колір тексту */
    border: 1px solid rgba(26, 26, 26, 0.2) !important; /* Тонка темна рамка */
    padding: 12px 28px !important;
    border-radius: 50px !important; /* Овальна форма */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase; /* Маленькі літери стають великими */
    letter-spacing: 1.5px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Ефект при наведенні */
.shop-nav-container a:hover {
    background: #1a1a1a !important; /* Чорний фон при наведенні */
    color: #ffffff !important; /* Білий текст */
    border-color: #1a1a1a !important;
    transform: translateY(-4px); /* Легке підняття вгору */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Активна кнопка (якщо додасте цей клас для поточної категорії) */
.shop-nav-container a:active {
    transform: scale(0.95);
}

/* =========================
   АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (iPhone)
========================= */

@media (max-width: 768px) {
    .shop-nav-container {
        gap: 10px;
        margin-bottom: 40px !important;
    }
    
    .shop-nav-container a {
        padding: 10px 20px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
        flex: 1 1 auto; /* Кнопки підлаштовуються під ширину екрана */
        text-align: center;
    }
}
/* =========================
   ГОЛОВНІ ЗАГОЛОВКИ ВСІХ СТОРІНОК 
   (Магазин, Кошик, Оформлення замовлення)
========================= */

/* Об'єднуємо селектори для всіх важливих заголовків */
h1.entry-title, 
h1.page-title, 
.woocommerce-cart h1, 
.woocommerce-checkout h1, 
.woocommerce-products-header__title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    margin: 60px auto 30px auto !important; /* Трохи збільшили відступ зверху */
    display: block !important;
    line-height: 1.1 !important;
    letter-spacing: 1.5px !important;
    text-transform: none !important;
    position: relative;
    border: none !important;
}

/* Однакова декоративна лінія для всіх H1 */
h1.entry-title::after, 
h1.page-title::after, 
.woocommerce-cart h1::after, 
.woocommerce-checkout h1::after, 
.woocommerce-products-header__title::after {
    content: "";
    display: block;
    width: 70px;
    height: 1px;
    background: #1a1a1a;
    margin: 25px auto 0 auto;
    opacity: 0.6;
}

/* =========================
   АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ
========================= */

@media (max-width: 768px) {
    h1.entry-title, 
    h1.page-title, 
    .woocommerce-cart h1, 
    .woocommerce-checkout h1 {
        font-size: 34px !important;
        margin: 40px auto 20px auto !important;
    }
}
/* ============================================================
   ФІНАЛЬНИЙ ПРЕМІАЛЬНИЙ КОШИК (Стиль "Пігулка")
   ============================================================ */

.tealand-labeled-cart {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    text-decoration: none !important;
    display: block;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cart-content-wrapper {
    /* Скляний фон, як у кнопок категорій */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 22px;
    border-radius: 50px;
    
    border: 1px solid rgba(26, 26, 26, 0.15) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

/* ТИПОГРАФІЯ "КОШИК" — ОСЬ ТУТ МАГІЯ */
.cart-label {
    color: #1a1a1a !important;
    font-family: "Montserrat", sans-serif !important; /* Або Playfair Display, якщо хочете засічки */
    font-size: 13px !important;
    font-weight: 800 !important; /* Максимальна виразність */
    text-transform: uppercase !important;
    
    /* Екстремальний інтервал для "дорогого" вигляду */
    letter-spacing: 4px !important; 
    
    margin-right: 12px;
    line-height: 1 !important;
    display: inline-block;
    transition: all 0.4s ease;
}

/* КРУЖЕЧОК З ІКОНКОЮ */
.cart-icon-circle {
    width: 42px;
    height: 42px;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.cart-icon-circle svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

/* ЕФЕКТИ ПРИ НАВЕДЕННІ */
.tealand-labeled-cart:hover .cart-content-wrapper {
    background: #1a1a1a !important; /* Інверсія: стає чорним */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.tealand-labeled-cart:hover .cart-label {
    color: #ffffff !important;
    letter-spacing: 5px !important; /* Напис ледь помітно "розширюється" */
}

.tealand-labeled-cart:hover .cart-icon-circle {
    background: #ffffff;
}

.tealand-labeled-cart:hover .cart-icon-circle svg {
    stroke: #1a1a1a;
}

/* АДАПТАЦІЯ ДЛЯ IPHONE */
@media (max-width: 768px) {
    .tealand-labeled-cart {
        bottom: 20px;
        right: 20px;
    }
    
    .cart-content-wrapper {
        padding: 5px 5px 5px 18px;
    }
    
    .cart-label {
        font-size: 11px !important;
        letter-spacing: 2.5px !important; /* Трохи менше для вузьких екранів */
        margin-right: 8px;
    }
    
    .cart-icon-circle {
        width: 38px;
        height: 38px;
    }
}
.cart-label {
    font-family: "Playfair Display", serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-style: italic !important; /* Курсив додає витонченості */
    text-transform: capitalize !important; /* Тільки перша літера велика - це виглядає м'якше */
    letter-spacing: 1px !important;
    color: #1a1a1a !important;
    margin-right: 15px;
    position: relative;
    top: -1px;
}