/**
 * Tehnoutil — „cliptip": bula cu denumirea completă pentru titlurile tăiate (line-clamp).
 * Elementul e creat de assets/js/tu-cliptip.js direct în <body>, cu position: fixed, ca să nu
 * fie tăiat de overflow: hidden al cardului (.brxe-f01324) și de overflow: clip al caruselului
 * (.tu-slider .splide__track). Valorile = ProductCard.jsx l.33-36 (Claude Design), pe tokenii
 * live (--tu-*; variabilele fără prefix din design nu există pe site).
 */
.tu-cliptip {
  position: fixed;
  top: 0;
  left: 0;
  /* peste #brx-header (500, cu #tehnoutil-header 9990 în interior), Quick View (9995),
     popup-ul Bricks 171 (13000), lightbox-ul de produs (100000) și coșul lateral (1000000) */
  z-index: 1000005;
  box-sizing: border-box;
  width: max-content;
  max-width: min(28rem, calc(100vw - 1.6rem));
  margin: 0;
  padding: .6rem 1rem;
  border-radius: var(--tu-radius-sm, .6rem);
  background: var(--tu-ink-900, #2B1D10);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  color: #fff;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--tu-duration-fast, 200ms) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
    visibility 0s linear var(--tu-duration-fast, 200ms);
}

.tu-cliptip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tu-duration-fast, 200ms) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

@media (prefers-reduced-motion: reduce) {
  .tu-cliptip,
  .tu-cliptip.is-visible {
    transition: none;
  }
}

@media print {
  .tu-cliptip {
    display: none !important;
  }
}