/* FORGE & FLUX - Industrial Piping Catalog Styles (White & Warm Professional Theme) */

html {
  scroll-behavior: smooth;
  background-color: #ffffff;
  color: #1a1918;
}

body {
  background-color: #ffffff;
  color: #1a1918;
  font-family: 'Inter', sans-serif;
}

/* Custom Warm Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f7f4ee;
}
::-webkit-scrollbar-thumb {
  background: #d4ccbf;
  border-radius: 4px;
  border: 2px solid #f7f4ee;
}
::-webkit-scrollbar-thumb:hover {
  background: #d96b27;
}

/* Intro Stage & Loader Styling */
#intro-stage {
  box-shadow: inset 0 0 100px rgba(220, 200, 180, 0.2);
  background: radial-gradient(circle at center, #ffffff 0%, #f7f3ed 100%);
}

#hero-canvas {
  filter: contrast(1.05) brightness(1.02);
}

.intro-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50px);
}

/* Category Tab active state */
.cat-tab-btn.active {
  background-color: #d96b27 !important;
  color: #ffffff !important;
  border-color: #d96b27 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(217, 107, 39, 0.25) !important;
}

/* Product Card Styling & Image Box */
.product-card {
  box-shadow: 0 4px 20px -2px rgba(180, 120, 60, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -4px rgba(217, 107, 39, 0.15);
  border-color: #d96b27 !important;
}

.product-img-box {
  width: 100%;
  height: 190px;
  background-color: #fcfaf7;
  border-bottom: 1px solid #eee8df;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-img-box img {
  transform: scale(1.08);
}

.product-img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #d96b27;
}

/* Category Card Styling */
.cat-card {
  box-shadow: 0 4px 16px rgba(160, 130, 90, 0.05);
}

.cat-card:hover {
  box-shadow: 0 12px 28px rgba(217, 107, 39, 0.14);
}