/* Shared header/navigation fixes for the product-detail pages.
   These pages use the .top-bar / .header-content markup, while the legacy
   styles.css primarily targets the newer .top-strip / .site-header markup. */

*{box-sizing:border-box;}

.top-bar{
  background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%) !important;
  color:#fff !important;
  padding:12px 0 !important;
  font-size:13px !important;
  line-height:1.4 !important;
  border:0 !important;
}
.top-bar .container{
  width:min(1400px,92%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:25px !important;
}
.top-bar-left{
  display:flex !important;
  gap:35px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.top-bar-left span{opacity:.9;letter-spacing:.3px;}
.top-bar-right{margin-left:auto !important;}
.top-bar-right a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:500 !important;
  letter-spacing:.5px !important;
}
.top-bar-right a:hover{color:#c91f2b !important;}

header{
  background:#fff !important;
  border-bottom:1px solid #e5e5e5 !important;
  padding:18px 0 !important;
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  box-shadow:0 2px 20px rgba(0,0,0,.04) !important;
}
header > .container{
  width:min(1400px,92%) !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 !important;
}
.header-content{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:35px !important;
}
.logo-section{
  display:flex !important;
  align-items:center !important;
  gap:15px !important;
  min-width:0 !important;
}
.logo-icon{
  background:linear-gradient(135deg,#c91f2b 0%,#a91621 100%) !important;
  width:55px !important;
  height:55px !important;
  min-width:55px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  font-weight:800 !important;
  font-size:22px !important;
  color:#fff !important;
  box-shadow:0 4px 15px rgba(201,31,43,.25) !important;
  line-height:1 !important;
}
.logo-text{line-height:1.15 !important;}
.logo-text h1{
  font-family:'Barlow Condensed',Arial,sans-serif !important;
  font-size:26px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#0a0a0a !important;
  letter-spacing:-.5px !important;
  margin:0 !important;
}
.logo-text p{
  font-family:'Barlow',Arial,sans-serif !important;
  font-size:11px !important;
  line-height:1.3 !important;
  color:#666 !important;
  font-weight:500 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  margin:4px 0 0 !important;
}

header nav{margin-left:auto !important;}
header nav ul{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
header nav ul li{margin:0 !important;padding:0 !important;list-style:none !important;}
header nav ul li a{
  display:block !important;
  color:#1a1a1a !important;
  text-decoration:none !important;
  padding:11px 18px !important;
  font-family:'Barlow',Arial,sans-serif !important;
  font-weight:600 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:.45px !important;
  text-transform:uppercase !important;
  border-radius:7px !important;
  background:transparent !important;
  transition:all .25s ease !important;
}
header nav ul li a:hover,
header nav ul li a.active{
  background:#c91f2b !important;
  color:#fff !important;
}

/* Keep the detail hero directly below the compact header. */
.product-hero{margin:0 !important;}

@media(max-width:1050px){
  header nav ul li a{padding:10px 12px !important;font-size:12px !important;}
  .header-content{gap:18px !important;}
  .logo-text h1{font-size:23px !important;}
}
@media(max-width:760px){
  .top-bar .container{width:min(94%,1400px) !important;}
  .top-bar-left{gap:15px !important;font-size:12px !important;}
  .top-bar-right{display:none !important;}
  header{padding:14px 0 !important;}
  header > .container{width:min(94%,1400px) !important;}
  .header-content{align-items:flex-start !important;}
  .logo-icon{width:48px !important;height:48px !important;min-width:48px !important;font-size:19px !important;}
  .logo-text h1{font-size:21px !important;}
  .logo-text p{font-size:9px !important;}
  header nav ul{flex-wrap:wrap !important;justify-content:flex-end !important;}
  header nav ul li a{padding:8px 9px !important;font-size:10px !important;}
}
@media(max-width:560px){
  .top-bar-left{display:block !important;}
  .top-bar-left span{display:inline-block !important;margin-right:12px !important;}
  .header-content{display:block !important;}
  .logo-section{margin-bottom:12px !important;}
  header nav{margin-left:0 !important;}
  header nav ul{justify-content:flex-start !important;gap:2px !important;}
  header nav ul li a{padding:7px 8px !important;font-size:9px !important;}
}

/* ---------- ISI brand identity / contact update ---------- */
.brand-logo{display:block;width:310px;height:auto;max-height:78px;object-fit:contain;object-position:left center;}
.brand-logo-footer{display:block;width:300px;height:auto;max-height:76px;object-fit:contain;object-position:left center;margin-bottom:12px;}
.logo-brand-wrap{display:flex;align-items:center;gap:14px;}
.site-since{font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#6b7078;margin-top:5px;}
.company-contact-address{line-height:1.5;}
@media(max-width:760px){.brand-logo{width:245px;max-height:62px}.brand-logo-footer{width:250px;max-height:65px}}
@media(max-width:560px){.brand-logo{width:225px;max-height:58px}}


/* Final footer logo normalization */
.footer-brand > a { display:block; width:max-content; line-height:0; }
.brand-logo-footer { display:block !important; width:215px !important; height:auto !important; max-width:100% !important; max-height:none !important; min-height:0 !important; object-fit:contain !important; object-position:left center !important; margin:0 0 16px 0 !important; }
@media (max-width:760px){ .brand-logo-footer{width:185px !important;} }
@media (max-width:480px){ .brand-logo-footer{width:170px !important;} }