/* =========================================================
   NEW ADAPTIVE GRID: 4-3-2 columns setup
========================================================= */

/* 1) Desktop (Большие экраны) — 4 колонки */
.woocommerce.archive ul.products,
.woocommerce-page.archive ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch;
    padding: 10px;
}

/* 2) Laptop / Tablet Landscape (Ноутбуки и планшеты горизонтально) — 3 колонки */
@media (max-width: 1200px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

/* 3) Tablet Portrait (Планшеты вертикально) — 2 колонки (чтобы не было мелко) */
@media (max-width: 991px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 4) Mobile (Смартфоны) — 2 колонки + уменьшение отступов */
@media (max-width: 575px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important; /* На мобилках лучше поплотнее */
    }
    
    /* Уменьшаем шрифты только для мобилок, чтобы всё влезло */
    .pix-product-title {
        font-size: 13px !important; 
    }
    .pix-product-price {
        font-size: 18px !important;
    }
    .text-content {
        padding: 5px !important;
    }
}
/* =========================================================
   1) SIZE TUNING (SAFE)
========================================================= */

/* compact spacing inside the card */
.text-content{ padding: 8px; } /* was 10px */

/* title a bit smaller */
.pix-product-title{
  font-size:15px; /* was 16px */
  line-height:1.35;
}

/* price a bit smaller */
.pix-product-price{
  font-size:23px!important; /* was 25px */
}

/* wishlist a bit tighter */
.pix-wishlist-wrapper{
  top:12px;
  right:12px;
}
.pix-add-to-wishlist .btn-icon{
  font-size:20px;
}

/* IMPORTANT: do NOT use transform scale (breaks grid/layout) */
.woocommerce ul.products li.product .pix-product-item-wrapper{
  transform: none !important;
}


/* =========================================================
   2) WRAPPER / CARD
========================================================= */
.pix-product-item-wrapper,
li.product.pix-product-item-wrapper{
  position:relative;
  text-align:center;
  border-radius:10px;

  /* keeps LED glow inside, prevents banner/sidebar overlap */
  overflow:hidden;
  isolation:isolate;
}

/* card */
.pix-product-item{
  position:relative;
  z-index:2;
  padding:0;
  border:1px solid #fff;
  border-radius:10px;
  transition:.5s ease-in-out;
  background:#fff;
}


/* =========================================================
   3) LED GLOW (inside card)
========================================================= */
.pix-product-item-wrapper:hover::after,
.pix-product-item-wrapper:hover::before,
li.product.pix-product-item-wrapper:hover::after,
li.product.pix-product-item-wrapper:hover::before{
  opacity:1;
}

.pix-product-item-wrapper::after,
.pix-product-item-wrapper::before,
li.product.pix-product-item-wrapper::after,
li.product.pix-product-item-wrapper::before{
  opacity:0;
  content:"";
  transition:.5s ease-in-out;
  position:absolute;
  z-index:1;
  background-image:linear-gradient(132deg,#5ddcff,#3c67e3 43%,#4e00c2);
}

/* frame */
.pix-product-item-wrapper:hover::before,
li.product.pix-product-item-wrapper:hover::before{
  width:104%;
  height:104%;
  border-radius:8px;
  top:-2%;
  left:-2%;
}

/* glow blur (reduced немного чтобы меньше вылазило визуально) */
.pix-product-item-wrapper:hover::after,
li.product.pix-product-item-wrapper:hover::after{
  top:0;
  left:0;
  right:0;
  height:100%;
  width:100%;
  transform:scale(.9);
  filter:blur(45px); /* was 70px */
}

/* glow always behind */
.pix-product-item-wrapper::before,
.pix-product-item-wrapper::after,
li.product.pix-product-item-wrapper::before,
li.product.pix-product-item-wrapper::after{
  z-index:0;
}

.pix-product-item{
  z-index:1;
}


/* =========================================================
   4) IMAGE
========================================================= */
.product-image-container{width:100%;height:auto;overflow:hidden;position:relative}
.product-image-container img{width:100%;height:auto;display:block}


/* =========================================================
   5) TEXT + PRICE + RATING
========================================================= */
.pix-product-title{
  font-weight:300;
  color:#333;
  text-decoration:none;
  margin:0;
  padding:0;
  transition:color .3s;
  display:block;
  width:100%;
  text-align:center;
}
.pix-product-title:hover{color:#007cba;text-decoration:underline}

.pix-product-price{
  font-weight:300!important;
  color:orange!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* price must NEVER disappear (SAFE + no overflow) */
.pix-product-price,
.pix-product-price .price,
.pix-product-price .woocommerce-Price-amount{
  opacity:1 !important;
  visibility:visible !important;

  display:block !important;      /* ✅ was inline-block */
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

  color:orange !important;
  text-align:center !important;
}

/* rating hover */
.pix-product-rating-hover{display:none;font-size:18px;color:#fc0;text-align:center}
.pix-product-item:hover .pix-product-rating-hover{display:block}

.pix-item-badges{margin-top:10px}
.pix-product-price-rating{display:flex;align-items:center;justify-content:center;gap:10px}


/* =========================================================
   6) WHOLE CARD LINK + UNDERLINE TITLE ON HOVER
========================================================= */
.product-content-wrapper{
  display:block;
  text-decoration:none;
}
.product-content-wrapper:hover .pix-product-title{
  color:#007cba;
  text-decoration:underline;
}


/* =========================================================
   7) WISHLIST (pulse)
========================================================= */
.pix-wishlist-wrapper{
  position:absolute;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.pix-add-to-wishlist{
  background:0 0;
  border:none;
  cursor:pointer;
  pointer-events:auto;
}

.pix-add-to-wishlist .btn-icon{
  color:#333;
  transition:color .3s;
  display:inline-block;
}

.pix-add-to-wishlist.remove-item .btn-icon{
  color:red;
  animation:1s infinite pulse;
}

@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}


/* =========================================================
   8) VIDEO ON HOVER (как раньше) + отключить second image swap
========================================================= */
@media (hover: hover) {
  .woocommerce ul.products li.product .product-image-container{
    position:relative;
  }
  .woocommerce ul.products li.product .product-image-container .product-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
  }
}

/* ✅ Если у карточки есть видео — запрещаем second image swap */
.product-image-container.has-video img:nth-of-type(2),
.product-image-container.has-video img.hover-image,
.product-image-container.has-video img.secondary-image,
.product-image-container.has-video .secondary-image,
.product-image-container.has-video .hover-image{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* ==============================
   FIX: Glow visible on all sides
   ============================== */

/* 1) РАЗРЕШАЕМ glow выходить наружу */
.woocommerce.archive ul.products li.product,
.woocommerce-page.archive ul.products li.product{
  overflow: visible !important; /* было hidden — оно резало glow */
}

.pix-product-item-wrapper,
li.product.pix-product-item-wrapper{
  overflow: visible !important; /* было hidden — оно резало glow */
}

/* 2) А вот контент (картинку/углы) режем внутри самой карточки */
.pix-product-item{
  overflow: hidden; /* держит скругления и картинку ровно */
}

/* 3) Чуть “равномернее” glow по кругу */
.pix-product-item-wrapper::before,
.pix-product-item-wrapper::after,
li.product.pix-product-item-wrapper::before,
li.product.pix-product-item-wrapper::after{
  inset: -10px;           /* даём место свечению со всех сторон */
  border-radius: 14px;    /* чуть больше чем у карточки */
}

/* glow blur можно оставить как есть, но если хочешь сильнее:
   filter: blur(55px);  */

/* ===== HARD FIX: price never exceeds card width (flex min-width issue) ===== */
.woocommerce ul.products li.product .text-content,
ul.products li.product .text-content{
  overflow: hidden !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .pix-product-price,
ul.products li.product .price,
ul.products li.product .pix-product-price{
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .price *,
.woocommerce ul.products li.product .pix-product-price *,
ul.products li.product .price *,
ul.products li.product .pix-product-price *{
  min-width: 0 !important;
  max-width: 100% !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 1. Стилизуем саму цену */
.woocommerce-Price-amount {
    color: #FFA500 !important; /* Оранжевый цвет */
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important; /* Сделал чуть крупнее для акцента */
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* 2. Убираем массивное белое окно (фон) */
.single-product div.product p.price, 
.single-product div.product span.price,
.woocommerce-variation-price {
    background: transparent !important; /* Убираем белый фон */
    border: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* Выравнивание по левому краю */
}

/* 3. Стилизуем разделитель (тире) между диапазоном цен */
.woocommerce-Price-amount + .woocommerce-Price-amount::before,
.price span:nth-child(2)::before {
    content: "—";
    margin: 0 10px;
    color: #fff; /* Белое тире для контраста на темном фоне */
    font-weight: 400;
}

/* 4. Стилизуем символ валюты ($) */
.woocommerce-Price-currencySymbol {
    margin-left: 4px;
    font-size: 0.9em;
    vertical-align: baseline;
}

/* 5. Убираем лишние обертки, если они мешают */
.pix-price-container {
    background: none !important;
    padding: 0 !important;
}

/* =========================================================
   FIXED PRICE STYLING (No White Box)
========================================================= */

/* 1. Удаляем белый фон у всех контейнеров цены в карточке товара */
.product-price-wrapper,
.product-price,
.single-product .price,
.single-product .pix-price-container,
.jet-single-meta__item-value {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. Настраиваем саму цену (Оранжевый + Poppins) */
.woocommerce-Price-amount.amount,
.product-price .woocommerce-Price-amount,
.price .amount {
    color: #FFA500 !important; /* Насыщенный оранжевый */
    font-family: 'Poppins', sans-serif !important;
    font-size: 26px !important; /* Размер как ты хотел */
    font-weight: 600 !important;
    display: inline-block !important;
}

/* 3. Стилизация тире между ценами (диапазон) */
.product-price-wrapper span[aria-hidden="true"],
.price > .woocommerce-Price-amount + span {
    color: #fff !important;
    margin: 0 10px !important;
    font-size: 20px !important;
}

/* Если тире создается через селектор в твоем коде */
.woocommerce-Price-amount + .woocommerce-Price-amount::before {
    content: "—" !important;
    color: #fff !important;
    margin: 0 8px !important;
}

/* 4. Символ валюты */
.woocommerce-Price-currencySymbol {
    color: #FFA500 !important;
    margin-left: 5px !important;
}

/* 5. Убираем лишние отступы у родителя в Elementor */
.elementor-widget-jet-single-meta .jet-single-meta__item {
    background: transparent !important;
    padding: 0 !important;
}