/*
Theme Name: Dhruba Industrial
Theme URI: https://dhrubapower.com/
Author: Dhruba Power Engineering Team
Author URI: https://dhrubapower.com/
Description: Production-ready high-performance industrial product catalog, search, and RFQ theme for Dhruba Power & Engineering. Built for 50,000+ electrical, CCTV, and solar engineering SKUs.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: dhruba-industrial
*/

/* ==========================================================================
   GLOBAL DESIGN TOKENS (Dhruba Power Design System)
   ========================================================================== */
:root {
  --dp-navy: #0B1426;
  --dp-navy-2: #14213D;
  --dp-blue: #1D5F8A;
  --dp-orange: #F5A400;
  --dp-green: #16A66A;
  --dp-bg: #F5F7FA;
  --dp-text: #172033;
  --dp-muted: #667085;
  --dp-border: #D9E1EA;
  --dp-card: #FFFFFF;
  --dp-radius: 6px;
  --dp-shadow-sm: 0 1px 3px rgba(11, 20, 38, 0.08);
  --dp-shadow-md: 0 4px 8px -2px rgba(11, 20, 38, 0.12);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--dp-bg);
  color: var(--dp-text);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.dp-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==========================================================================
   HEADER & TOP UTILITY BAR
   ========================================================================== */
.dp-top-bar {
  background: var(--dp-navy);
  color: #94a3b8;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0;
}
.dp-top-bar a {
  color: #cbd5e1;
  text-decoration: none;
}
.dp-top-bar a:hover {
  color: var(--dp-orange);
}

.dp-main-header {
  background: var(--dp-navy-2);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--dp-shadow-md);
}

.dp-nav-bar {
  background: rgba(11, 20, 38, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem 0;
}
.dp-nav-bar a {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dp-nav-bar a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dp-orange);
}

/* ==========================================================================
   BUTTON & BADGE SYSTEM
   ========================================================================== */
.dp-btn-primary {
  background: var(--dp-orange);
  color: var(--dp-navy);
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--dp-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.dp-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.dp-btn-whatsapp {
  background: var(--dp-green);
  color: #ffffff;
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: var(--dp-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  transition: opacity 0.15s ease;
}
.dp-btn-whatsapp:hover {
  opacity: 0.92;
}

.dp-btn-secondary {
  background: #ffffff;
  color: var(--dp-navy);
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: var(--dp-radius);
  border: 1px solid var(--dp-border);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
}
.dp-btn-secondary:hover {
  border-color: var(--dp-blue);
  color: var(--dp-blue);
}

.dp-badge-instock {
  background: rgba(22, 166, 106, 0.12);
  color: var(--dp-green);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.dp-badge-count {
  background: var(--dp-orange);
  color: var(--dp-navy);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  line-height: 1;
}

/* ==========================================================================
   PRODUCT GRID & CARDS
   ========================================================================== */
.dp-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.dp-card {
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dp-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-2px);
}

.dp-card-img-wrap {
  width: 100%;
  height: 180px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--dp-bg);
  margin-bottom: 0.75rem;
}
.dp-card-img-wrap img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

.dp-spec-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--dp-border);
}

/* ==========================================================================
   MOBILE STICKY BAR
   ========================================================================== */
.dp-sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 0.75rem 1rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .dp-sticky-mobile-cta {
    display: flex;
  }
}
/* Directory cards */
.dp-brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.dp-brand-card{display:flex;flex-direction:column;gap:.35rem;background:var(--dp-card,#fff);border:1px solid var(--dp-border);border-radius:8px;padding:1rem 1.1rem;text-decoration:none;color:var(--dp-text);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.dp-brand-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,20,38,.08);border-color:var(--dp-blue);}
.dp-brand-card strong{font-size:1rem;}
.dp-brand-card span{font-size:.78rem;color:var(--dp-muted);}