/* ============================================
   Starchain Auto Components - Global Stylesheet
   Brand colors: Red #D9261C + Ink black + White
============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Smooth focus rings for accessibility */
a, button, input, select, textarea { transition: all 0.2s ease; }
input:focus, select:focus, textarea:focus { outline: none; }

/* Sticky filter bar shadow on scroll */
.filter-btn.active,
.filter-btn.bg-brand-500 { background-color: #D9261C !important; color: #fff !important; }

/* Print friendly */
@media print {
  header, footer, .whatsapp-float, .cta-strip { display: none !important; }
}

/* Reveal on scroll (used by main.js IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Table responsive tweaks */
table { border-collapse: collapse; }

/* Selection color */
::selection { background-color: #D9261C; color: #fff; }

/* Hero 3-banner carousel */
.hero-slide { transition: opacity 1s ease; }
.hero-dot.active { background-color:#fff; width:1.5rem; transition:all 0.3s ease; }

/* Smooth image loading */
img { max-width: 100%; height: auto; display: block; }

/* Line clamp utilities (Tailwind v3 CDN doesn't ship these) */
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-4 { display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }

/* Smooth transition for specs panel */
.specs-panel { animation: slideDown 0.25s ease-out; }
@keyframes slideDown { from { opacity:0;max-height:0 } to { opacity:1;max-height:2000px } }

/* Hover-zoom product image */
.product-img-zoom { transition: transform 0.3s ease; }
.product-img-zoom:hover { transform: scale(1.06); }