@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ================================================
   MƏHSUL KATALOQU — CSS
   Hər şey .mk-wrap altında + !important
   ================================================ */

.mk-wrap {
  font-family: 'DM Sans','Segoe UI',system-ui,sans-serif !important;
  color: #111827 !important;
  line-height: 1.5 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 16px 60px !important;
}
.mk-wrap *, .mk-wrap *::before, .mk-wrap *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
}
.mk-wrap img { display: block !important; max-width: 100% !important; }

/* ── TOOLBAR ── */
.mk-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
}
.mk-search-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 240px !important;
}
.mk-search-box {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}
.mk-search-box svg {
  position: absolute !important;
  left: 12px !important;
  color: #9ca3af !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}
.mk-search-box input[type="text"] {
  width: 100% !important;
  padding: 10px 36px 10px 38px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #111 !important;
  outline: none !important;
  transition: border-color .15s !important;
  -webkit-appearance: none !important;
}
.mk-search-box input:focus { border-color: #374151 !important; }
.mk-clear-s {
  position: absolute !important;
  right: 10px !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.mk-search-btn {
  padding: 10px 22px !important;
  background: #111827 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s !important;
}
.mk-search-btn:hover { background: #374151 !important; }
.mk-count {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ── KATEQORİYA BAR ── */
.mk-cat-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.mk-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 16px !important;
  border-radius: 30px !important;
  border: 1.5px solid #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: all .15s !important;
  cursor: pointer !important;
}
.mk-cat-pill:hover { border-color: #111827 !important; color: #111827 !important; }
.mk-active {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}
.mk-cat-count {
  background: rgba(255,255,255,.2) !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
}
.mk-active .mk-cat-count { background: rgba(255,255,255,.25) !important; color: #fff !important; }
.mk-cat-pill:not(.mk-active) .mk-cat-count { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ── GRİD ── */
.mk-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

/* ── KART ── */
.mk-card {
  background: #fff !important;
  border: 1px solid #e9eaec !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
}
.mk-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
  border-color: #d1d5db !important;
}

.mk-card-img-wrap {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  background: #f9fafb !important;
  text-decoration: none !important;
}
.mk-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease !important;
}
.mk-card:hover .mk-card-img { transform: scale(1.06) !important; }

.mk-card-no-img {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d1d5db !important;
  background: #f9fafb !important;
}
.mk-price-tag {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  z-index: 2 !important;
}
.mk-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(17,24,39,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity .2s !important;
}
.mk-card:hover .mk-card-overlay { opacity: 1 !important; }
.mk-hover-btn {
  background: #fff !important;
  color: #111827 !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: translateY(6px) !important;
  transition: transform .2s !important;
}
.mk-card:hover .mk-hover-btn { transform: translateY(0) !important; }

.mk-card-body {
  padding: 14px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
}
.mk-card-cat {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #6b7280 !important;
  display: block !important;
}
.mk-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.mk-card-title a {
  color: #111827 !important;
  text-decoration: none !important;
}
.mk-card-title a:hover { color: #374151 !important; }
.mk-card-desc {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── BOŞLUQ ── */
.mk-empty {
  text-align: center !important;
  padding: 80px 20px !important;
  color: #9ca3af !important;
}
.mk-empty-icon {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.mk-empty h3 { font-size: 18px !important; font-weight: 700 !important; color: #374151 !important; margin-bottom: 8px !important; }
.mk-empty p  { font-size: 14px !important; color: #9ca3af !important; margin-bottom: 20px !important; }
.mk-reset-btn {
  display: inline-block !important;
  padding: 9px 22px !important;
  background: #111827 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ── PAGİNATİON ── */
.mk-pagi {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.mk-pagi .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: #374151 !important;
  background: #fff !important;
  transition: all .15s !important;
}
.mk-pagi .page-numbers.current,
.mk-pagi .page-numbers:hover {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}

/* ── SİNGLE SƏHİFƏ ── */
.mk-single-page {
  background: #f9fafb !important;
  min-height: 60vh !important;
  padding: 40px 0 60px !important;
}
.mk-single-container {
  max-width: 1020px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
.mk-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  margin-bottom: 24px !important;
  transition: color .15s !important;
}
.mk-back:hover { color: #111 !important; }
.mk-single-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  background: #fff !important;
  border: 1px solid #e9eaec !important;
  border-radius: 18px !important;
  padding: 36px !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.06) !important;
  margin-bottom: 48px !important;
}
.mk-single-img { width:100% !important; border-radius:12px !important; object-fit:cover !important; aspect-ratio:1 !important; }
.mk-single-no-img { aspect-ratio:1 !important; background:#f3f4f6 !important; border-radius:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#d1d5db !important; }
.mk-single-cats { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-bottom:12px !important; }
.mk-single-cat { font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:#6b7280 !important; text-decoration:none !important; background:#f3f4f6 !important; padding:4px 10px !important; border-radius:20px !important; }
.mk-single-title { font-size:clamp(20px,3vw,28px) !important; font-weight:800 !important; line-height:1.2 !important; margin-bottom:14px !important; color:#111 !important; }
.mk-single-price { font-size:24px !important; font-weight:800 !important; color:#111 !important; margin-bottom:20px !important; padding:12px 20px !important; background:#f9fafb !important; border-left:4px solid #111 !important; border-radius:0 8px 8px 0 !important; display:inline-block !important; }
.mk-single-desc { font-size:15px !important; color:#374151 !important; line-height:1.75 !important; margin-bottom:24px !important; }
.mk-single-meta { border-top:1px solid #f3f4f6 !important; padding-top:16px !important; margin-bottom:24px !important; display:flex !important; flex-direction:column !important; gap:8px !important; }
.mk-meta-row { display:flex !important; gap:12px !important; font-size:13px !important; }
.mk-meta-label { color:#9ca3af !important; font-weight:600 !important; min-width:110px !important; }
.mk-meta-val { color:#111 !important; font-weight:600 !important; }
.mk-cta-btn { display:inline-flex !important; align-items:center !important; gap:7px !important; padding:13px 28px !important; background:#111 !important; color:#fff !important; border-radius:10px !important; font-size:14px !important; font-weight:700 !important; text-decoration:none !important; transition:background .15s,transform .15s !important; box-shadow:0 4px 14px rgba(0,0,0,.15) !important; }
.mk-cta-btn:hover { background:#374151 !important; transform:translateY(-1px) !important; color:#fff !important; }
.mk-related-title { font-size:18px !important; font-weight:800 !important; color:#111 !important; margin-bottom:20px !important; padding-bottom:12px !important; border-bottom:2px solid #f3f4f6 !important; }
.mk-related-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:16px !important; }
.mk-related-card { background:#fff !important; border:1px solid #e9eaec !important; border-radius:12px !important; overflow:hidden !important; text-decoration:none !important; display:block !important; transition:transform .15s,box-shadow .15s !important; }
.mk-related-card:hover { transform:translateY(-3px) !important; box-shadow:0 8px 24px rgba(0,0,0,.09) !important; }
.mk-related-img { width:100% !important; aspect-ratio:1 !important; object-fit:cover !important; }
.mk-related-no-img { aspect-ratio:1 !important; background:#f3f4f6 !important; }
.mk-related-name { font-size:13px !important; font-weight:600 !important; color:#111 !important; padding:10px 12px 4px !important; display:block !important; }
.mk-related-price { font-size:12px !important; font-weight:700 !important; color:#6b7280 !important; padding:0 12px 10px !important; display:block !important; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) { .mk-grid { grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:768px)  { 
  .mk-grid { grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .mk-single-grid { grid-template-columns:1fr !important; gap:24px !important; padding:24px !important; }
  .mk-related-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px)  { 
  .mk-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .mk-toolbar { flex-direction:column !important; align-items:stretch !important; }
}