/* =========================================================
   КАРТКА ТОВАРУ 
   ========================================================= */

/* === Кнопка Детальніше ==== */
li.product .astra-shop-summary-wrap .button {
  background: var(--ast-global-color-5) !important;
  color: var(--ast-global-color-3) !important;
  border: 1px solid var(--ast-global-color-7) !important;
  padding: 6px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all .18s ease;
 
  
}
.darbox-options-wrap{
    margin-top: -8px;
}

.astra-shop-summary-wrap{
    margin-bottom: 0;
}


/* === Центрує кнопку ====*/ 
li.product .astra-shop-summary-wrap .button{
  display: block;
  width: fit-content;
  margin: 0px auto 0 !important;
}

/* Hover */

li.product .astra-shop-summary-wrap .button:hover {
  background: var(--ast-global-color-4) !important;
  color: var(--ast-global-color-3) !important;
  border-color: var(--ast-global-color-0) !important;
  /*transform: translateY(-1px);*/
}

/* Hover кнопки при наведенні на всю картку */
li.product:hover .astra-shop-summary-wrap .button,
li.product:focus-within .astra-shop-summary-wrap .button {
  background: var(--ast-global-color-4) !important;
  color: var(--ast-global-color-3) !important;
  border-color: var(--ast-global-color-0) !important;
}
/*Нижня частина, ховер*/
li.product:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/*Відступи в картці, нижня частина верх, ліво/право, низ*/
li.product .astra-shop-summary-wrap {
  padding: 0px 8px 8px;
}


/*--------------Надпис над кнопкою-------------*/
.darbox-options-note{
  display:block;
  font-size:12px;
  opacity:0.7;
  margin-bottom:2px;
 /* text-align:center;*/
  
}


/* =========================================================
            Карточка товару
========================================================= */


/* Прибрати hover-кнопку з іконкою кошика на карточці */
.ast-on-card-button.ast-select-options-trigger {
    display: none !important;
}


/* ====================================== НАЗВА ТОВАРУ В КАТАЛОЗІ 2 рядки + три крапки і обрізання по словам

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.darbox-top-products ul.products li.product .woocommerce-loop-product__title{    
  
  /* шрифт 
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.3;

  /* обмеження до 1 рядків 
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;

  /* три крапки 
  text-overflow:ellipsis;

  /* резерв місця під 2 рядки 
  min-height:calc(1.3em * 2);

}
*/

/* ==================================== НАЗВА ТОВАРУ В КАТАЛОЗІ 1 рядок + три крапки і обрізання по символам */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.darbox-top-products ul.products li.product .woocommerce-loop-product__title {

  /*font-size:14px!important;*/
  font-weight:500!important;
  line-height:1.3;

  /* 🔥 ключове: прибираємо line-clamp */
  display:block;
  white-space:nowrap;
  overflow:hidden;

  /* три крапки */
  text-overflow:ellipsis;
}
.woocommerce ul.products li.product,
.darbox-top-products ul.products li.product {
    min-width: 0;
}


/* зменшуємо відступ під назвою товару */
.woocommerce-loop-product__title{
  margin-bottom: 5px !important;
}

/* зменшити відступи ціни в каталозі */
.woocommerce ul.products li.product .price{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}




/* =========================================
   ЗІРКИ РЕЙТИНГУ В КАТАЛОЗІ ТОВАРІВ
========================================= */

/* зменшити зірки рейтингу у каталозі */
.woocommerce ul.products li.product .star-rating{
  font-size: 12px !important;
}

/* заповнені зірки */
.woocommerce .star-rating span::before{
  color: color-mix(in srgb, var(--ast-global-color-0) 75%, white) !important;
}

/* порожні зірки */
.woocommerce .star-rating::before{
  color: color-mix(in srgb, var(--ast-global-color-0) 30%, white) !important;
}

.review-count{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-size:0 !important; /* ховає текстовий вузол без зайвого місця */
  line-height:1 !important;
  margin-left:10px !important;
  margin-top:0px !important;
}

.review-count::before{
  content:"відгуки (" !important;
  font-size:12px !important;
  line-height:1 !important;
  color:#666 !important;
}

.review-count .count{
  font-size:12px !important;
  line-height:1 !important;
  color:#666 !important;
}

.review-count::after{
  content:")" !important;
  font-size:12px !important;
  line-height:1 !important;
  color:#666 !important;
}

/* =========================================
   ПУСТИЙ РЕЙТИНГ = ЯК СТАНДАРТНИЙ
========================================= */
/* важливо: робимо як у Woo */
.review-rating .star-rating {
  float: none !important;
  margin: 0 !important;
}

/* щоб ширина не ламалась */ 
.review-rating .star-rating{
  width: calc(6em + 4px) !important;
}

/* для пустого — нічого не перекриваємо */
.review-rating--empty .star-rating span::before {
  color: color-mix(in srgb, var(--ast-global-color-0) 75%, white) !important;
}

.review-rating--empty .star-rating::before {
  color: color-mix(in srgb, var(--ast-global-color-0) 30%, white) !important;
}










/* ========================================================
   Блок ціни в карточці товару 
==========================================================*/
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.darbox-top-products ul.products li.product .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
} 

/* Стара ціна */
.woocommerce ul.products li.product .price del,
.darbox-top-products ul.products li.product .price del {
    order: 1;
    opacity: 1;
    font-weight: 400;
    text-decoration: line-through;
    white-space: nowrap;
    color: var(--ast-global-color-3);
}    
  
 /* Вирівнюваня старої ціни і нової  
  .price del {
    line-height: 1;
}
.price ins {
    line-height: 1;
}  
    


/* колір і розмір старої ціни (важливо окремо) */
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.darbox-top-products ul.products li.product .price del .woocommerce-Price-amount {
    color: var(--ast-global-color-3) !important;
    font-size: 13px !important;
}

/* Нова ціна */
.woocommerce ul.products li.product .price ins,
.darbox-top-products ul.products li.product .price ins {
    order: 2;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* колір нової ціни */
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.darbox-top-products ul.products li.product .price ins .woocommerce-Price-amount {
    color: var(--ast-global-color-3) !important;
}

/* іконка кошика завжди остання */
.darbox-cart-icon{
    order: 3;
}

/* Якщо ціна без знижки */
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.darbox-top-products ul.products li.product .price .woocommerce-Price-amount { 
    font-size: 16px;
    font-weight: 600;
}

/* колір ціни без знижки (але НЕ чіпає del/ins) */
.price:not(:has(del)) .woocommerce-Price-amount {
    color: var(--ast-global-color-3) !important;
}

/* Піднімає рядок ціни ближче до рейтингу */
li.product .price{
  transform: translateY(-7px);
} 



/*========================================================
                 Кошик в картці товару
==========================================================*/

.darbox-price-wrap{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* === Іконка як в хедері === */
.darbox-cart-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    padding: 6px;
    line-height:0;
    cursor:pointer;
    margin-left: auto;
    margin-right: 0px;
    border: 1px solid var(--ast-global-color-7);                  /*var(--ast-border-color);*/
    border-radius: 50%;
    
}

.darbox-price-wrap{
    width:100%;
}

/* svg */
.darbox-cart-icon svg{
    width:22px;
    height:22px;
}

/* stroke стиль як у хедері */
.darbox-cart-icon svg path{
    fill:none !important;
    stroke: var(--ast-global-color-3);
    stroke-width:6.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .2s ease;
}

/* hover */
.darbox-cart-icon:hover path{
    stroke:var(--ast-global-color-0);
}
.darbox-cart-icon:hover{
background:var(--ast-global-color-4);
border:1px solid var(--ast-global-color-0);;
}










/* =========================================================
   DARBOX: КАРТКА ТОВАРУ В КАТЕГОРІЇ
   Друге фото показується по hover тільки на desktop
   ========================================================= */


/* =========================================================
   КОНТЕЙНЕР ДВОХ ФОТО
   ========================================================= */

/* Обгортка основного і другого фото */
.woocommerce ul.products li.product .darbox-loop-image-swap{
  position: relative;
  display: block;
  overflow: hidden;
}

/* Обидва зображення в картці товару */
.woocommerce ul.products li.product .darbox-loop-image-swap img{
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   ДРУГЕ ФОТО
   ========================================================= */

/* Друге фото розташовується поверх основного */
.woocommerce ul.products li.product .darbox-loop-image-secondary{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 2;
  pointer-events: none;
}


/* =========================================================
   ПОКАЗ ДРУГОГО ФОТО НА DESKTOP
   ========================================================= */

@media (hover: hover) and (min-width: 1024px){

  /* Показ другого фото при наведенні на всю картку */
  .woocommerce ul.products li.product.darbox-has-hover-image:hover .darbox-loop-image-secondary,
  .woocommerce ul.products li.product.darbox-has-hover-image:focus-within .darbox-loop-image-secondary{
    opacity: 1;
    visibility: visible;
  }

  /* Плавність для основного фото */
  .woocommerce ul.products li.product.darbox-has-hover-image .attachment-woocommerce_thumbnail,
  .woocommerce ul.products li.product.darbox-has-hover-image .wp-post-image,
  .woocommerce ul.products li.product.darbox-has-hover-image .woocommerce-placeholder{
    transition: opacity .25s ease;
  }
}



/*=============================================
     ВЕрсія компютер  921-1124px 
================================================*/

@media (min-width: 921px) and (max-width: 1124px){
/* =========== НАЗВА ТОВАРУ В КАТАЛОЗІ ====================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.darbox-top-products ul.products li.product .woocommerce-loop-product__title{    
  font-size:13px!important;
}

/* === Зірки рейтингу у каталозі ===*/
.woocommerce ul.products li.product .star-rating{
  font-size: 11px !important;
}
.review-count .count{
  font-size:11px !important;
}

/* Піднімає рядок ціни ближче до рейтингу */
li.product .price{
  transform: translateY(-2px);
}

/* =========================================================
   КАРТКА ТОВАРУ 
   ========================================================= */

/* === Кнопка Детальніше ==== */

.darbox-options-wrap{
    margin-top: -2px;
}




}



/* =========================================================
   ВИМКНЕННЯ ДРУГОГО ФОТО НА МОБІЛЬНИХ І TOUCH-ПРИСТРОЯХ
   ========================================================= */

@media (max-width: 922px), (hover: none){

  /* На мобільних друге фото не використовується */
  .woocommerce ul.products li.product .darbox-loop-image-secondary{
    display: none !important;
  }
}


/* =========================================================
           ТЕЛЕФОН до 544 пікс
   ========================================================= */

@media (max-width: 922px){
    
/* =========== НАЗВА ТОВАРУ В КАТАЛОЗІ ====================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.darbox-top-products ul.products li.product .woocommerce-loop-product__title{    
  
  /* шрифт */
  font-size:12px!important;
}

/* ======= Блок ціни в карточці товару ======================*/



/* Якщо ціна без знижки */
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.darbox-top-products ul.products li.product .price .woocommerce-Price-amount { 
    font-size: 15px;
}

 /* Нова ціна */
.woocommerce ul.products li.product .price ins,
.darbox-top-products ul.products li.product .price ins {
    font-size: 15px;
}
/*========================================================
                 Кошик в картці товару
==========================================================*/

/* === Іконка як в хедері === */
.darbox-cart-icon{
    padding: 5px;
    margin-right: 0px;
}
/* svg */
.darbox-cart-icon svg{
    width:18px;
    height:18px;
}
/* === Зірки рейтингу у каталозі ===*/
.woocommerce ul.products li.product .star-rating{
  font-size: 10px !important;
}
.review-count .count{
  font-size:10px !important;
}

/* === Кнопка Детальніше ==== */
li.product .astra-shop-summary-wrap .button {
  padding: 6px 20px !important;
  font-size: 13px !important;
  
}
.darbox-options-wrap{
    margin-top: 0px;
}

/*--------------Надпис над кнопкою-------------*/
.darbox-options-note{
  font-size:11px;
}
/* Піднімає рядок ціни ближче до рейтингу */
li.product .price{
  transform: translateY(0px);
}




}