/* Product page specific styles */

.product-hero {
  padding: 3rem 0;
}

.product-image-main {
  position: relative;
  touch-action: pan-y;
}

.product-image-main img {
  max-width: 100%;
  cursor: zoom-in;
  transition: transform .3s ease;
}

.product-image-main img:hover {
  transform: scale(1.05);
}

.product-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: .5rem;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}

.product-thumbnail:hover {
  opacity: 1;
}

.product-thumbnail.active {
  opacity: 1;
  border-color: var(--brand-primary);
}

.testimonial-box {
  border-left: 4px solid var(--brand-primary);
  background: #f8f9fa;
}

.promo-banner {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .9; }
}

.step-number-large {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}

.feature-icon-large {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-size: 2.5rem;
}

.trust-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(var(--brand-primary-rgb), .1);
  color: var(--brand-primary);
}

.accordion-button:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-hero {
    padding: 2rem 0;
  }
  
  .product-thumbnail {
    width: 60px;
    height: 60px;
  }
  
  .step-number-large {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .feature-icon-large {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
}