/* =========================================================
   БАЗОВА КНОПКА "В ОБРАНЕ"
   ========================================================= 


  /* Основна кнопка "В обране" 
.darbox-wishlist-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0px 0px;
  border-radius: 6px;
  border: 0px solid var(--ast-global-color-0);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  font-size: 14px;
  margin-bottom: 0px;
}


/* Іконка всередині кнопки 
.darbox-wishlist-btn__icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transform: translateY(1px);
}

/* ===== Серце wishlist ===== 
/* SVG серце 
.darbox-wishlist-btn__icon svg{
  width:18px;
  height:18px;
}
/* звичайний стан — тільки контур 
.darbox-wishlist-btn__icon path{
  fill:none;
  stroke:#9ca3af;
  stroke-width:2;
  transition:all .25s ease;
}

/* hover 
.darbox-wishlist-btn:hover path{
  stroke:#ef4444;
 transform:scale(1.05); 
}

/* активний стан — заливка 
.darbox-wishlist-btn.is-active path{
  fill:#e11d48;
  stroke:#e11d48;
}


/* Стан кнопки під час завантаження 
.darbox-wishlist-btn.is-loading{
  opacity: .6;
  pointer-events: none;
}

/* Активний стан кнопки 
.darbox-wishlist-btn.is-active{
  border-color: rgba(0,0,0,.22);
  
}
*/












/* =========================================================
   БАЗА КНОПКИ "В ОБРАНЕ"
   ========================================================= */

.darbox-wishlist-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0;
  margin-bottom: 0;

 /* border: none;
  background: none;

  cursor: pointer;
  text-decoration: none;
  line-height: 1;*/
 
}


/* =========================================================
   ІКОНКА (НЕЗАЛЕЖНА ЛОГІКА)
   ========================================================= */

.darbox-wishlist-btn__icon{
  display: inline-flex;
  width: 18px;
  height: 18px;

  align-items: center;
  justify-content: center;
}

.darbox-wishlist-btn__icon svg{
  width: 100%;
  height: 100%;
}


/* =========================================================
   СТИЛЬ СЕРЦЯ (БАЗОВИЙ СТАН)
   ========================================================= */

.darbox-wishlist-btn__icon svg path{
  fill: none;
  stroke: #9ca3af;
  stroke-width: 2;
  transition: all .2s ease;
}


/* =========================================================
   HOVER (НАВЕДЕННЯ)
   ========================================================= */

.darbox-wishlist-btn:hover .darbox-wishlist-btn__icon svg path{
  stroke: var(--ast-global-color-8);
}


/* =========================================================
   ACTIVE (ДОДАНО В ОБРАНЕ)
   ========================================================= */

.darbox-wishlist-btn.is-active .darbox-wishlist-btn__icon svg path{
  fill: var(--ast-global-color-8);
  stroke: var(--ast-global-color-8);
}


/* =========================================================
   LOADING (ЗАВАНТАЖЕННЯ)
   ========================================================= */

.darbox-wishlist-btn.is-loading{
  opacity: .6;
  pointer-events: none;
}































/* =========================================================
   КАРТКА ТОВАРУ В КАТАЛОЗІ
   ========================================================= */

/* Контейнер картки товару */
.woocommerce ul.products li.product{
  position:relative;
}

/* Кнопка "В обране" поверх картки товару в каталозі */
.woocommerce ul.products li.product .darbox-wishlist-btn{
  position:absolute;
  top:5px;
  right:5px;
  z-index:25;

  width:30px;
  height:30px;
  border-radius:50%;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border:1px solid rgba(0,0,0,.12);
}

/* Ховаємо текст кнопки в каталозі, залишаємо лише іконку */
.woocommerce ul.products li.product .darbox-wishlist-btn__text{
  display:none;
}





















/* ========================================================= 
   СТОРІНКА СПИСКУ ОБРАНОГО / ОСОБИСТИЙ КАБІНЕТ
   ========================================================= */

/* Верхній блок сторінки обраного */
.darbox-wishlist-account__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Додаткова службова інформація (мета) */
.darbox-wishlist-account__meta{
  font-size: 14px;
  opacity: .8;
}

/* =========================================================
   СПИСОК ОБРАНОГО В ОСОБИСТОМУ КАБІНЕТІ
   ========================================================= */

/* Загальний список товарів */
.darbox-wishlist-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =========================================================
   РЯДОК ТОВАРУ (4 КОЛОНКИ)
   ========================================================= */

.darbox-wishlist-row{
  display: grid;
  grid-template-columns: 92px 1fr auto 20px; /* 4 колонки */
  gap: 14px;
  align-items: center;

  padding: 6px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  box-shadow:
        0 2px 10px rgba(0,0,0,.03);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
  
  align-items: stretch;
}

/* hover*/
.darbox-wishlist-row:hover{
 box-shadow:
        0 6px 20px rgba(0,0,0,.06);
}





/* =========================================================
   КОЛОНКА 1: ЗОБРАЖЕННЯ
   ========================================================= */

.darbox-wishlist-row__img img{
  width: 92px;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* =========================================================
   КОЛОНКА 2: ІНФОРМАЦІЯ
   ========================================================= */

.darbox-wishlist-row__title{
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

.darbox-wishlist-row__stock .stock{
  margin: 6px 0 0;
 /* font-size: 13px;
  opacity: .85;*/
}

.darbox-wishlist-row__price{
  margin-top: 8px;
  text-align: left;
}

/* =========================================================
   КОЛОНКА 3: ДІЇ (КОШИК / ОПЦІЇ)
   ========================================================= */

.darbox-wishlist-row__actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

/* =========================================================
   КОЛОНКА 4: ВИДАЛЕННЯ (ХРЕСТИК) — ВИПРАВЛЕНО
   ========================================================= */

.darbox-wishlist-row__remove{
  width: 20px;

  display: flex;
  justify-content: center;   /* горизонтально по центру */
  align-items: flex-start;   /* притискаємо ВГОРУ */

  height: 100%;              /* ❗ важливо: займає всю висоту рядка */
}

/* кнопка хрестика */
.darbox-wishlist-row__remove .darbox-wishlist-btn{
  width: 26px;
  height: 26px;

  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none !important;
  background: transparent;
  box-shadow: none !important;

  margin-top: 0;  /* ❗ прибирає будь-яке зміщення вниз */
}

/* іконка */
.darbox-wishlist-row__remove .darbox-wishlist-btn__icon{
  font-size: 22px;
  line-height: 1;
}




/* приховуємо текст в списку */
.darbox-wishlist-account .darbox-wishlist-btn__text{
  display: none;
}
/* Видалення бордерів навколо хрестика */
.darbox-wishlist-row__remove .darbox-wishlist-btn{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent; /* якщо є фон — прибирає */
}



/* =========================================================
                                  (МОБІЛЬНА) ВЕРСІЯ КАРТКИ ОБРАНОГО НА СТОРІНЦІ АКАУНТА
   ========================================================= */

@media (max-width: 768px){

  /* =========================
     ГОЛОВНА СІТКА: 3 КОЛОНКИ
     ========================= */
  .darbox-wishlist-row{
    display: grid;

    grid-template-columns: 92px 1fr 20px;
    grid-template-rows: auto auto;

    grid-template-areas:
      "img main remove"
      "img actions remove";

    align-items: start;
    column-gap: 10px;
    row-gap: 6px;
  }

  /* =========================
     КОЛОНКА 1: КАРТИНКА
     ========================= */
  .darbox-wishlist-row__img{
    grid-area: img;
  }

  /* =========================
     КОЛОНКА 2: ІНФО (ПРАВА ВЕРХНЯ)
     ========================= */
  .darbox-wishlist-row__main{
    grid-area: main;

    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* =========================
     КОЛОНКА 3 ВЕРХ: ХРЕСТИК
     ========================= */
  .darbox-wishlist-row__remove{
    grid-area: remove;

    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* =========================
     КОЛОНКА 2 НИЗ: КНОПКИ
     ========================= */
  .darbox-wishlist-row__actions{
    grid-area: actions;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  /* кнопка "Додати опції" */
  .darbox-wishlist-open-product{
    flex: 1;
    text-align: center;
    white-space: nowrap;
    
  }

  /* кошик */
  .darbox-cart-icon{
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
  }

  /* хрестик */
  .darbox-wishlist-row__remove .darbox-wishlist-btn{
    margin-top: 0;
  }
}











/* =========================================================
   WISHLIST В ШАПЦІ ASTRA
   Іконка "Обране" + лічильник товарів
   ========================================================= */


/* ---------------------------------------------------------
   КОНТЕЙНЕР ІКОНКИ WISHLIST У ШАПЦІ
   --------------------------------------------------------- */

.darbox-header-wishlist{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}


/* ---------------------------------------------------------
   ОБГОРТКА SVG ІКОНКИ СЕРЦЯ
   --------------------------------------------------------- */

.darbox-header-wishlist__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}


/* ---------------------------------------------------------
   РОЗМІР SVG ІКОНКИ
   --------------------------------------------------------- */

.darbox-header-wishlist__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}


/* ---------------------------------------------------------
   СТИЛЬ КОНТУРУ ІКОНКИ
   --------------------------------------------------------- */

.darbox-header-wishlist__icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: .2s ease;
}


/* ---------------------------------------------------------
   HOVER ЕФЕКТ ДЛЯ ІКОНКИ
   --------------------------------------------------------- */

.darbox-header-wishlist:hover .darbox-header-wishlist__icon path{
  stroke: #e11d48;
}


/* ---------------------------------------------------------
   БЕЙДЖ ЛІЧИЛЬНИКА ОБРАНОГО
   --------------------------------------------------------- 

.darbox-header-wishlist__count{
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: #e11d48;
  color: #fff;
  box-sizing: border-box;
}
*/

/* ---------------------------------------------------------
   ДОДАТКОВИЙ КЛАС ДЛЯ SVG
   (іноді потрібен для точного контролю іконки)
   --------------------------------------------------------- 

.darbox-header-wishlist .darbox-heart{
  display: block;
}
*/

/* ---------------------------------------------------------
   ПІДГОНКА ПО ВЕРТИКАЛІ ДЛЯ ASTRA HEADER BUILDER
   (іноді HTML-блок трохи зміщується)
   --------------------------------------------------------- 

.ast-header-html-2 .darbox-header-wishlist{
  top: 1px;
}
*/