/* ============================================================
   ECOMSTORE — style_override.css
   Add this AFTER your existing style.css link in header.php:
   <link rel="stylesheet" href="style_override.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── ROOT TOKENS ──────────────────────────────────────────── */
:root {
  --amber:   #f0ad4e;
  --amber2:  #e47911;
  --teal:    #4fbfa8;
  --dark:    #131921;
  --mid:     #232f3e;
  --ink:     #0d0f14;
  --paper:   #f7f6f2;
  --muted:   #6b7280;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* ── GLOBAL ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* ── CATEGORY BAR ─────────────────────────────────────────── */
.mega-menu {
  background: #1a2533 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mega-menu .menu-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 0 15px !important;
  gap: 0 !important;
  background: transparent !important;
}
.mega-menu .menu-wrap::-webkit-scrollbar { display: none; }
.mega-menu .menu-wrap a {
  color: #9ca3af !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  background: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.mega-menu .menu-wrap a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.05) !important;
  border-bottom-color: var(--amber) !important;
}
.mega-menu .menu-wrap a.menu-services  { color: #ff9f4b !important; font-weight: 600 !important; }
.mega-menu .menu-wrap a.menu-callcenter{ color: #4fbfa8 !important; font-weight: 600 !important; }

/* ── HERO CAROUSEL ────────────────────────────────────────── */
#myCarousel { border-radius: 0 !important; margin: 0 !important; overflow: hidden !important; }
#myCarousel .item { height: 440px !important; }
#myCarousel .item img { width: 100% !important; height: 440px !important; object-fit: cover !important; border-radius: 0 !important; }
#myCarousel .carousel-control {
  width: 44px !important; height: 44px !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; transition: opacity .25s !important;
}
#myCarousel:hover .carousel-control { opacity: 1 !important; }
#myCarousel .carousel-control.left  { left: 14px; right: auto; }
#myCarousel .carousel-control.right { right: 14px; left: auto; }
@media (max-width: 768px) {
  #myCarousel .item, #myCarousel .item img { height: 200px !important; }
}

/* ── TRUST STRIP ──────────────────────────────────────────── */
.trust-strip-wrap {
  background: #fff !important;
  border-bottom: 1px solid #e9ecef !important;
}
.trust-strip-wrap .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
.trust-strip-wrap .row > [class*="col-"],
.trust-strip-wrap .trust-col {
  flex: 1 1 0 !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
.trust-box {
  background: #fff !important;
  border: none !important;
  border-right: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  padding: 16px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  box-shadow: none !important;
  height: 100% !important;
  transition: none !important;
}
.trust-box:hover { transform: none !important; box-shadow: none !important; }
.trust-col:last-child .trust-box { border-right: none !important; }
.trust-box .t-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#e8f8f4,#c8f0e8) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
}
.trust-box .t-icon i { color: var(--teal) !important; font-size: 17px !important; }
.trust-box h5 { font-weight: 700 !important; font-size: 13px !important; color: var(--ink) !important; margin: 0 0 2px !important; }
.trust-box p  { color: var(--muted) !important; font-size: 11.5px !important; margin: 0 !important; }
@media (max-width: 768px) {
  .trust-strip-wrap .row { flex-wrap: wrap !important; }
  .trust-strip-wrap .trust-col { flex: 0 0 50% !important; }
}

/* ── PROMO STRIP ──────────────────────────────────────────── */
.promo-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
  /* kill any leftover Bootstrap float context */
  float: none !important;
  clear: both !important;
  width: 100% !important;
}
@media (max-width: 768px) { .promo-strip { grid-template-columns: 1fr !important; } }

.promo-card {
  display: flex !important;
  align-items: flex-end !important;
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  min-height: 128px !important;
  padding: 20px 22px !important;
  text-decoration: none !important;
  color: #fff !important;
  transition: transform .25s, box-shadow .25s !important;
  float: none !important;
}
.promo-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 36px rgba(0,0,0,.2) !important; color: #fff !important; }
.promo-card--orange { background: linear-gradient(135deg,#ff9f4b 0%,#e47911 100%) !important; }
.promo-card--teal   { background: linear-gradient(135deg,#4fbfa8 0%,#2d9c87 100%) !important; }
.promo-card--dark   { background: linear-gradient(135deg,#2d3e52 0%,#131921 100%) !important; }
.promo-card__deco {
  position: absolute !important; top: -20px !important; right: -20px !important;
  width: 110px !important; height: 110px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important; pointer-events: none !important;
}
.promo-card__label {
  position: absolute !important; top: 14px !important; left: 20px !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
}
.promo-card__title {
  font-family: var(--font-head) !important;
  color: #fff !important; font-size: 20px !important; font-weight: 800 !important;
  margin: 0 0 3px !important; position: relative !important; z-index: 1 !important;
  line-height: 1.2 !important;
}
.promo-card__sub {
  color: rgba(255,255,255,.82) !important; font-size: 12px !important;
  margin: 0 !important; position: relative !important; z-index: 1 !important;
}

/* ── SECTION TITLES ───────────────────────────────────────── */
.section-title, h2.section-title {
  font-family: var(--font-head) !important;
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 36px 0 16px !important;
  padding-bottom: 10px !important;
  border-left: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important; flex-wrap: wrap !important;
  clear: both !important;
}
.section-title::after, h2.section-title::after {
  content: '' !important;
  position: absolute !important; bottom: 0 !important; left: 0 !important;
  width: 44px !important; height: 3px !important;
  background: var(--amber) !important; border-radius: 2px !important;
}
.sec-view-all {
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--amber2) !important; text-decoration: none !important;
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
}
.sec-view-all:hover { color: var(--amber2) !important; }

/* ── HOME PRODUCT GRID — FORCE 4 COLUMNS ─────────────────── */
.home-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
  /* override Bootstrap row floats completely */
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
.home-grid::before, .home-grid::after { display: none !important; }

/* Kill Bootstrap col-md-3 floats inside grid */
.home-grid > div,
.home-grid > .col-md-3,
.home-grid > .col-sm-6,
.home-grid > .single {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 767px)  { .home-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 400px)  { .home-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── PRODUCT CARD ─────────────────────────────────────────── */
.home-grid .product {
  display: flex !important; flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #e9ecef !important; border-radius: 12px !important;
  padding: 0 !important; margin: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
  height: 100% !important;
}
.home-grid .product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  border-color: var(--amber) !important;
}
.home-grid .product img {
  width: 100% !important; height: 180px !important;
  object-fit: contain !important; background: #f8f9fa !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 8px !important; display: block !important; border-radius: 0 !important;
}
.home-grid .product .text {
  padding: 11px 13px !important; flex: 1 !important;
  display: flex !important; flex-direction: column !important;
}
.home-grid .product .text h3 {
  font-size: 13px !important; font-weight: 600 !important;
  line-height: 1.35 !important; height: 36px !important; overflow: hidden !important;
  text-align: left !important; margin: 0 0 8px !important; color: var(--ink) !important;
}
.home-grid .product .text h3 a { color: var(--ink) !important; text-decoration: none !important; }
.home-grid .product .text h3 a:hover { color: var(--amber2) !important; }
.home-grid .product .text p.price {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--amber2) !important; text-align: left !important; margin: 0 0 10px !important;
}
.home-grid .product .text .buttons {
  display: flex !important; flex-direction: row !important;
  gap: 6px !important; margin-top: auto !important; padding: 0 !important;
}
.home-grid .product .text .buttons a {
  flex: 1 !important; text-align: center !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  padding: 7px 4px !important; border-radius: 7px !important;
  white-space: nowrap !important; transition: all .2s !important;
  display: block !important; text-decoration: none !important;
}
.home-grid .product .btn-primary, .home-grid .product a.btn-primary {
  background: var(--amber) !important; border-color: var(--amber) !important; color: var(--dark) !important;
}
.home-grid .product .btn-primary:hover, .home-grid .product a.btn-primary:hover {
  background: var(--amber2) !important; border-color: var(--amber2) !important; color: #fff !important;
}
.home-grid .product .btn-default, .home-grid .product a.btn-default {
  background: #f3f4f6 !important; border-color: #dde1e7 !important; color: var(--ink) !important;
}
.home-grid .product .btn-default:hover, .home-grid .product a.btn-default:hover {
  background: var(--mid) !important; color: #fff !important; border-color: var(--mid) !important;
}

/* ── VISITOR COUNTER ──────────────────────────────────────── */
.visitor-band {
  background: var(--dark) !important; border-radius: 12px !important;
  padding: 14px 24px !important; display: flex !important;
  justify-content: center !important; gap: 40px !important;
  flex-wrap: wrap !important; margin: 8px 0 32px !important;
}
.visitor-band span { color: #9ca3af !important; font-size: 14px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.visitor-band strong { color: var(--amber) !important; font-size: 18px !important; font-family: var(--font-head) !important; }

/* ── SCROLL ANIMATION ─────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ── PHP WARNING hide ─────────────────────────────────────── */
body > br + b, body > b:first-of-type { display: none !important; }

#topbar{background:#131921!important;padding:10px 0!important;}
.top-flex{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.search-box{flex:1 1 0!important;display:flex!important;max-width:560px!important;border-radius:6px!important;overflow:hidden!important;}
.search-box input{flex:1!important;padding:9px 14px!important;border:none!important;outline:none!important;background:#fff!important;}
.search-box button{background:#f0ad4e!important;border:none!important;padding:0 18px!important;color:#131921!important;font-size:16px!important;cursor:pointer!important;}
.header-icons{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important;}
.header-icons a{color:#fff!important;text-decoration:none!important;font-size:12px!important;padding:5px 8px!important;white-space:nowrap!important;}
.header-icons a:hover{color:#f0ad4e!important;}
nav.navbar-amazon,.navbar.navbar-amazon{background:#232f3e!important;border:none!important;margin:0!important;}
.navbar-amazon .navbar-nav{float:none!important;display:flex!important;justify-content:center!important;}
.navbar-amazon .navbar-nav>li>a{color:#d1d9e0!important;padding:12px 18px!important;font-size:13px!important;}
.navbar-amazon .navbar-nav>li>a:hover{background:#37475a!important;color:#fff!important;}
.navbar-amazon .navbar-toggle{border-color:rgba(255,255,255,.3)!important;}
.navbar-amazon .navbar-toggle .icon-bar{background:#fff!important;}