/* ============================================================
   BERGAMO THEME — CUSTOM CSS
   Layered on top of Tailwind CDN
   ============================================================ */

/* ============================================================
   BRAND PALETTE  (inspired by Bergamo product box design)
   ● Deep brand red   #d41414  — richer than Tailwind red-600
   ● Premium dark     #080202  — warm near-black (box body)
   ● Metallic silver  #b8c4d0  — chrome product accent
   ============================================================ */
:root {
  --bgm-red:        #d41414;
  --bgm-red-hover:  #b81010;
  --bgm-red-glow:   rgba(212,20,20,0.35);
  --bgm-dark:       #080202;
  --bgm-silver:     #b8c4d0;
  --bgm-silver-dim: rgba(184,196,208,0.12);
}

/* Override Tailwind red-600 / red-700 globally with brand red */
.bg-red-600  { background-color: var(--bgm-red)       !important; }
.bg-red-700  { background-color: var(--bgm-red-hover)  !important; }
.hover\:bg-red-700:hover { background-color: var(--bgm-red-hover) !important; }
.active\:bg-red-800:active { background-color: #9e0d0d !important; }
.text-red-600 { color: var(--bgm-red) !important; }
.border-red-600 { border-color: var(--bgm-red) !important; }
.ring-red-600  { --tw-ring-color: var(--bgm-red) !important; }
.focus\:border-red-600:focus { border-color: var(--bgm-red) !important; }
.focus\:ring-red-500:focus   { --tw-ring-color: var(--bgm-red) !important; }

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


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

/* --- Header --- */
/* Full-width bar; explicit backgrounds for both modes */
#bgm-header {
  background: rgba(249,249,249,0.96);
  border-bottom: 1px solid rgba(226,232,240,0.7);
}
.dark #bgm-header {
  background: rgba(8,2,2,0.96);
  border-bottom: 1px solid rgba(184,196,208,0.07); /* metallic silver line */
}
/* When scrolled: fully opaque + premium shadow */
#bgm-header.scrolled {
  background: rgba(255,255,255,1) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,0.07);
}
.dark #bgm-header.scrolled {
  background: rgba(8,2,2,1) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,0.5), 0 1px 0 rgba(184,196,208,0.06);
}

/* --- Hero Slider --- */
.hero-slide { transition: opacity 1s ease-in-out; }
.hero-slide.active-slide { opacity: 1; z-index: 10; }
.slider-dot.active-dot {
  width: 2rem !important;
  height: 0.625rem !important;
  background: #d41414 !important;
  box-shadow: 0 0 10px rgba(212,20,20,0.8);
}

/* ── Smart Search Panel ────────────────────────────────────── */

/* Overlay (panel arxasındakı qaranlıq fon) */
#bgm-search-overlay.open {
  background: rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  pointer-events: auto !important;
}
.dark #bgm-search-overlay.open {
  background: rgba(0,0,0,0.55) !important;
}

/* Panel — açıq vəziyyət */
#bgm-search-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Panel konteyner — centered, max-width */
/* .bgm-sp-wrap — panel eni JS tərəfindən idarə olunur (axtarış sahəsinə uyğunlaşır) */
.bgm-sp-wrap {
  width: 100%;
  padding: 0;
}

/* ── Mobil axtarış input sırası ── */
.bgm-sp-mobile-bar {
  display: none;           /* default: gizli (PC-də görünmür) */
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(226,232,240,0.8);
}
.dark .bgm-sp-mobile-bar { border-bottom-color: rgba(255,255,255,0.1); }

/* Yalnız mobil (< 1024px) göstər */
@media (max-width: 1023px) {
  .bgm-sp-mobile-bar { display: flex; }
}

/* Panel içliyi */
.bgm-sp-inner {
  background: rgba(255,255,255,0.99);
  border: 1px solid rgba(226,232,240,0.85);
  border-top: none;
  border-radius: 0 0 20px 20px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.12),
    0 4px 16px rgba(0,0,0,0.06);
  padding: 14px 18px 20px;
  overflow: hidden;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.dark .bgm-sp-inner {
  background: rgba(30,35,50,0.98);
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.3);
}

/* .bgm-sp-bar artıq istifadəsiz — input başlıqdadır */

/* ── Section başlıq + clear düyməsi ── */
.bgm-sp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bgm-sp-section-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.dark .bgm-sp-section-title { color: #64748b; }
.bgm-sp-section-head .bgm-sp-section-title { margin-bottom: 0; }

.bgm-sp-section-clear {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.15s;
  cursor: pointer;
}
.bgm-sp-section-clear:hover { color: #dc2626; }

/* ── Son axtarış pillləri ── */
.bgm-sp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.bgm-sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  border-radius: 20px;
  background: #f1f5f9;
  border: 1px solid rgba(226,232,240,0.9);
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.bgm-sp-pill:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.dark .bgm-sp-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #cbd5e1; }
.dark .bgm-sp-pill:hover { background: rgba(212,20,20,0.2); border-color: rgba(212,20,20,0.4); color: #f87171; }

/* ── İki sütunlu layout ── */
.bgm-sp-cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .bgm-sp-cols { grid-template-columns: 1fr; gap: 16px; }
  .bgm-sp-col-right { display: none; }
}

/* ── Kateqoriya grid ── */
.bgm-sp-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  justify-items: start;
  direction: ltr !important;
}
.bgm-sp-cat-item {
  display: flex;
  align-items: center;
  flex-direction: row !important;
  justify-content: flex-start !important;
  direction: ltr !important;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
}
.bgm-sp-cat-item:hover { background: rgba(241,245,249,0.95); }
.dark .bgm-sp-cat-item:hover { background: rgba(255,255,255,0.08); }
.bgm-sp-cat-emoji {
  font-size: 17px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dark .bgm-sp-cat-emoji { background: rgba(255,255,255,0.07); }
.bgm-sp-cat-thumb {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.dark .bgm-sp-cat-thumb { border-color: rgba(255,255,255,0.1); }

/* Related products carousel — thin scrollbar */
#bgm-related-scroll::-webkit-scrollbar { height: 4px; }
#bgm-related-scroll::-webkit-scrollbar-track { background: transparent; }
#bgm-related-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.dark #bgm-related-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.bgm-sp-cat-name {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dark .bgm-sp-cat-name { color: #cbd5e1; }

/* ── Yeni məhsul kartları ── */
.bgm-sp-new-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bgm-sp-new-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,0.9);
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.bgm-sp-new-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 6px 20px rgba(212,20,20,0.1);
  transform: translateY(-2px);
}
.dark .bgm-sp-new-card { border-color: rgba(255,255,255,0.08); }
.dark .bgm-sp-new-card:hover { border-color: rgba(212,20,20,0.45); }
.bgm-sp-new-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f8fafc;
}
.dark .bgm-sp-new-img { background: rgba(255,255,255,0.05); }
.bgm-sp-new-img img { width: 100%; height: 100%; object-fit: cover; }
.bgm-sp-new-info { padding: 8px 9px 10px; }
.bgm-sp-new-code {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}
.bgm-sp-new-title {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dark .bgm-sp-new-title { color: #f1f5f9; }

/* ── Nəticə grid (axtarış zamanı) ── */
.bgm-sp-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .bgm-sp-res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .bgm-sp-res-grid { grid-template-columns: 1fr; } }

.bgm-sp-res-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,0.9);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  display: block;
  animation: bgmSpFadeIn 0.18s ease both;
}
.bgm-sp-res-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 6px 20px rgba(212,20,20,0.1);
  transform: translateY(-2px);
}
.dark .bgm-sp-res-card { border-color: rgba(255,255,255,0.08); }
.dark .bgm-sp-res-card:hover { border-color: rgba(212,20,20,0.45); }
.bgm-sp-res-img {
  aspect-ratio: 4/3;
  background: #f8fafc;
  overflow: hidden;
}
.dark .bgm-sp-res-img { background: rgba(255,255,255,0.05); }
.bgm-sp-res-img img { width: 100%; height: 100%; object-fit: cover; }
.bgm-sp-res-body { padding: 9px 10px 11px; }
.bgm-sp-res-code {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 3px;
}
.bgm-sp-res-title {
  font-size: 12px; font-weight: 700;
  color: #1e293b; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.dark .bgm-sp-res-title { color: #f1f5f9; }

/* ── Skeleton loaders ── */
@keyframes bgmShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.bgm-sp-skel-row {
  height: 40px; border-radius: 10px; margin-bottom: 2px;
  background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size: 200% 100%;
  animation: bgmShimmer 1.4s infinite;
}
.bgm-sp-skel-card {
  aspect-ratio: 4/3; border-radius: 12px;
  background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size: 200% 100%;
  animation: bgmShimmer 1.4s infinite;
}
.dark .bgm-sp-skel-row, .dark .bgm-sp-skel-card {
  background: linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
}

/* ── Fade-in animation ── */
@keyframes bgmSpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Yükləmə spinner ── */
.bgm-sp-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 28px 0;
  font-size: 13px; font-weight: 500; color: #94a3b8;
}
.bgm-sp-loading svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── "Hamısını gör" düyməsi ── */
.bgm-sp-see-all {
  display: flex; justify-content: center;
  margin-top: 12px;
}
.bgm-sp-see-all a {
  display: inline-flex; align-items: center; gap-8px;
  padding: 9px 24px;
  border-radius: 30px;
  background: #0f172a;
  color: #fff;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.bgm-sp-see-all a:hover { background: #d41414; }
.dark .bgm-sp-see-all a { background: rgba(255,255,255,0.12); }
.dark .bgm-sp-see-all a:hover { background: #d41414; }

/* ── "Nəticə yoxdur" məlumatı ── */
.bgm-sp-no-result {
  text-align: center; padding: 28px 0;
  font-size: 15px; font-weight: 600; color: #94a3b8;
}
.dark .bgm-sp-no-result { color: #4b5563; }

/* --- Mobile Menu --- */
/* overflow:hidden clips the off-screen drawer (translate-x-full) so it
   doesn't create a horizontal scroll on mobile when the menu is closed */
#bgm-mobile-menu { overflow: hidden; }
#bgm-mobile-menu.open { opacity: 1; visibility: visible; }
/* Open: CSS forces drawer to translateX(0) — transition fires from translate-x-full class */
#bgm-mobile-menu.open #bgm-menu-drawer {
  transform: translateX(0) !important;
}
/* Closing: slide drawer back out + fade wrapper — overrides .open rule (same specificity, later in file) */
#bgm-mobile-menu.bgm-closing {
  opacity: 0 !important;
  pointer-events: none;
}
#bgm-mobile-menu.bgm-closing #bgm-menu-drawer {
  transform: translateX(100%) !important;
}

/* --- Lang Dropdown --- */
.lang-dropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Filter Sidebar --- */
.filter-sidebar-slide {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.filter-sidebar-slide.open { transform: translateX(0) !important; }

@media (min-width: 1024px) {
  .filter-sidebar-slide {
    position: sticky !important;
    transform: none !important;
    height: auto;
    width: auto;
    max-width: none;
  }
}

/* Filter scroll stilləri */
.bgm-filter-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(150,150,150,0.3) transparent;
}
.bgm-filter-scroll::-webkit-scrollbar { width: 4px; }
.bgm-filter-scroll::-webkit-scrollbar-track { background: transparent; }
.bgm-filter-scroll::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.3); border-radius: 4px; }
.bgm-filter-scroll::-webkit-scrollbar-thumb:hover { background: rgba(150,150,150,0.5); }

/* --- Product Card --- */
.product-card:focus { outline: 2px solid #d41414; outline-offset: 2px; }

/* --- Compare Button Active State --- */
.compare-btn.compare-active {
  background: #d41414 !important;
  border-color: #d41414 !important;
  color: #fff !important;
}
.compare-btn.compare-active .bgm-compare-icon { display: none !important; }
.compare-btn.compare-active .bgm-check-icon  { display: block !important; }
.compare-btn:not(.compare-active) .bgm-compare-icon { display: block; }
.compare-btn:not(.compare-active) .bgm-check-icon  { display: none; }

/* --- Quote Modal --- */
#bgm-quote-modal.active,
#bgm-compare-empty.hidden { display: none !important; }
#bgm-quote-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Compare Table --- */
#bgm-compare-table-wrapper.hidden { display: none; }
#bgm-compare-empty.hidden { display: none; }

/* --- Animations --- */
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --- Dark mode backgrounds (handled via JS + class toggle) --- */
body { background-color: #f9f9f9; transition: background-color 0.25s ease; }
.dark body { background-color: var(--bgm-dark); }

/* --- Dark mode smooth switch: sync ALL elements with bg-panel transition speed --- */
/* When data-bgm-switching is set (only during toggle), all bg/color transitions align */
html[data-bgm-switching] *,
html[data-bgm-switching] *::before,
html[data-bgm-switching] *::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.25s ease,
    box-shadow       0.25s ease !important;
}
/* Bg panels switch instantly via JS (transition: none set inline) —
   override any Tailwind transition classes to prevent backdrop-filter mixing */
#bgm-bg-dark,
#bgm-bg-light {
  transition: none !important;
}

/* Header and body must ALSO switch instantly during the toggle — the header's
   backdrop-filter blurs whatever is behind it, so if body or header-inner are
   mid-transition the blur looks dark. Instant switch eliminates the artifact.
   All other elements still animate smoothly via the rule above.                */
html[data-bgm-switching] #bgm-header,
html[data-bgm-switching] body {
  transition: none !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d41414; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b91c1c; }

/* --- Mobile catalog list transition --- */
#bgm-mobile-cat-list.open {
  max-height: 2000px !important;
  opacity: 1 !important;
}
#bgm-mobile-cat-chevron.rotated { transform: rotate(180deg); }

/* --- Misc utility --- */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* bgm-search-card → yeni bgm-sp-res-card ilə əvəzləndi */

/* --- Gallery thumb active --- */
.gallery-thumb { cursor: pointer; transition: all 0.2s; }
.gallery-thumb.active { border-color: #d41414 !important; opacity: 1 !important; transform: scale(1.02); }

/* --- Mega Menu — JS-controlled, fixed positioned, body-level --- */

/* Qaranlıq overlay — panel açılanda saytın arxa planı dim olur */
#bgm-mega-overlay {
  position: fixed;
  inset: 0;
  top: 64px;           /* header hündürlüyü qədər */
  background: rgba(0, 0, 0, 0);
  z-index: 89;         /* panel altında (90), header üstündə (50) */
  pointer-events: none;
  transition: background 0.25s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
#bgm-mega-overlay.active {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}
.dark #bgm-mega-overlay.active {
  background: rgba(0, 0, 0, 0.45);
}

/* Panel özü */
#bgm-mega-panel {
  position: fixed;
  top: 64px;           /* header hündürlüyünə bərabər */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(960px, 96vw);
  z-index: 90;         /* header 50 üzərində, search 200 altında */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity      0.22s ease,
    visibility   0.22s ease,
    transform    0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
#bgm-mega-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Panel içliyi */
.bgm-mega-inner {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  padding: 24px 28px 28px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px  rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255,255,255,0.8) inset;
  overflow: hidden;
  position: relative;
}
.dark .bgm-mega-inner {
  background: rgba(30, 35, 50, 0.97);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px  rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}

/* Kateqoriya grid: 4 sütun, responsive */
.bgm-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
@media (max-width: 1200px) { .bgm-mega-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .bgm-mega-grid { grid-template-columns: repeat(2, 1fr); } }

/* Hər kateqoriya elementi */
.bgm-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s ease;
  cursor: pointer;
}
.bgm-mega-item:hover {
  background: rgba(241, 245, 249, 0.9);
}
.dark .bgm-mega-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* İkon dairəsi */
.bgm-mega-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, background 0.18s;
}

/* Etiket mətni */
.bgm-mega-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #1e293b;
  transition: color 0.18s;
}
.dark .bgm-mega-label {
  color: #cbd5e1;
}

/* Catalog düyməsi chevron — aktiv olduqda 180° döndər */
#bgm-catalog-chevron.mega-open {
  transform: rotate(180deg);
}


/* --- Product description tabs --- */
.bgm-desc-tab { cursor: pointer; transition: all 0.2s; }
.bgm-desc-tab.active { color: #d41414; border-color: #d41414; }
.bgm-desc-panel { display: none; }
.bgm-desc-panel.active { display: block; }

/* --- Long description: headings --- */
.prose h1 { font-size: 1.9rem;  font-weight: 800; line-height: 1.25; margin: 1.75rem 0 1rem;   color: #1e293b; }
.prose h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.3;  margin: 1.5rem  0 0.75rem; color: #1e293b; border-bottom: 2px solid #d41414; padding-bottom: 0.35rem; }
.prose h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin: 1.25rem 0 0.5rem;  color: #1e293b; }
.prose h4 { font-size: 1.1rem;  font-weight: 600; line-height: 1.4;  margin: 1rem    0 0.5rem;  color: #1e293b; }
.prose h5,
.prose h6 { font-size: 1rem;   font-weight: 600; line-height: 1.4;  margin: 0.875rem 0 0.4rem; color: #334155; }
.dark .prose h1, .dark .prose h2, .dark .prose h3,
.dark .prose h4, .dark .prose h5, .dark .prose h6 { color: #f1f5f9; }
.dark .prose h2 { border-bottom-color: rgba(212,20,20,0.5); }

/* --- Long description: paragraph spacing --- */
.prose p { margin: 0.75rem 0; }

/* --- Long description: lists --- */
.prose ul { list-style: disc;    padding-left: 1.5rem; margin: 0.75rem 0; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
.prose li { margin: 0.35rem 0; line-height: 1.7; }
.prose ul ul, .prose ol ul { list-style: circle; }
.prose ul ol, .prose ol ol { list-style: lower-alpha; }

/* --- Long description: inline styles --- */
.prose strong, .prose b { font-weight: 700; color: #1e293b; }
.dark .prose strong, .dark .prose b { color: #f1f5f9; }
.prose em, .prose i { font-style: italic; }
.prose a { color: #d41414; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #b91c1c; }
.prose blockquote { border-left: 4px solid #d41414; padding: 0.5rem 0 0.5rem 1rem; color: #64748b; font-style: italic; margin: 1.25rem 0; background: #fff5f5; border-radius: 0 8px 8px 0; }
.dark .prose blockquote { background: rgba(212,20,20,0.06); color: #94a3b8; }
.prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.5rem 0; }
.dark .prose hr { border-top-color: rgba(255,255,255,0.1); }

/* --- Long description: images + code never overflow on mobile --- */
.prose img { max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 1rem auto; }
.prose pre  { overflow-x: auto; white-space: pre; background: #f1f5f9; border-radius: 8px; padding: 1rem; }
.dark .prose pre { background: rgba(255,255,255,0.05); }
.prose code { word-break: break-word; background: #f1f5f9; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875em; }
.dark .prose code { background: rgba(255,255,255,0.08); }

/* --- Long description: table styling (border lines visible) --- */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9rem;
  border-radius: 8px;
  overflow: hidden;
}
.prose table th,
.prose table td {
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
}
.prose table thead tr {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
}
.prose table tbody tr:nth-child(even) {
  background: #f8fafc;
}
.prose table tbody tr:hover {
  background: #fef2f2;
}
/* Dark mode table */
.dark .prose table th,
.dark .prose table td {
  border-color: rgba(255,255,255,0.1);
}
.dark .prose table thead tr {
  background: rgba(255,255,255,0.07);
  color: #f1f5f9;
}
.dark .prose table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
.dark .prose table tbody tr:hover {
  background: rgba(212,20,20,0.07);
}

/* ── Long Description Gradient Overlay ─────────────────────────── */
#bgm-longdesc-gradient {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
}
.dark #bgm-longdesc-gradient {
  background: linear-gradient(to bottom, transparent, rgba(17,17,17,0.95));
}

/* ═══════════════════════════════════════════════════════════════
   ENERGY EFFICIENCY LABEL  — EU-style badge shown on product cards
   ═══════════════════════════════════════════════════════════════ */
.bgm-energy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: #16a34a;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
  padding-right: 14px;
}
@media (max-width: 639px) {
  .bgm-energy-badge--sm {
    font-size: 9px;
    padding: 1px 10px 1px 4px;
    gap: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPARE PAGE — view mode tabs + table layout
   ═══════════════════════════════════════════════════════════════ */

/* ── View mode toggle tabs ───────────────────────────────────── */
.bgm-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
  color: #64748b;
  background: none;
  border: none;
  outline: none;
  white-space: nowrap;
  line-height: 1;
}
.bgm-view-tab:hover { color: #d41414; }
.bgm-view-tab.active { background: #d41414; color: #fff; }
.dark .bgm-view-tab { color: #9ca3af; }
.dark .bgm-view-tab:hover { color: #fca5a5; }
.dark .bgm-view-tab.active { background: #d41414; color: #fff; }

/* ── Compare table rows ──────────────────────────────────────── */
.bgm-cmp-row {
  display: flex;
  border-bottom: 1px solid rgba(226,232,240,0.8);
}
.dark .bgm-cmp-row { border-bottom-color: rgba(255,255,255,0.07); }
.bgm-cmp-row:last-child { border-bottom: none; }
.bgm-cmp-row.alt { background: rgba(248,250,252,0.5); }
.dark .bgm-cmp-row.alt { background: rgba(255,255,255,0.02); }
.bgm-cmp-row.cat-row { background: rgba(241,245,249,0.6); }
.dark .bgm-cmp-row.cat-row { background: rgba(255,255,255,0.03); }

/* Diff highlight */
.bgm-cmp-row.diff { background: rgba(254,226,226,0.25); }
.dark .bgm-cmp-row.diff { background: rgba(127,29,29,0.12); }
.bgm-cmp-row.diff .bgm-cmp-col span:not(.bgm-cmp-dash) {
  font-weight: 700;
  color: #8f0e0e;
}
.dark .bgm-cmp-row.diff .bgm-cmp-col span:not(.bgm-cmp-dash) { color: #fca5a5; }

/* Sim highlight */
.bgm-cmp-row.sim { background: rgba(220,252,231,0.3); }
.dark .bgm-cmp-row.sim { background: rgba(20,83,45,0.12); }
.bgm-cmp-row.sim .bgm-cmp-col span:not(.bgm-cmp-dash) {
  font-weight: 700;
  color: #166534;
}
.dark .bgm-cmp-row.sim .bgm-cmp-col span:not(.bgm-cmp-dash) { color: #86efac; }

/* ── Label column (sticky left) ──────────────────────────────── */
.bgm-cmp-lbl {
  width: 138px;
  min-width: 138px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 10;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #475569;
  background: rgba(248,250,252,0.98);
  border-right: 1px solid rgba(226,232,240,0.8);
}
.dark .bgm-cmp-lbl {
  color: #94a3b8;
  background: rgba(17,17,17,0.98);
  border-right-color: rgba(255,255,255,0.07);
}
.bgm-cmp-lbl.alt {
  background: rgba(241,245,249,0.98);
}
.dark .bgm-cmp-lbl.alt { background: rgba(20,20,20,0.98); }
.bgm-cmp-lbl.head {
  align-items: flex-end;
  padding-bottom: 18px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #94a3b8;
  background: rgba(248,250,252,0.98);
}
.dark .bgm-cmp-lbl.head { background: rgba(17,17,17,0.98); color: #4b5563; }

/* ── Product / value columns ─────────────────────────────────── */
.bgm-cmp-col {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  border-left: 1px solid rgba(226,232,240,0.7);
}
.dark .bgm-cmp-col {
  color: #cbd5e1;
  border-left-color: rgba(255,255,255,0.06);
}
.bgm-cmp-col.head {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 12px 16px;
  font-weight: 700;
  font-size: 13px;
  position: relative;
}
.bgm-cmp-col.empty {
  min-width: 130px;
  background: rgba(248,250,252,0.4);
  border-left-style: dashed;
}
.dark .bgm-cmp-col.empty { background: rgba(255,255,255,0.015); }
.bgm-cmp-col.empty.head {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
}

/* ── Dash placeholder ────────────────────────────────────────── */
.bgm-cmp-dash { color: #cbd5e1 !important; font-weight: 400 !important; }
.dark .bgm-cmp-dash { color: #374151 !important; }

/* ── Remove button ───────────────────────────────────────────── */
.bgm-cmp-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #64748b;
  transition: background .2s, color .2s;
  line-height: 1;
  flex-shrink: 0;
}
.bgm-cmp-remove-btn:hover { background: #d41414; color: #fff; }
.dark .bgm-cmp-remove-btn { background: rgba(255,255,255,0.08); color: #9ca3af; }
.dark .bgm-cmp-remove-btn:hover { background: #d41414; color: #fff; }

/* ── Product image wrapper ───────────────────────────────────── */
.bgm-cmp-img-wrap {
  display: block;
  width: 82px; height: 82px;
  border-radius: 12px;
  background: #f1f5f9;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.dark .bgm-cmp-img-wrap { background: #1a1a1a; }
.bgm-cmp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.bgm-cmp-img-wrap:hover img { transform: scale(1.1); }

/* ── Product title ───────────────────────────────────────────── */
.bgm-cmp-prod-title {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: #1e293b;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  transition: color .2s;
}
.bgm-cmp-prod-title:hover { color: #d41414; }
.dark .bgm-cmp-prod-title { color: #f1f5f9; }
.dark .bgm-cmp-prod-title:hover { color: #f87171; }

/* ── Product code ────────────────────────────────────────────── */
.bgm-cmp-prod-code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ── Add product (+) button ──────────────────────────────────── */
.bgm-cmp-add-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: #94a3b8;
  text-decoration: none;
  transition: border-color .2s, color .2s;
  line-height: 1;
}
.bgm-cmp-add-btn:hover { border-color: #d41414; color: #d41414; }
.dark .bgm-cmp-add-btn { border-color: #374151; color: #4b5563; }
.dark .bgm-cmp-add-btn:hover { border-color: #d41414; color: #f87171; }

/* ── Add product label ───────────────────────────────────────── */
.bgm-cmp-add-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
  max-width: 100px;
}
.dark .bgm-cmp-add-label { color: #4b5563; }

/* ── Responsive: narrow screens ─────────────────────────────── */
@media (max-width: 480px) {
  .bgm-cmp-lbl { width: 110px; min-width: 110px; font-size: 11px; padding: 8px 10px; }
  .bgm-cmp-col { min-width: 140px; font-size: 11px; padding: 8px 10px; }
  .bgm-cmp-col.empty { min-width: 110px; }
  .bgm-cmp-img-wrap { width: 64px; height: 64px; }
  .bgm-cmp-prod-title { font-size: 11px; }
  .bgm-view-tab { padding: 6px 10px; font-size: 11px; }
}

/* ── Features section background (dark-mode safe) ───────────── */
.bgm-features-section { background: rgba(255,255,255,0.3); }
.dark .bgm-features-section { background: rgba(10,5,5,0.5); }

/* ============================================================
   METALLIC SILVER ACCENTS  (box chrome/product aesthetic)
   ============================================================ */

/* Scrollbar — metallic gradient */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d41414 0%, #9e0d0d 100%);
  border-radius: 3px;
}
::-webkit-scrollbar-track { background: #f1f5f9; }
.dark ::-webkit-scrollbar-track { background: #0f0505; }

/* Slider dot active glow — matches brand red */
.slider-dot.active-dot {
  box-shadow: 0 0 10px rgba(212,20,20,0.85), 0 0 20px rgba(212,20,20,0.3) !important;
}

/* Product cards dark mode — subtle metallic border */
.dark .product-card {
  border-color: rgba(184,196,208,0.08) !important;
}
.dark .product-card:hover {
  border-color: rgba(184,196,208,0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(184,196,208,0.12) !important;
}

/* Section dividers dark mode — metallic line */
.dark .border-slate-200,
.dark [class*="border-slate-200"] {
  border-color: rgba(184,196,208,0.08) !important;
}

/* Header search bar dark — metallic tint */
.dark #bgm-search-wrap {
  background: rgba(20,10,10,0.6) !important;
  border-color: rgba(184,196,208,0.12) !important;
}
.dark #bgm-search-wrap:hover {
  background: rgba(30,14,14,0.8) !important;
  border-color: rgba(184,196,208,0.22) !important;
}

/* Header search wrap — aktiv (panel açıq) vəziyyət */
#bgm-search-wrap.bgm-search-active {
  border-color: #d41414 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(212,20,20,0.08);
}
.dark #bgm-search-wrap.bgm-search-active {
  background: rgba(30,35,50,0.98) !important;
  border-color: rgba(212,20,20,0.5) !important;
  box-shadow: 0 0 0 3px rgba(212,20,20,0.1);
}

/* Compare table dark — metallic row separator */
.dark .bgm-cmp-row {
  border-bottom-color: rgba(184,196,208,0.07) !important;
}
.dark .bgm-cmp-lbl {
  background: rgba(8,2,2,0.95) !important;
}

/* Hero slider overlay — richer dark */
.dark .hero-slide { filter: brightness(0.92); }

/* ── Product Group Cards — mobile aspect ratio fix ───────── */
@media (max-width: 639px) {
  .bgm-pgroup-card { aspect-ratio: 3/3.5 !important; }
}

/* ============================================================
   SILVER LOGO  — dark mode metallic effect
   Target: ~#b8c4d0 (our --bgm-silver)
   brightness(0) → all black, then invert+tint to silver-gray
   ============================================================ */
.dark .bgm-logo {
  filter: brightness(0) invert(1) sepia(0.15) hue-rotate(190deg) saturate(0.45) brightness(0.84);
}