/*=============================
=       SLIDE-UP INFO        =
=============================*/
.cpil-slide-up-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(1, 0, 67, 0.95);
  color: #FFB400;
  font-size: 15px;
  line-height: 0.5;
  padding: 20px 0px 0px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  z-index: 2;
  pointer-events: none;
}
/* Afișează fiecare componentă pe rând separat doar după patch */
.cpil-slide-up-info [data-cpil-split="1"] .cpil-attr-part {
  display: block;
  margin-top: 2px; /* aer între linii */
}

/* Eticheta rămâne pe un singur rând */
.cpil-slide-up-info [data-cpil-split="1"] .cpil-attr-label {
  white-space: nowrap;
}
/* Doar pentru paragrafele procesate de patch (nu afectează restul) */
.cpil-slide-up-info [data-cpil-split="1"] .cpil-attr-label {
  white-space: nowrap; /* "Compoziție:" rămâne pe un singur rând */
}

/* prima linie (după label) coboară pe rând nou și are spațiu */
.cpil-slide-up-info [data-cpil-split="1"] .cpil-attr-label + .cpil-attr-part {
  display: block;
  margin-top: 18px;   /* spațiu între label și primul procent */
}

/* liniile următoare au același spațiu între ele */
.cpil-slide-up-info [data-cpil-split="1"] .cpil-attr-part + .cpil-attr-part {
  display: block;
  margin-top: 18px;   /* spațiu între procente */
}

.product-grid-item:hover .cpil-slide-up-info,
.product.type-product:hover .cpil-slide-up-info {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.product-grid-item,
.product.type-product {
  position: relative;
  overflow: hidden;
}

/* Butonul pentru mobil - înlocuiește hover-ul */
@media (max-width: 768px) {
  .cpil-slide-up-info {
    display: none !important;
  }
  
  /* Butonul cu trei puncte pentru mobil - mai mare și centrat pe imagine */
  .cpil-mobile-info-btn {
    position: absolute;
    bottom: 5px; /* 5px de la baza imaginii */
    left: 50%;
    transform: translateX(-50%); /* centrat orizontal */
    width: 70px; /* dublat de la 35px */
    height: 24px; /* dublat de la 12px */
    background: #ffa400;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    opacity: 1;
  }
  
  /* Trei puncte în buton - mai mari */
  .cpil-mobile-info-btn::before {
    content: '●●●';
    color: #010043;
    font-size: 14px; /* crescut de la 8px */
    letter-spacing: 2px; /* mai mult spațiu între puncte */
    line-height: 1;
  }
  
  /* După ce a fost văzut - mai transparent */
  .cpil-mobile-info-btn.viewed {
    opacity: 0.65;
  }
  
  /* Efecte la hover/touch */
  .cpil-mobile-info-btn:hover,
  .cpil-mobile-info-btn:active {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 164, 0, 0.3);
  }
  
  /* Slider-ul pentru mobil */
  .cpil-mobile-info-slider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(1, 0, 67, 0.95);
    color: #FFB400;
    font-size: 12px;
    line-height: 0.5;
    padding: 15px 10px;
    z-index: 10;
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
    border-radius: 8px 8px 0 0;
  }
  
  /* Slider deschis */
  .cpil-mobile-info-slider.open {
    transform: translateY(0);
  }
  
}

/*=============================
=   TEXT "CARACTERISTICI"    =
=============================*/
.cpil-characteristics {
  margin-top: 2rem;
  font-size: 14px;
  line-height: 0.5;
  color: #333;
}

/*=============================
= OVERLAY IMAGINEA 2 – MOBIL =
=============================*/
/* 
  Overlay-ul este controlat complet prin JavaScript,
  deci nu mai avem nevoie de stiluri CSS complexe
*/