/* =============================================
   AK MOTORSPORT - CUSTOM CSS
   Based on UI Implementation Guide
   Paste this at the bottom of your theme CSS
   ============================================= */

/* ==================== DESIGN TOKENS ==================== */
:root {
  --asphalt: #1A1A1E;
  --orange: #FF4713;
  --muted: #F4F4F5;
  --text: #1A1A1E;
}

/* ==================== HEADER ==================== */
.header, .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.header .logo {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--asphalt);
}

/* Language Toggle */
.lang-toggle {
  background: none;
  border: 2px solid var(--asphalt);
  color: var(--asphalt);
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 600;
}

/* ==================== HERO ==================== */
.hero {
  position: relative;
  min-height: 75vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(26,26,30,0.35), rgba(26,26,30,0.8));
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 20px;
}

.hero h1 {
  font-size: 3.2rem;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-button {
  background: var(--orange);
  color: white;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 1.15rem;
  font-weight: 600;
  display: inline-block;
  margin-top: 20px;
  transition: all 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(255,71,19,0.4);
}

/* ==================== CATEGORIES & CARDS ==================== */
.category-card, .product-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

.category-card:hover, .product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0,0,0,0.12);
}

.product-card img {
  height: 240px;
  object-fit: cover;
}

/* ==================== PRODUCT GRID ==================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

/* ==================== BRANDS ==================== */
.brands img {
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.brands img:hover {
  filter: grayscale(0);
}

/* ==================== FOOTER & NEWSLETTER ==================== */
.newsletter {
  background: var(--asphalt);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.newsletter input {
  padding: 16px 20px;
  border-radius: 8px;
  border: none;
  width: 100%;
  max-width: 420px;
}

/* ==================== UTILITIES ==================== */
.btn-primary {
  background: var(--orange) !important;
  color: white !important;
  border: none !important;
}

.text-asphalt { color: var(--asphalt); }

/* RTL Support */
html[dir="rtl"] .hero h1,
html[dir="rtl"] .section-title {
  direction: rtl;
}