body { font-family: 'Segoe UI', sans-serif; background-color: #f3f4f6; }
.lang-bn { font-family: 'Hind Siliguri', sans-serif !important; }

header { position: sticky; top: 0; z-index: 60; }

.slider-img { display: none; animation: fade 1s; border-radius: 5px; }
.slider-img.active { display: block; }

@keyframes fade {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.group:hover .group-hover\:block { display: block; }

:root { --brand: #2563eb; --radius: 5px; }
.brand-text { color: var(--brand) !important; }
.brand-bg { background: var(--brand) !important; }
.r5 { border-radius: var(--radius) !important; }

.dark body { background: #0b1220 !important; }
.dark .bg-white { background: #0f172a !important; }
.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-gray-400 { color: rgba(229,231,235,.75) !important; }
.dark .border,
.dark .border-b,
.dark .border-t { border-color: rgba(255,255,255,.10) !important; }
.dark .bg-gray-50 { background: rgba(255,255,255,.06) !important; }
.toggle-dot { transition: transform .25s ease; }

/* Highlight single line scroll */
#highlightStrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
#highlightStrip::-webkit-scrollbar { height: 6px; }
#highlightStrip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 50px; }

.hCard { min-width: 140px; max-width: 140px; }
@media (min-width: 768px) {
  .hCard { min-width: 160px; max-width: 160px; }
}

.hBadge {
  font-size: 9px !important;
  padding: 2px 6px !important;
  line-height: 1 !important;
}

@media (min-width: 768px) {
  #productGrid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .product-card { padding: 8px !important; }
  .product-title { font-size: 12px !important; line-height: 1.2 !important; }
  .product-price { font-size: 14px !important; }
  .product-btn { padding: 5px 8px !important; font-size: 11px !important; }
}


/* ---- FIX: product popup image crop + allow scroll ---- */
#productModal .modal-content, 
.product-modal .modal-content{
  max-height: 90vh;
  overflow: auto;
}
#productModal img, 
.product-modal img{
  max-width: 100%;
  height: auto;
  object-fit: contain;
}