/* ════════════════════════════════════════════════════════════════
   DEAR IT SOLUTION — JOURNAL 3 CUSTOM CSS (MASTER v3, FULL REWRITE)
   ─────────────────────────────────────────────────────────────────
   SECTION 1  Fonts import  (MUST stay at the very top — never
              paste anything above the @import line!)
   SECTION 2  Font variables + layout helpers
   SECTION 3  Site-wide typography system (Oxanium + Jakarta)
   SECTION 4  MOTHERBOARD DARK RESKIN — Journal header
              (full black skin + circuit traceline + terminal
              search + chip-style cart; Journal's own header,
              menu, login/registration all stay fully functional)
   SECTION 5  Widget & lazyload fixes
   SECTION 6  DEARSOFT MOTHERBOARD FOOTER — font guards
   ════════════════════════════════════════════════════════════════ */


/* ═══ SECTION 1: GOOGLE FONTS IMPORT ═══
   WARNING: @import is ignored by browsers if ANY rule appears
   before it. Keep this as line 1 of the custom CSS forever. */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&family=Chakra+Petch:wght@600;700&display=swap');


/* ═══ SECTION 2: ROOT VARIABLES + LAYOUT HELPERS ═══ */
:root {
  --font-heading: 'Oxanium', 'Trebuchet MS', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Trebuchet MS', sans-serif;
  --font-mono: 'JetBrains Mono', 'Oxanium', monospace;

  /* Motherboard palette */
  --mb-bg: #070809;
  --mb-panel: #0d0f11;
  --mb-copper: #e8a15c;
  --mb-orange: #ff7a1a;
  --mb-text: #eef1f4;
  --mb-dim: rgba(238, 241, 244, .55);
  --mb-line: rgba(232, 161, 92, .16);
}

.well-sm {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 1000px;
}


/* ═══ SECTION 3: SITE-WIDE TYPOGRAPHY SYSTEM ═══ */

/* ── Global base: body uses Jakarta ── */
body,
html {
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.fa, .fa-star-o {
    font-family: 'FontAwesome' !important;
}
.scroll-top {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}


/* ── Site logo: Oxanium Bold (striking, techy) ── */
.logo,
.logo a,
.logo span,
.site-name,
[class*="site-logo"] a,
[class*="brand"] a {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ── Navigation: Jakarta Medium (clean, readable) ── */
.j-menu li a,
.j-menu > li > a,
.main-menu li a,
.bottom-menu li a,
.top-menu-14 .j-menu li a,
nav a,
.nav a,
.navbar a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

/* ── Page headings: Oxanium (powerful, geometric) ── */
h1, h2, h3, h4, h5, h6,
.page-title,
.module-title,
.section-title,
.category-title,
.product-heading {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

/* ── Product page title: Jakarta (long names read better) ── */
.product-info h1,
.product-info .product-title,
.product-info h2 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.3px !important;
  color: #1A1A2E !important;
}

/* ── Product price: Oxanium (numbers look amazing) ── */
.product-price,
.price,
.product-info .price,
.p_price,
.p_s_price,
[class*="price"] {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* Large product price display */
.product-info .product-price-group .price {
  font-size: 28px !important;
}

/* ── Product grid: card titles ── */
.product-grid .product-thumb .name a,
.product-thumb .name a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.1px !important;
}

/* Product price in grid */
.product-thumb .price,
.product-grid .price {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* ── Badges: Brand / Model / Stock / SKU
      (Jakarta for labels, Oxanium for values) ── */
.product-manufacturer,
.product-model,
.product-stock,
.product-sku,
.product-mpn,
.product-code,
.product-jan {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
}

/* Model/SKU codes look sharp in Oxanium */
.product-model .data-value,
.product-sku .data-value,
.product-code .data-value {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* ── Buttons: Oxanium (bold, tech character) ── */
.btn,
button,
input[type="submit"],
input[type="button"],
.button,
[class*="btn-"] {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* WhatsApp & special action buttons */
a[href*="whatsapp"],
.btn-whatsapp {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}

/* ── Specification / description tabs ── */
.module-blocks-307 .nav-tabs > li > a,
.nav-tabs li a,
.tab a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

/* Spec table labels */
.product-attribute,
.spec-label,
.attribute-label {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #555 !important;
}

/* Spec table values */
.spec-value,
.attribute-value,
.product-attribute + * {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

/* ── Key features list: Jakarta for easy reading ── */
.module-features-description ul li,
.short-description li,
.product-description li,
.description li {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* ── Category names ── */
.category-name,
.refine-name,
.catalog-title {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ── Section titles / module headers: Oxanium ── */
.module-title h3,
.module-title h4,
.panel-title,
.block-title,
[class*="module-"] h3,
[class*="module-"] h4 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
}

/* ── Footer (Journal's own footer areas) ── */
footer,
.footer,
[class*="footer"] {
  font-family: var(--font-body) !important;
}

/* ── Search & form inputs: Jakarta ── */
input[type="text"],
input[type="search"],
input[placeholder*="Search"],
.search-input,
.form-control {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* ── Desktop list items & stats ── */
.desktop_list,
.stats-itams {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── Side menu floating buttons ── */
.side-menu > ul > li {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ── Breadcrumb ── */
.breadcrumb,
.breadcrumb li,
.breadcrumb a {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
}

/* ── Disclaimer / legal text ── */
.disclaimer,
small,
.text-muted,
.help-text {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4: MOTHERBOARD DARK RESKIN — JOURNAL HEADER
   ─────────────────────────────────────────────────────────────────
   Journal er nijer header-i thake: logo, mega menu, login /
   registration, account, compare — sob Journal admin theke
   control hoy, kono feature hariye jay na. Ei section sudhu
   look ta bodlay: full-black motherboard skin, copper borders,
   orange signal, terminal-style search, chip-style cart, ar
   header er niche animated circuit traceline.
   (Traceline er markup header.twig e ache: .dh-traceline)
   ═══════════════════════════════════════════════════════════════ */

/* ── 4.1 Backgrounds: full black, every header row ── */
.site-wrapper > header[class*="header-"],
header[class*="header-"] .top-bar,
header[class*="header-"] .mid-bar,
header[class*="header-"] .header-content,
header[class*="header-"] .desktop-main-menu-wrapper,
header[class*="header-"] .main-menu-wrapper,
header[class*="header-"] .header-menu-wrapper,
header[class*="header-"] .mobile-bar,
header[class*="header-"] .mobile-header,
header[class*="header-"] .mobile-wrapper,
.desktop-header-active .header,
.mobile-header-active .header {
  background: var(--mb-bg) !important;
}

/* Row separators: thin copper lines */
header[class*="header-"] .top-bar {
  border-bottom: 1px solid var(--mb-line) !important;
}

header[class*="header-"] .desktop-main-menu-wrapper,
header[class*="header-"] .main-menu-wrapper {
  border-top: 1px solid var(--mb-line) !important;
  box-shadow: none !important;
}

/* ── 4.2 Links & text: dim white, orange signal on hover
      (login / registration / account / compare icons included —
      they all live inside header links, so they follow this) ── */
header[class*="header-"] a,
header[class*="header-"] .links-text,
header[class*="header-"] .top-menu a,
header[class*="header-"] .j-menu > li > a {
  color: var(--mb-dim) !important;
  background: transparent !important;
}

header[class*="header-"] a:hover,
header[class*="header-"] a:hover .links-text,
header[class*="header-"] .j-menu > li > a:hover,
header[class*="header-"] .j-menu > li:hover > a {
  color: var(--mb-orange) !important;
  background: rgba(255, 122, 26, .07) !important;
}

/* Header icon fonts follow link color */
header[class*="header-"] a i,
header[class*="header-"] a::before {
  color: inherit !important;
}

/* ── 4.3 Dropdowns inside header: dark panels
      (account dropdown, language/currency, mega menu) ── */
header[class*="header-"] .dropdown-menu,
header[class*="header-"] .j-dropdown,
header[class*="header-"] .mega-menu-content {
  background: var(--mb-panel) !important;
  border: 1px solid rgba(232, 161, 92, .2) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
}

header[class*="header-"] .dropdown-menu a,
header[class*="header-"] .j-dropdown a {
  color: rgba(238, 241, 244, .6) !important;
}

header[class*="header-"] .dropdown-menu a:hover,
header[class*="header-"] .j-dropdown a:hover {
  color: var(--mb-orange) !important;
}

/* ── 4.4 SEARCH: terminal style (dark box, mono font,
      orange caret + focus glow) ── */
header[class*="header-"] input[name="search"],
.header-search input,
.search-header-wrapper input {
  background: var(--mb-panel) !important;
  border: 1px solid rgba(232, 161, 92, .25) !important;
  border-radius: 6px !important;
  color: var(--mb-text) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  caret-color: var(--mb-orange);
  box-shadow: none !important;
  transition: border-color .25s, box-shadow .25s;
}

header[class*="header-"] input[name="search"]:focus,
.header-search input:focus,
.search-header-wrapper input:focus {
  border-color: rgba(255, 122, 26, .55) !important;
  box-shadow: 0 0 16px rgba(255, 122, 26, .14) !important;
  outline: none !important;
}

header[class*="header-"] input[name="search"]::placeholder,
.header-search input::placeholder,
.search-header-wrapper input::placeholder {
  color: rgba(238, 241, 244, .3) !important;
}

/* Search icon/button: orange signal */
.header-search .search-button,
.header-search button,
.search-header-wrapper .search-button,
header[class*="header-"] .search-button {
  background: transparent !important;
  border: none !important;
  color: var(--mb-orange) !important;
}

.header-search .search-button i,
.search-header-wrapper .search-button i {
  color: var(--mb-orange) !important;
}

/* ── 4.5 CART: IC-chip style (dark box, copper border,
      orange icon + glowing count badge) ── */
#cart,
#cart > a,
#cart .cart-heading,
.header-cart .cart-heading,
.header-cart > button {
  background: var(--mb-panel) !important;
  border: 1px solid rgba(232, 161, 92, .28) !important;
  border-radius: 6px !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
  transition: border-color .22s, box-shadow .22s;
}

#cart:hover,
#cart .cart-heading:hover,
.header-cart .cart-heading:hover {
  border-color: rgba(255, 122, 26, .55) !important;
  box-shadow: 0 0 14px rgba(255, 122, 26, .16) !important;
}

#cart .cart-heading span,
#cart .cart-total,
.header-cart .cart-total {
  color: var(--mb-text) !important;
  font-family: 'Chakra Petch', 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

#cart .cart-heading i,
.header-cart i {
  color: var(--mb-orange) !important;
}

/* Cart count badge: orange solder dot */
#cart .cart-count,
#cart .count-badge,
.header-cart .cart-count,
.header-cart .count-badge,
.cart-count-total {
  background: var(--mb-orange) !important;
  color: var(--mb-bg) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(255, 122, 26, .6) !important;
  border: none !important;
}

/* Cart dropdown content: dark panel */
#cart .cart-content,
.cart-content {
  background: var(--mb-panel) !important;
  border: 1px solid rgba(232, 161, 92, .2) !important;
  color: rgba(238, 241, 244, .7) !important;
}

/* ── 4.6 TRACELINE: animated circuit light under the header
      (markup lives in header.twig as .dh-traceline) ── */
.dh-traceline {
  position: relative;
  height: 42px;
  background: var(--mb-bg);
  border-top: 1px solid var(--mb-line);
  border-bottom: 1px solid var(--mb-line);
  overflow: hidden;
}

.dh-traceline svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.dh-trace-path {
  fill: none;
  stroke: rgba(232, 161, 92, .30);
  stroke-width: 1.5;
}

.dh-trace-node {
  fill: var(--mb-bg);
  stroke: rgba(232, 161, 92, .55);
  stroke-width: 1.5;
}

.dh-pulse {
  fill: none;
  stroke: var(--mb-orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 70 1400;
  filter: drop-shadow(0 0 5px rgba(255, 122, 26, .8));
  animation: dh-pulse-run 7s linear infinite;
}

@keyframes dh-pulse-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 1470; }
}

@media (max-width: 768px) {
  .dh-traceline { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .dh-pulse { animation: none; opacity: 0; }
}


/* ═══ SECTION 5: WIDGET & LAZYLOAD FIXES ═══ */

/* ── AI chat widget button (eab): merged from duplicate rules.
      bottom 78px = lifted above other floating buttons;
      z-index keeps it above the chat container ── */
button#eab-widget-btn {
  bottom: 78px !important;
  right: 18px;
  z-index: 99999;
}

/* When chat is open, drop the button lower so it never blocks
   the chat input */
button#eab-widget-btn.active {
  bottom: 20px !important;
  transition: bottom 0.3s ease;
}

/* ── Lazyload safety: images must never stay invisible,
      whether the lazyload script succeeds or fails ── */
.lazyload,
.lazyloaded {
  opacity: 1 !important;
  transition: opacity 0.3s ease-in;
}

/* Hide the empty <img> box until a real src is set */
img:not([src]) {
  visibility: hidden;
}

img[src] {
  visibility: visible;
}


/* ═══ SECTION 6: DEARSOFT MOTHERBOARD FOOTER — FONT GUARDS ═══
   Section 3's global !important rules ([class*="footer"], nav a)
   leak into the custom .dearit-footer and break its JetBrains
   Mono / Chakra Petch / Inter identity. These higher-specificity
   rules win them back. Keep this section AFTER Section 3 always. */

.dearit-footer {
  font-family: 'Inter', Arial, sans-serif !important;
}

.dearit-footer .dit-nav a {
  font-family: 'Inter', Arial, sans-serif !important;
}

.dearit-footer .dit-col-tag,
.dearit-footer .dit-c-label,
.dearit-footer .dit-copy,
.dearit-footer .dit-devby,
.dearit-footer .dit-status {
  font-family: 'JetBrains Mono', monospace !important;
}

.dearit-footer .dit-brand-name,
.dearit-footer .dit-c-phone {
  font-family: 'Chakra Petch', 'Inter', sans-serif !important;
}


/* ═══ END OF FILE — always paste new sections BELOW this line,
       never above the @import at the top ═══ */