/* ============================================
   FLATSOME — TIFFANY STYLE
   Вставити у: Customizer → Додатковий CSS
   ============================================ */

/* === ШРИФТИ === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&display=swap');

body, p, span, li, td, input, textarea, select {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: #1A1A1A;
  letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product-small .name a {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* === РОЗМІРИ ТЕКСТУ === */
body { font-size: 14px; line-height: 1.7; }

.top-bar, .header-top, .announcement-bar {
  font-size: 11px;
  letter-spacing: 0.14em;
}

#main-nav > ul > li > a,
.main-menu > li > a {
  font-size: 12px;
  letter-spacing: 0.12em;
}

.sub-menu a, .dropdown-menu a {
  font-size: 11px;
  letter-spacing: 0.08em;
}

h1, .page-title { font-size: clamp(28px, 5vw, 52px); }
h2 { font-size: clamp(22px, 3.5vw, 38px); }
h3 { font-size: 18px; }

.woocommerce-loop-product__title,
.product-small .name a { font-size: 13px; letter-spacing: 0.06em; }

.woocommerce ul.products li.product .price { font-size: 13px; }
.woocommerce .product .price { font-size: 18px; }

.woocommerce-product-details__short-description {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

footer, .footer-content { font-size: 12px; letter-spacing: 0.05em; }

/* === ХЕДЕР === */
#header, .header-main {
  background: #FFFFFF !important;
  border-bottom: 0.5px solid #E8E8E8 !important;
  box-shadow: none !important;
}

.top-bar, .header-top, .announcement-bar {
  background-color: #0ABAB5 !important;
  color: #FFFFFF !important;
  text-align: center;
  padding: 8px 0;
}
.top-bar a, .header-top a { color: #FFFFFF !important; }

#main-nav > ul > li > a,
.main-menu > li > a {
  color: #1A1A1A !important;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0 16px;
  transition: color 0.2s;
  position: relative;
}

/* Лінія під пунктом меню при hover — tiffany */
#main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 1px;
  background: #0ABAB5;
  transition: left 0.3s, right 0.3s;
}
#main-nav > ul > li > a:hover::after,
#main-nav > ul > li.current-menu-item > a::after { left: 0; right: 0; }

#main-nav > ul > li > a:hover,
#main-nav > ul > li.current-menu-item > a { color: #1A1A1A !important; }

/* Іконки хедера */
.header-cart-icon, .header-search-icon,
.header-account-icon { color: #1A1A1A !important; }

/* Лічильник кошика — tiffany */
.cart-count, .woocommerce-cart-count {
  background: #0ABAB5 !important;
  color: #FFFFFF !important;
}

/* Sticky хедер */
#header.is-sticky { padding: 6px 0 !important; transition: padding 0.3s; }

/* Dropdown */
.nav-dropdown, .sub-menu {
  border-top: 1.5px solid #0ABAB5 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* === СІТКА ТОВАРІВ === */
.woocommerce ul.products,
.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
}

/* === КАРТКИ ТОВАРІВ === */
.woocommerce ul.products li.product,
.product-small .box {
  background: #F5F5F5 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  position: relative;
}

/* Зображення — portrait 3:4 */
.woocommerce ul.products li.product a img,
.product-small img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05); }

/* Інфо під фото — по центру */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center !important;
  padding: 10px 12px 2px;
}
.woocommerce ul.products li.product .price {
  text-align: center !important;
  display: block;
  padding-bottom: 14px;
}

/* Бейдж NEW — чорно-білий */
.woocommerce span.onsale, .badge-label,
.product-small .badge {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 0.5px solid #1A1A1A !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.12em;
  font-weight: 400 !important;
  padding: 3px 8px !important;
  top: 10px !important;
  left: 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.5 !important;
}

/* Кнопка "Купити" — з'являється при hover */
.woocommerce ul.products li.product .button {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  bottom: 110px;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  z-index: 2;
}
.woocommerce ul.products li.product:hover .button {
  opacity: 1;
  transform: translateY(0);
}

/* === КНОПКИ === */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type="submit"],
.button.primary {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  transition: background 0.25s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: #0ABAB5 !important; }

/* Кнопка на сторінці товару */
.woocommerce .single_add_to_cart_button {
  background: #1A1A1A !important;
  width: 100% !important;
  padding: 16px !important;
}
.woocommerce .single_add_to_cart_button:hover { background: #0ABAB5 !important; }

/* Активний стан кнопки */
.woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(0.97); }

/* === INPUTS === */
input[type="email"], input[type="text"],
input[type="password"], textarea, select {
  border: 0.5px solid #E8E8E8 !important;
  border-radius: 0 !important;
  transition: border-color 0.25s !important;
  font-family: 'Jost', sans-serif !important;
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #0ABAB5 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* === АНІМАЦІЇ === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.woocommerce ul.products li.product {
  animation: fadeInUp 0.5s ease both;
}
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.08s; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.16s; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.12s; }
.woocommerce ul.products li.product:nth-child(5) { animation-delay: 0.20s; }
.woocommerce ul.products li.product:nth-child(6) { animation-delay: 0.28s; }

/* Scroll reveal — клас додається через JS */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Поле пошуку */
.search-field, input[type="search"] {
  transition: border-color 0.3s;
}
.search-field:focus { border-color: #0ABAB5 !important; outline: none; }

/* Зменшуємо анімації для користувачів з обмеженнями */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}