/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Дочірня тема для Astra
Author: Art in Head
Author URI: https://artinhead.com/
Template: astra
Version: 1.2
*/

/* === 1. ГЛОБАЛЬНІ КОНТЕЙНЕРИ ТА ШРИФТИ === */
body,
form.wpcf7-form,
.cr-review-card,
.cr-review-card * {
  font-family: 'Geometria Medium', 'Geometria', sans-serif !important;
  font-weight: 500 !important;
}

body .ast-page-builder-template .site-content > .ast-container,
body .ast-container,
body .ast-container-fluid {
  max-width: 1280px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ast-narrow-container .site-content > .ast-container {
  max-width: 768px !important;
}

/* Sticky header */
@media (min-width: 1024px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #eeeeee;
  }
}

/* === 2. ПРИХОВУВАННЯ ЕЛЕМЕНТІВ (БЕЗПЕЧНО) === */
.reset_variations,
#ship-to-different-address,
.posted_in,
#lang-comments-link,
.reviewer-verified,
.woocommerce-product-attributes-item--dimensions,
a.ast-select-options-trigger,
.ast-on-card-button {
  display: none !important;
}

/* Колір цін */
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: red;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: black;
}

/* Повідомлення про кольори та Тултіп */
.variation-color-notice {
  margin: 15px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.info-icon {
  color: #999;
  transition: color 0.3s ease;
}
.info-tooltip-wrapper:hover .info-icon {
  color: #333;
}
.tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 100;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition:
    opacity 0.3s,
    visibility 0.3s;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.info-tooltip-wrapper:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* === 5. БЕЙДЖІ BRUSH STROKE (Загальні стилі) === */
body .asnp-esb-badge-2,
body .asnp-esb-badge-4,
body .asnp-esb-badge-5 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin-left: 5px !important;
  margin-top: 2px !important;
  height: 36px !important;
  width: 100px !important;
  line-height: 1 !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  z-index: 2;
}

/* Кольори та зображення */
body .asnp-esb-badge-2 {
  background-image: url('https://artinhead.com/wp-content/uploads/2025/08/brush-stroke-red.png') !important;
  padding: 5px 12px !important;
}

body .asnp-esb-badge-4 {
  position: relative !important;
  background-image: url('https://artinhead.com/wp-content/uploads/2025/08/brush-stroke-green.png') !important;
  padding: 5px 12px 5px 26px !important;
  margin-right: 0 !important; /* Гарантуємо відсутність відступу справа */
  margin-left: 0 !important;
}

body .asnp-esb-badge-4::before {
  content: '' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background: url('https://artinhead.com/wp-content/uploads/2025/10/shipping-fast.svg')
    no-repeat center !important;
  background-size: contain !important;
}

body .asnp-esb-badge-5 {
  background-image: url('https://artinhead.com/wp-content/uploads/2025/11/brush-stroke-black.png') !important;
}

/* Позиціювання контейнера для FREE (№4) */
body .asnp-esb-productBadge-4.asnp-esb-badge-element {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
}

/* === 6. АДАПТИВНІСТЬ (МЕДІА-ЗАПИТИ) === */

@media (max-width: 921px) {
  .site-content > .ast-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 768px) {
  /* Категорії WooCommerce */
  .woocommerce ul.products.columns-3,
  ul.products.columns-3 {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce ul.products.columns-3 li.product-category,
  ul.products.columns-3 li.product-category {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    clear: both;
  }

  /* Адаптація всіх бейджів */
  body .asnp-esb-badge-2,
  body .asnp-esb-badge-4,
  body .asnp-esb-badge-5 {
    width: 80px !important;
    height: 30px !important;
  }

  /* Специфіка для FREE на мобільних */
  body .asnp-esb-badge-4 {
    padding: 3px 6px 3px 20px !important;
  }
  body .asnp-esb-badge-4::before {
    width: 14px;
    height: 14px;
    left: 8px !important;
  }
  body .asnp-esb-badge-4 span {
    font-size: 11px !important;
  }

  /* Тултіп */
  .tooltip-text {
    width: 180px;
    left: auto;
    right: 0;
    transform: none;
  }
  .tooltip-text::after {
    left: auto;
    right: 5px;
  }
}

/* Форма "Купити в один клік" */
.awooc-form-custom-order-qty .quantity.buttons_added a#plus_qty-0,
.awooc-form-custom-order-qty .quantity.buttons_added a#minus_qty-0 {
  display: none;
}

/* Стилізація рядка пошуку – Advanced Woo Search */
/* Зменшення вертикальних відступів */
.header-widget-area p {
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Десктопи */
@media (min-width: 1025px) {
  .header-widget-area .aws-container {
    width: 500px;
  }
}

/* Планшети */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-widget-area .aws-container {
    width: 400px;
  }
}

/* Мобільні */
@media (max-width: 767px) {
  .site-header-below-section-center,
  .header-widget-area,
  .header-widget-area-inner {
    width: 100%;
  }

  .aws-container {
    width: 100% !important;
    box-sizing: border-box;
  }

  .aws-wrapper {
    display: flex;
    width: 100%;
  }

  .aws-search-field {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* =======================================================
   ВАРАЦІЇ (SWATCHES) - КАСТОМІЗАЦІЯ
   ======================================================= */

/* 1. ПРИБИРАЄМО ГАЛОЧКУ (на всіх пристроях) */
.wpcvs-terms .wpcvs-term.wpcvs-selected .wpcvs-term-inner:before {
  display: none !important;
}

/* 2. КОЛІР РАМКИ (на всіх пристроях) */
/* Звичайна рамка */
.wpcvs-terms .wpcvs-term {
  border-color: #dddddd !important;
  border-width: 1px !important;
}

/* Рамка вибраної кульки */
.wpcvs-terms .wpcvs-term.wpcvs-selected {
  border-color: #000 !important;
  outline: 1px solid #000;
}

/* 3. ЗМЕНШЕННЯ КУЛЬОК НА МОБІЛЬНИХ (Медіа-запит) */
@media (max-width: 480px) {
  /* Контейнер самої кульки */
  .wpcvs-terms.wpcvs-type-image .wpcvs-term,
  .wpcvs-terms.wpcvs-type-color .wpcvs-term {
    width: 32px !important; /* Було 42px */
    height: 32px !important; /* Було 42px */
    padding: 2px !important;
  }

  /* Внутрішній блок та зображення */
  .wpcvs-terms.wpcvs-type-image .wpcvs-term .wpcvs-term-inner,
  .wpcvs-terms.wpcvs-type-image .wpcvs-term .wpcvs-term-image,
  .wpcvs-terms.wpcvs-type-color .wpcvs-term .wpcvs-term-inner,
  .wpcvs-terms.wpcvs-type-color .wpcvs-term .wpcvs-term-color {
    width: 100% !important;
    height: 100% !important;
    line-height: 26px !important;
    flex: 0 0 100% !important;
  }

  /* Відступи між кульками, щоб вмістити більше в ряд */
  .wpcvs-terms .wpcvs-term {
    margin: 2px 4px 2px 0 !important;
  }
}