/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


/* Контейнер прев’ю варіацій праворуч */
.qp-var-preview{ margin: 10px 0 10px; }
.qp-var-preview .qp-var-img{
    width:100%; height:auto; 
    display:block;
    border:1px solid #eee; border-radius:2px;
    max-height: 300px; 
    object-fit: cover;
    max-width: 300px;
    margin: 0 auto;
}
/* щоб ліву галерею не зносило — залишаємо стандартні налаштування Flatsome */



/* Наслідуємо стиль fade Flatsome, але лише в правому прев’ю */
/* Контейнер під кросфейд */
.qp-var-preview{
  position: relative;
  transition: height .6s ease; /* м'яка зміна висоти контейнера */
  min-height: 300px;
}

/* Слайди завжди відмальовані (перекриваємо inline style="display:none") */
.qp-var-preview .qp-var-slide{
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease;
      transition: transform .6s, opacity .6s, box-shadow .6s;
  will-change: opacity, transform;
}

/* Активний слайд */
.qp-var-preview .qp-var-slide.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Плавний fade усередині Flickity (як у лівій галереї) */
.qp-var-preview .flickity-slider > img,
.qp-var-preview .flickity-slider > a,
.qp-var-preview .flickity-slider > figure,
.qp-var-preview .flickity-slider > div:not(.col),
.qp-var-preview .flickity-slider > p{
  margin: 0;
  padding: 0;
  width: 100% !important;
  transition: transform .6s, opacity .6s, box-shadow .6s;
}
.qp-var-preview .flickity-slider > *{ opacity:.25; transform:scale(.98); }
.qp-var-preview .flickity-slider > *.is-selected{ opacity:1; transform:none; }

.swatch-wrapper img {
    height: 100%;
}

/* Фолбек, доки Flickity не ініціалізувався */
.qp-var-slide .qp-flickity:not(.flickity-enabled) .qp-var-img{
  position: static !important;
  display:block; width:100%; height:auto;
}

.product-page-accordian{
    margin-bottom: 1.5rem;
    margin-top: 1.5rem; 
}

.woocommerce-product-gallery__image a{ outline: none !important; border: none !important;}

.variations .swatch-wrapper{
    border-radius: 100%;
}
.variations .swatch-wrapper a{
    border-radius: 100%;
    overflow:hidden;
    max-width: 32px;
    max-height: 32px;
}
.variations .swatch-control.radio-select ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 3px 1px !important;
}
.variations .swatch-control.radio-select li input.radio-option {
    visibility: hidden; position:absolute;
    opacity:0;
    width:1px; height:1px;
    margin:-1px; padding:0;
    clip:rect(0 0 0 0);
    clip-path: inset(50%);
    overflow:hidden;
}

.variations .swatch-control.radio-select li { list-style: none !important;  margin: 0; }
.variations .swatch-control.radio-select li label {
    text-align: center; display: inline-block;
    min-width:  74px ;
    padding: 0.35rem 0.15rem;
    width: auto;
    height: auto;
    overflow: clip;
    border-radius: 14px;
    margin: 0; cursor: pointer;
    box-shadow: var(--wvs-item-box-shadow, 0 0 0 1px #a8a8a8);
}
.variations .swatch-control.radio-select li input.radio-option:checked + label{
    background:#e5e5e5;     
    box-shadow: var(--wvs-item-box-shadow, 0 0 0 1px green);
}
@media (max-width: 760px) {
    .variations .swatch-control.radio-select li label {
        min-width:  64px ;
    }


}

/* Контейнер з фіксованим співвідношенням сторін */
.products .product-category .box-image,
ul.products li.product-category .box-image{
  position: relative;
  aspect-ratio: 4 / 3;   /* підлаштуй під свій дизайн */
  width: 100%;
  overflow: hidden;
}

/* Усі зображення всередині заповнюють контейнер */
.products .product-category .box-image img,
ul.products li.product-category .box-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .35s ease;
}

/* Друге (hover) поверх першого, сховане */
.products .product-category .box-image img.category-secondary-image,
ul.products li.product-category .box-image img.category-secondary-image{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Показати друге при ховері */
.products .product-category .box-image:hover img.category-secondary-image,
ul.products li.product-category .box-image:hover img.category-secondary-image{
  opacity: 1;
}

/* Ховати базове лише якщо друга картинка існує (CSS :has) */
@supports(selector(:has(*))){
  .products .product-category .box-image:has(img.category-secondary-image):hover img:not(.category-secondary-image),
  ul.products li.product-category .box-image:has(img.category-secondary-image):hover img:not(.category-secondary-image){
    opacity: 0;
  }
}

/* Фолбек без :has — додамо .has-secondary через JS */
.products .product-category .box-image.has-secondary:hover img:not(.category-secondary-image),
ul.products li.product-category .box-image.has-secondary:hover img:not(.category-secondary-image){
  opacity: 0;
}
.products  .box-bounce:hover .box-image {
    transform: translateY(0px);
}






/* Контейнер свотчів під назвою/ціною */
/*.qp-loop-wood{ display:flex; gap:5px; margin-top:0rem;     align-items: center;*/
/*    justify-content: center;*/
/*    margin-bottom: 5px;}*/
/*.qp-wood-swatch{ width:30px; height:30px; border-radius:100%; border:1px solid rgba(0,0,0,.08); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#fff; padding: 2px; }*/
/*.qp-wood-swatch:hover{ box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; }*/
/*.qp-wood-thumb{ width:100%; height:100%; object-fit:cover; display:block; border-radius:100%;  }*/
/*.qp-wood-label{ font-size:11px; line-height:1; padding:2px 6px; white-space:nowrap; }*/


.qp-loop-attr{ display:flex;  gap:5px; margin-top:0rem;     align-items: center;
    justify-content: center;    margin-bottom: 5px;}
.qp-attr-swatch{
  width:30px; height:30px; border-radius:100%;
  border:1px solid rgba(0,0,0,.08); overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;  background:#fff; padding: 2px; 
}
.qp-attr-thumb{ width:100%; height:100%; object-fit:cover; display:block; border-radius:100%;   }
.qp-attr-label{ font-size:11px; line-height:1; padding:2px 6px; white-space:nowrap; }


.widget_shopping_cart .button{     background-color: #848484 !important; }
.button.primary.flatsome-cookies__accept-btn{	background-color: #3f3f3f  !important; }
 

@media (max-width: 850px) {
.header-button .header-cart-link.icon{ background: transparent !important; }
.mobile-nav li.current-dropdown.cart-item >.nav-dropdown {transform: translateX(-50%); }

}
@media (max-width: 760px){
    .header.has-transparent + .page-title:first-of-type, .header.has-transparent + #main > .page-title, .header.has-transparent + #main > div > .page-title, .header.has-transparent + #main .page-header-wrapper:first-of-type .page-title {
        padding-top: 140px;
    }
}

@media (max-width: 380px) {
    .mobile-nav li.current-dropdown.cart-item >.nav-dropdown {transform: translateX(-25%); }
}
}