/* ===== Jeep Aftermarket Parts — Extreme Theme ===== */

::selection { background: #ffd60a; color: #000; }

html { scroll-behavior: smooth; }

/* Prevent horizontal scroll / off-screen content on mobile */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  background-image:
    radial-gradient(ellipse at top, rgba(255, 214, 10, 0.04), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,0.008) 40px 80px);
}

/* Promo ticker animation */
.ticker-track {
  animation: ticker 28s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hero background */
.hero-bg {
  background-image: url('https://sspark.genspark.ai/cfimages?u1=OT7tr%2Fmd4YPq%2BcfwPQCZ0ZPTmYVXxP3XPLHH0%2BA5%2FX9MzWfE5XZIdzjFqmUkL2zzhNLAWil2OwtoFBQp0Skp4c8GZZnklSuflqRjhHc5nakIKB10pfCQ8tguOz4NwgrPCKbrQtA%2B9E00QxBK611ZOkXN2wTdMiEK&u2=YEbhDGn9CKgrdnzJ&width=2560');
  background-size: cover;
  background-position: center 40%;
  filter: saturate(1.15) contrast(1.1);
  animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Glitch-style flicker on hero heading accents */
.hero-glitch span {
  text-shadow: 0 0 18px rgba(255, 214, 10, 0.45);
}

/* Section titles with tire-track underline */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 70%;
  height: 5px;
  background: repeating-linear-gradient(90deg, #ffd60a 0 14px, transparent 14px 22px);
}

/* Category cards */
.category-card {
  display: block;
  position: relative;
  overflow: hidden;
  border: 2px solid #333;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  min-height: 150px;
  background-size: cover;
  background-position: center;
}
.category-card:hover { border-color: #ffd60a; transform: translateY(-4px); }
.category-card .cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  transition: background .2s;
}
.category-card:hover .cat-overlay {
  background: linear-gradient(180deg, rgba(208,0,0,.25), rgba(0,0,0,.9));
}

/* Product cards */
.product-card {
  background: #22201c;
  border: 2px solid #2f2c27;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.product-card:hover {
  border-color: #ffd60a;
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 24px rgba(255,214,10,.08);
}
.product-card .product-image {
  height: 190px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  filter: saturate(1.05);
}
.product-badge {
  position: absolute;
  top: 10px; left: -6px;
  background: #d00000;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .15em;
  padding: 4px 12px;
  transform: skewX(-8deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.savings-tag {
  background: rgba(255, 214, 10, .12);
  border: 1px dashed rgba(255, 214, 10, .5);
  color: #ffd60a;
}

/* Branded corner stamp - covers vendor watermark (bottom-right) on catalog images */
.brand-stamp {
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1611 0%, #22201c 100%);
  color: #ffd60a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1;
  padding: 5px 10px 5px 14px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  border-top: 1px solid rgba(255, 214, 10, .55);
  pointer-events: none;
  z-index: 2;
}
.brand-stamp i { margin-right: 4px; color: #e85d04; }
.brand-stamp.stamp-lg { font-size: 13px; padding: 8px 16px 8px 22px; }

/* Nav links */
.nav-link {
  padding: 10px 14px;
  white-space: nowrap;
  color: #9ca3af;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-link:hover, .nav-link.active { color: #ffd60a; border-color: #ffd60a; }

/* Buttons */
.btn-add {
  background: #ffd60a;
  color: #000;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 12px;
  transition: background .15s, color .15s;
}
.btn-add:hover { background: #e85d04; color: #fff; }
.btn-add:active { transform: scale(.97); }

/* Quantity stepper */
.qty-btn {
  width: 30px; height: 30px;
  background: #1a1611;
  border: 1px solid #444;
  color: #ffd60a;
  font-weight: 800;
}
.qty-btn:hover { border-color: #ffd60a; }

/* Free shipping progress */
.ship-bar-track { background: #1a1611; height: 8px; border: 1px solid #444; }
.ship-bar-fill {
  height: 100%;
  background: repeating-linear-gradient(45deg, #ffd60a 0 10px, #e8c108 10px 20px);
  transition: width .4s ease;
}

/* Form inputs */
.form-input {
  width: 100%;
  background: #1a1611;
  border: 2px solid #3a372f;
  color: #f3f4f6;
  padding: 10px 14px;
  font-weight: 600;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: #ffd60a; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* Toast pop */
#toast.show {
  display: block;
  animation: toastPop .3s ease;
}
@keyframes toastPop {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* Cart drawer open state */
#cart-drawer.open { transform: translateX(0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1611; }
::-webkit-scrollbar-thumb { background: #444; border: 2px solid #1a1611; }
::-webkit-scrollbar-thumb:hover { background: #ffd60a; }

/* ===== THE RIG BAY (Jeep Garage) ===== */
#garage-button.rig-set {
  background: #ffd60a;
  color: #000;
}
#garage-button.rig-set:hover { background: #e85d04; color: #fff; }

/* Fit badges on product cards */
.fit-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  margin-bottom: 6px;
  align-self: flex-start;
}
.fit-yes { background: rgba(56, 176, 0, 0.15); color: #6ede3b; border: 1px solid #38b000; }
.fit-uni { background: rgba(58, 134, 255, 0.12); color: #7fb0ff; border: 1px solid #3a86ff; }
.fit-no  { background: rgba(208, 0, 0, 0.12); color: #ff6b6b; border: 1px solid #d00000; }

/* Fitment check panel on product page */
.fit-check-yes  { background: rgba(56, 176, 0, 0.12); color: #6ede3b; border: 2px solid #38b000; }
.fit-check-uni  { background: rgba(58, 134, 255, 0.10); color: #7fb0ff; border: 2px solid #3a86ff; }
.fit-check-warn { background: rgba(255, 214, 10, 0.10); color: #ffd60a; border: 2px solid #ffd60a; }
.fit-check-no   { background: rgba(208, 0, 0, 0.10); color: #ff6b6b; border: 2px solid #d00000; }

/* ---------- CART UPSELLS: COMPLETE THE BUILD ---------- */
@keyframes upsellSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.upsell-card {
  opacity: 0;
  animation: upsellSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.upsell-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.upsell-add {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffd60a;
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.55);
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.upsell-add:hover {
  transform: scale(1.15) rotate(90deg);
  box-shadow: 0 0 14px 2px rgba(255, 214, 10, 0.45);
}
.upsell-add:active { transform: scale(0.92); }
.upsell-save {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  background: rgba(56, 176, 0, 0.15);
  color: #6ede3b;
  border: 1px solid #38b000;
  white-space: nowrap;
}
.upsell-ship {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  background: rgba(255, 214, 10, 0.12);
  color: #ffd60a;
  border: 1px solid #ffd60a;
  white-space: nowrap;
}
#upsell-badge-row .upsell-badge {
  display: inline-block;
  background: #d00000;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 4px 12px;
  transform: skewX(-8deg);
}