/* ==========================================================================
   EliteBlocc — Product Card Component
   File: assets/css/components/ebc-product-card.css
   Version: 1.0
   ========================================================================== */

.eb-product-card {
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.1);
  border-radius:  var(--eb-radius-xl, 20px);
  padding:        20px;
  position:       relative;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  cursor:         pointer;
  text-decoration: none;
  transition:     background  0.28s ease,
                  border-color 0.28s ease,
                  transform   0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow  0.28s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action:   manipulation;
}

/* Gold sweep accent on hover */
.eb-product-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       20%;
  right:      20%;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--eb-color-gold, #f59e0b),
    transparent
  );
  opacity:    0;
  transition: opacity 0.28s ease,
              left   0.35s cubic-bezier(0.22, 1, 0.36, 1),
              right  0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.eb-product-card:hover {
  background:   rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  transform:    translateY(-5px);
  box-shadow:   0 12px 38px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(245, 158, 11, 0.14);
  color:        #fff;
  text-decoration: none;
}

.eb-product-card:hover::before {
  opacity: 1;
  left:    0;
  right:   0;
}

.eb-product-card:focus-visible {
  outline:        2px solid rgba(16, 185, 129, 0.6);
  outline-offset: 3px;
}

/* ── Label — category / system type ── */
.eb-product-card__label {
  font-family:    monospace;
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(245, 158, 11, 0.76);
  margin:         0;
}

/* ── Title ── */
.eb-product-card__title {
  font-family:    var(--eb-font-heading, 'Orbitron', monospace);
  font-size:      clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight:    700;
  color:          #fff;
  line-height:    1.2;
  margin:         0;
}

/* ── Body description ── */
.eb-product-card__body {
  font-size:   0.8rem;
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin:      0;
}

/* ── Spec table ── */
.eb-product-card__specs {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  border-top:     1px solid rgba(255, 255, 255, 0.08);
  padding-top:    12px;
  margin:         0;
}

.eb-product-card__spec {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             6px;
}

.eb-product-card__spec dt {
  font-family:    monospace;
  font-size:      0.63rem;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
}

.eb-product-card__spec dd {
  font-family:    var(--eb-font-heading, 'Orbitron', monospace);
  font-size:      0.68rem;
  font-weight:    700;
  color:          var(--eb-color-gold, #f59e0b);
  margin:         0;
  text-align:     right;
}

/* ── Footer — CTA + count ── */
.eb-product-card__footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  padding-top:     12px;
  margin-top:      auto;
}

.eb-product-card__cta {
  font-family:    monospace;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  color:          var(--eb-color-gold, #f59e0b);
  transition:     color 0.2s ease;
}

.eb-product-card:hover .eb-product-card__cta {
  color: var(--eb-color-gold-light, #fbbf24);
}

.eb-product-card__count {
  font-family:    monospace;
  font-size:      0.62rem;
  color:          rgba(255, 255, 255, 0.28);
  letter-spacing: 0.06em;
}

/* ── Background watermark ── */
.eb-product-card__bg {
  position:       absolute;
  bottom:         -10px;
  right:          10px;
  font-family:    var(--eb-font-heading, 'Orbitron', monospace);
  font-size:      4rem;
  font-weight:    900;
  opacity:        0.04;
  line-height:    1;
  pointer-events: none;
  color:          #fff;
  user-select:    none;
  -webkit-user-select: none;
}

/* ── Hello Elementor parent-theme override ── */
.eb-product-card,
.eb-product-card:hover,
.eb-product-card:focus,
.eb-product-card:visited {
  text-decoration: none !important;
  color: inherit !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .eb-product-card,
  .eb-product-card::before {
    transition: none;
  }
}

/* ── Touch devices ── */
.eb-product-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}