.section-title,
.section-title h2 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center !important;
  margin: 0 auto 0.25rem;
  text-wrap: balance;
}

.section-subtitle,
.section-subtitle p {
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  text-align: center !important;
  margin: 0 auto 1.25rem;
  max-width: 36rem;
}

/* ── Custom Scrollbar ─────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  border: 2px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.6);
}

::-webkit-scrollbar-corner {
  background: #0a0a0a;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) #0a0a0a;
}

/* ── Shop Product Cards — match screenshot layout ─────────────────── */

/* 3-column grid matching the screenshot */
#products-grid.row.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  float: none !important;
}

#products-grid.row.products > [class*="col"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Card base */
#products-grid .card {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#products-grid .card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Large image — square-ish, fills the card top */
#products-grid .card .card-img-top {
  aspect-ratio: 4 / 3 !important;
  background: #141414 !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 0 !important;
}

#products-grid .card .card-img-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Card body */
#products-grid .card .card-body {
  padding: 12px 14px 14px !important;
  background: #0d0d0d !important;
}

/* Product name row: name on left, stock badge on right */
#products-grid .card .info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#products-grid .card .card-title {
  font-family: 'Geist', 'Poppins', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Buy Now button + Starting at price row */
#products-grid .card .overlay {
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#products-grid .card .overlay .btn {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-align: center !important;
  transition: background 0.2s ease !important;
}

#products-grid .card .overlay .btn:hover {
  background: var(--cl-accent) !important;
}

/* Price "Starting at $X.XX" */
#products-grid .card .info .price,
#products-grid .card .price-box {
  text-align: right !important;
  flex-shrink: 0 !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.3 !important;
}

#products-grid .card .info .price strong,
#products-grid .card .price-box strong {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Stock / product count badge */
#products-grid .card .card-img-top .badges div {
  font-size: 0.65rem !important;
  padding: 3px 7px !important;
  border-radius: 99px !important;
  background: rgba(10, 10, 10, 0.85) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 600 !important;
}

/* Best seller badge */
#products-grid .card .card-img-top .badges .best-seller,
#products-grid .card .card-img-top .badges div:has(svg) {
  background: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.85) !important;
  border-color: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.5) !important;
  color: #ffffff !important;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 991px) {
  #products-grid.row.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  #products-grid.row.products {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── Variants — birebir resim tasarımı, kırmızı tema ─────────────── */

/* "VARIANTS" başlık */
.product-wrapper .variants-label,
.product-tabs .variants-label,
label.variants-label,
.variant-section-title {
  font-family: 'Geist', 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.7);
  margin-bottom: 12px;
  display: block;
}

/* Kapsayıcı */
.variants {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Her variant kartı */
.variants .variant {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #0d0d0d !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  position: relative !important;
  gap: 12px !important;
}

/* Hover (seçilmemiş) */
.variants .variant:hover:not(.active) {
  border-color: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.3) !important;
  background: #111111 !important;
}

/* Seçili variant — kırmızı border + kırmızı iç ton */
.variants .variant.active {
  border-color: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.65) !important;
  background: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.08) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent-rgb, 255, 45, 52), 0.25) inset !important;
  color: var(--bs-body-color) !important;
}

/* Sol: isim + stock */
.variants .variant .name-stock {
  text-align: left !important;
  flex: 1 !important;
}

.variants .variant .name {
  font-family: 'Geist', 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}

.variants .variant .description {
  font-family: 'Geist', 'Poppins', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 2px !important;
  white-space: pre-line !important;
}

.variants .variant .stock {
  font-family: 'Geist', 'Poppins', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 0 !important;
}

/* Sağ: fiyat badge */
.variants .variant .price {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-family: 'Geist', 'Poppins', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  /* Seçilmemiş: koyu gri */
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Seçili: kırmızı fiyat badge */
.variants .variant.active .price {
  background: rgba(var(--cl-accent-rgb, 255, 45, 52), 0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(var(--cl-accent-rgb, 255, 45, 52), 0.35) !important;
}

/* Aktif gösterge (check işareti) gizle — tasarımda yok */
.variants .variant .active-indicator {
  display: none !important;
}