.ccb-cart-toggle {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  background: #ffffff !important;
  color: var(--ug-blue-primary) !important;
  border: 1.5px solid rgba(0,27,113,0.15) !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0,27,113,0.18) !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  outline: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.ccb-cart-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0,27,113,0.25) !important;
}


.ccb-cart-count {
  background: var(--ug-red-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ccb-cart-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.4) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 9999 !important;
}

.ccb-cart-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ccb-cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 380px !important;
  max-width: 90vw !important;
  background: #fff !important;
  box-shadow: -8px 0 24px rgba(0,0,0,0.15) !important;
  z-index: 10000 !important;
  transform: translateX(100%) !important;
  transition: transform 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
}

.ccb-cart-drawer.is-open {
  transform: translateX(0) !important;
}

.ccb-cart-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.ccb-cart-drawer-header h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  color: var(--ug-blue-primary) !important;
}

.ccb-cart-drawer-header button {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  padding: 0 !important;
}

.ccb-cart-items {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 20px !important;
}

.ccb-cart-empty {
  color: #6b7280 !important;
  text-align: center !important;
  margin-top: 40px !important;
}

.ccb-cart-item {
  position: relative !important;
  display: flex !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.ccb-cart-item img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

/* El marcador genérico se ve mejor completo (sin recortar), a
   diferencia de una foto real de producto, que sí se ve bien
   llenando todo el cuadro. */
.ccb-cart-item img.ccb-cart-item-img-placeholder {
  object-fit: contain !important;
  padding: 8px !important;
  background: var(--ug-bg-soft, #F8FAFC) !important;
  box-sizing: border-box !important;
}

.ccb-cart-item-info {
  flex: 1 !important;
  padding-right: 28px !important; /* deja espacio para no chocar con la papelera */
}

.ccb-cart-item-info h4 {
  margin: 0 0 4px !important;
  font-size: 14px !important;
}

.ccb-cart-item-quote-tag {
  display: inline-block !important;
  color: var(--ug-blue-primary) !important;
  background: rgba(0,27,113,0.08) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.ccb-cart-item-controls {
  display: flex !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.ccb-cart-qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  padding: 4px 6px !important;
}

.ccb-cart-qty button {
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  background: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #111827 !important;
  transition: background 0.15s ease !important;
}

.ccb-cart-qty button:hover {
  background: #f3f4f6 !important;
}

.ccb-cart-qty span {
  min-width: 14px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.ccb-cart-item-remove {
  position: absolute !important;
  top: 14px !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.ccb-cart-item-remove:hover {
  background: rgba(232,0,42,0.08) !important;
  color: var(--ug-red-accent) !important;
}

.ccb-cart-footer {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px 20px !important;
  border-top: 1px solid #e5e7eb !important;
}

.ccb-cart-btn {
  flex: 1 !important;
  display: block !important;
  text-align: center !important;
  padding: 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.ccb-cart-btn-outline {
  background: #fff !important;
  color: var(--ug-blue-primary) !important;
  border: 1.5px solid rgba(0,27,113,0.2) !important;
}

.ccb-cart-btn-outline:hover {
  background: var(--ug-blue-primary) !important;
  color: #fff !important;
  border-color: var(--ug-blue-primary) !important;
}

.ccb-cart-btn-solid {
  background: var(--ug-red-accent) !important;
  color: #fff !important;
  border: 1.5px solid var(--ug-red-accent) !important;
}

.ccb-cart-btn-solid:hover {
  background: var(--ug-red-hover) !important;
  border-color: var(--ug-red-hover) !important;
}

@media (max-width: 400px) {
  .ccb-cart-footer { flex-direction: column !important; }
}

/* Evita que "Añadir a cotización" + "Ver carrito" se monten encima del
   nombre del producto — SIN tocar el efecto de "aparece solo al pasar
   el cursor" de Kadence (esa parte se deja intacta). Lo único que se
   cambia es CÓMO se ubica el bloque cuando está visible: en vez de
   flotar encima de otras cosas (position: absolute, que es lo normal
   en este tipo de efectos), pasa a ocupar su propio espacio en la
   tarjeta — así, sin importar si hay una línea de texto o dos, nunca
   pisa nada. */
.product-action-wrap {
  position: static !important;
  margin-top: 10px !important;
}

.product-action-wrap .add_to_cart_button,
.product-action-wrap .added_to_cart {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 0 0 8px !important;
}

.product-action-wrap .added_to_cart:last-child {
  margin-bottom: 0 !important;
}