/* cta2.uiverse.css — Uiverse-inspired button for product cards (scoped) */
.product-card.cta2-mounted .cta2{ 
  margin-top: 12px;
  display:flex; align-items:center; justify-content:center;
}

/* Uiverse button (scoped so it won't affect site-wide .button) */
.product-card .cta2 .button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 12px;
  background-color: #c84bd6;         /* user color */
  outline: 3px #c84bd6 solid;        /* user color */
  outline-offset: -3px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: 400ms;
  -webkit-tap-highlight-color: transparent;
}

.product-card .cta2 .button .text {
  color: #ffffff;
  font-weight: 700;
  font-size: 1em;
  transition: 400ms;
  line-height: 1;
}

/* Animate the cart check svg fill on hover */
.product-card .cta2 .button svg path {
  transition: 400ms;
}

/* Hover/focus-visible */
.product-card .cta2 .button:hover,
.product-card .cta2 .button:focus-visible {
  background-color: transparent;
}

.product-card .cta2 .button:hover .text,
.product-card .cta2 .button:focus-visible .text {
  color: #c84bd6;                    /* user color */
}

.product-card .cta2 .button:hover svg path,
.product-card .cta2 .button:focus-visible svg path {
  fill: #c84bd6;                     /* user color */
}

/* Quantity UI stays simple (from previous file) */
.qty2{ display:flex; align-items:center; gap:12px; }
.qbtn2{
  width:36px; height:36px; border-radius:10px; border:none;
  background:#c84bd6; color:#fff; font-weight:700; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
}
.qnum2{ min-width: 22px; text-align:center; font-weight:700; font-size:16px; }

@media (hover:none) and (pointer:coarse){
  .product-card .cta2 .button,
  .qbtn2{ touch-action: manipulation; }
}