/* =========================
   Global electric background
   ========================= */
html, body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Site-wide middle stays white. */
  background: #ffffff !important;
  background-image: none !important;

  /* Default text color for content areas on white */
  color: #0b1220;
}

/* Services page only: electric-blue background for the middle content area */
body.services-page .services-page-section {
  background-color: #0b1f3a;
  background-image: url("../img/electric_bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Make Services page text readable on the dark background */
body.services-page .services-page-section,
body.services-page .services-page-section h1,
body.services-page .services-page-section h2,
body.services-page .services-page-section h3,
body.services-page .services-page-section p,
body.services-page .services-page-section li,
body.services-page .services-page-section a {
  color: #e9f2ff;
}




/* TheOldTechieGuy cleanups */
/* Fill the entire top/header area with the electric background WITHOUT stretching the logo image */
#top-header {
  background-color: #0b1220 !important;
  background-image: url("../img/electric_bg.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#header {
  background-color: #0b1220 !important;
  background-image: url("../img/electric_bg.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.main-nav>li>a { color:#ffffff !important; }
.header-search form { border-radius:10px; overflow:hidden; }
.header-search form .search-btn { background:#00c2ff; }
.product .product-body .product-name { min-height:44px; }
.badge-soft { display:inline-block; padding:4px 10px; border-radius:999px; background:#eaf7ff; color:#045a7a; font-size:12px; font-weight:600; }
.section-title .title { font-weight:700; }
.hero-card { border-radius:16px; padding:24px; background:#0b1220; color:#ffffff; }
.hero-card p { opacity:.9; }
.btn-primary-otg { background:#00c2ff; border:none; color:#00121a; font-weight:700; }
.page-title { margin:0; font-weight:800; }
.muted { opacity:.75; }


/* ====== UX polish v7 ====== */
.hero-card h1{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.55);
}
.hero-card p{
  color:rgba(255,255,255,0.88) !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.45);
}

/* Header blends into electric background */
.main-header{
  background: rgba(7,14,30,0.55) !important;
  border-bottom:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-logo .logo img{
  max-height:110px !important;
  width:auto;
}
.header-ctn > div > a,
.header-ctn > div > a > span,
.header-ctn > div > a > i{
  color:#ffffff !important;
}

/* =========================
   Product grid gap fix
   =========================
   Bootstrap float columns + uneven card heights cause big vertical holes on the
   Laptops page (especially on 2-column mobile layouts). Force flexbox so items
   flow in true rows.
*/

#laptopsGrid,
#featuredGrid {
  display: flex;
  flex-wrap: wrap;
}

.otg-product-col {
  float: none !important;
  display: flex;
}

.otg-product-col > .product {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.header-ctn > div > a:hover,
.header-ctn > div > a:hover > span,
.header-ctn > div > a:hover > i{
  color:#0aa7ff !important;
}

/* Search bar styling on white header */
.header-search form .input-select,
.header-search form .input{
  border:1px solid rgba(0,0,0,0.18) !important;
}
.header-search form .input{
  border-left:none !important;
}
.header-search form .search-btn{
  border:1px solid rgba(0,0,0,0.18) !important;
  border-left:none !important;
}

/* Mobile: keep header compact */
@media only screen and (max-width: 767px){
  .header-logo .logo img{ max-height:90px !important; }
  .main-header{ padding-top:10px; padding-bottom:10px; }
}

/* FINAL HEADER FIX */

.header-middle {
  background: transparent;
  padding: 12px 0;
}


.site-logo img {
    max-height: 90px !important;
    width: auto !important;
    display: block;
    margin: 0 auto;
}

.site-logo {
    text-align: center !important;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .site-logo img {
        max-height: 70px !important;
    }
}

.header-search {
    margin-top: 10px !important;
}

.header-middle {
    box-shadow: none !important;
}


/* --- UI polish: logo sizing + hero typography --- */
.header-logo .logo { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
/* style.css floats this left; force true centering */
.header-logo a.logo { float: none !important; width: 100% !important; display:flex; align-items:center; justify-content:center; }
.header-logo img.site-logo-img {
  /* Use container width to avoid vw overflow that shifts the banner to the right on mobile */
  width: 100% !important;
  max-width: 980px !important;
  height: auto !important;
  max-height: 220px !important;
  display:block !important;
  margin: 0 auto !important;
}
@media (max-width: 768px){
  .header-logo img.site-logo-img{ width: 100% !important; max-width: 980px !important; max-height: 180px !important; }
  .hero-card h1{ font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.08 !important; }
  .hero-card { padding: 18px 18px !important; }
}
@media (min-width: 769px){
  .hero-card h1{ font-size: clamp(34px, 3.2vw, 46px) !important; line-height: 1.08 !important; }
}
/* --- OTG fixes: mobile header search layout --- */
@media (max-width: 767px){
  .header-search form{display:flex; flex-wrap:wrap; gap:10px;}
  .header-search form .input-select{width:100%; margin-right:0; border-radius:999px;}
  .header-search form .input{width:100%; margin-right:0; border-radius:999px;}
  .header-search form .search-btn{width:100%; border-radius:999px; position:static;}
  .header-search form .input-select .select{border-radius:999px; height:48px;}
  .header-search form .input input{height:48px;}
}

/* --- OTG fixes: make Add to Cart always visible on product cards --- */
.product .add-to-cart{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  background: transparent !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  margin-top: 14px !important;
}
.product:hover .add-to-cart{
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}
.product .add-to-cart .add-to-cart-btn{
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
}

/* Prevent horizontal drift on mobile if any element overflows */
html, body {
  overflow-x: hidden;
}

/* Ensure long product titles never force horizontal scroll */
.product .product-body .product-name,
.product .product-body .product-name a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile header search: prevent the category select and search input from overlapping */
@media (max-width: 767px) {
  .header-search form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .header-search .input-select {
    flex: 0 0 42%;
    min-width: 140px;
  }
  .header-search .input {
    flex: 1 1 0;
    min-width: 0;
  }
  .header-search .search-btn {
    flex: 0 0 100%;
    margin-left: 0;
    border-radius: 40px;
  }
}

/* Header icon links (Home + Cart) */
.nav-icon-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b1f3a;
  text-decoration: none;
}
.nav-icon-link i{ font-size: 18px; }

/* Cart drawer */
.cart-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
}

.cart-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 92vw;
  background: #0b1f3a;
  z-index: 9999;
  transform: translateX(105%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0,0,0,0.25);
}
.cart-drawer.open{ transform: translateX(0); }

body.cart-drawer-open{ overflow: hidden; }

.cart-drawer-header{
  padding: 14px 16px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer-title{ font-size: 18px; font-weight: 700; color: #111; }
.cart-drawer-close{
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

.cart-drawer-body{ padding: 10px 16px; overflow: auto; flex: 1; }
.cart-empty{ padding: 18px 0; color: #555; }

.cart-drawer-item{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cart-drawer-item-img img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
}
.cart-drawer-item-name{ font-weight: 700; color: #111; font-size: 13px; line-height: 1.2; }
.cart-drawer-item-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  color: #444;
  font-size: 12px;
}
.cart-drawer-item-remove{
  border: 0;
  background: transparent;
  color: #d10024;
  cursor: pointer;
  font-weight: 700;
}

.cart-drawer-footer{
  padding: 12px 16px 16px;
  border-top: 1px solid #e6e6e6;
}
.cart-drawer-subtotal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #111;
}
.cart-drawer-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cart-drawer-actions .primary-btn{ width: 100%; text-align: center; }
.cart-drawer-actions .cta{ background: #d10024; }

/* Make header icon labels collapse on small screens */
@media (max-width: 767px){
  .nav-icon-link span{ display: none; }
}

/* Cart button should look like an icon link (not a grey button) */
.otg-cart-btn{
  background: transparent;
  border: 0;
  padding: 0;
  color: #0b1f3a;
}
.otg-cart-btn:focus{ outline: none; }

/* Mobile: keep header icons at the top (disable the old floating bottom-right cart behavior) */
@media only screen and (max-width: 767px){
  #header .header-ctn{
    position: static !important;
    width: 100% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    float: none !important;
  }

  .otg-nav-icons{
    position: relative;
    z-index: 10; /* keep below the slide-out nav */
    display: flex;
    width: 100%;
    /* Keep Home on the left, push Cart to the far right */
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
  }

  /* Push cart to the far right on mobile (does not affect desktop) */
  #header .otg-nav-icons .otg-cart-btn{
    margin-left: auto !important;
  }

  /* Keep the icons from stretching into big pills */
  #header .otg-nav-icons > *{
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Make Home/Cart true icon buttons on mobile */
  #header .otg-nav-icons .nav-icon-link,
  #header .otg-nav-icons .otg-cart-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px;
    min-width: 46px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  /* Force icon color to white on the dark strip */
  #header .otg-nav-icons .nav-icon-link,
  #header .otg-nav-icons .nav-icon-link i,
  #header .otg-nav-icons .otg-cart-btn,
  #header .otg-nav-icons .otg-cart-btn i{
    color: #ffffff !important;
  }

  /* Hide text labels on mobile, keep qty badge visible */
  .otg-nav-icons .nav-icon-link span{ display: none; }
  .otg-nav-icons .qty{ display: inline-block; }

  /* Cart count badge on the mobile cart icon */
  #header .otg-nav-icons .nav-icon-link{ position: relative; }
  #header .otg-nav-icons .nav-icon-link .qty.cartCount{
    position: absolute;
    top: -7px;
    right: -7px;
    background: #ff3b30;
    color: #ffffff;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
}

/* Add-to-cart button feedback */
.add-to-cart-btn.added{
  /* Avoid filter/transform here: on some mobile browsers it can trigger a brief
     compositing repaint bug where nearby images momentarily go blank. */
  box-shadow: 0 0 0 3px rgba(0,194,255,.35);
  outline: 2px solid rgba(0,194,255,.25);
  outline-offset: 2px;
}


/* v9 fixes: ensure header cart + home visible */
.header-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header-cart, #cartToggle{display:inline-flex !important;align-items:center;gap:10px;min-height:40px;padding:10px 12px;border-radius:999px;background:rgba(0,194,255,.18);color:#e9f4ff;text-decoration:none;border:1px solid rgba(0,194,255,.35)}

/* Desktop/tablet: make the header cart (button) match the pill style used in the left menu */
@media (min-width: 768px){
  #cartToggleBtn{display:inline-flex !important;align-items:center;gap:10px;min-height:40px;padding:10px 12px;border-radius:999px;background:rgba(0,194,255,.18);color:#e9f4ff;text-decoration:none;border:1px solid rgba(0,194,255,.35);cursor:pointer;outline:none}
  #cartToggleBtn:hover{background:rgba(0,194,255,.26)}
}
.header-cart .cart-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#00c2ff;color:#001018;font-weight:900;font-size:12px}
.home-link{display:inline-flex;align-items:center;gap:8px;color:#e9f4ff;text-decoration:none;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06)}
.home-link:hover{background:rgba(255,255,255,.12)}
.home-icon{font-size:18px;line-height:1}
.home-text{font-weight:700}
@media (max-width:640px){.home-text{display:none}}

/* drawer overlay reliability */
.cart-drawer{position:fixed;top:0;right:0;height:100dvh;max-height:100dvh;width:min(420px,92vw);background:#0b1f3a;z-index:9999;transform:translateX(105%);transition:transform .25s ease;box-shadow:-20px 0 60px rgba(0,0,0,.35);overflow:auto}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;opacity:0;pointer-events:none;transition:opacity .2s ease}
.cart-drawer-overlay.open{opacity:1;pointer-events:auto}

/* Mobile nav backdrop (click/tap outside menu to close) */
/* Mobile nav backdrop + stacking: nav must cover everything (icons included) */
@media only screen and (max-width: 991px){
  #nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:10049;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  #nav-backdrop.active{
    opacity:1;
    pointer-events:auto;
  }
  #responsive-nav{
    z-index:10050 !important;
  }
  /* When nav is open, hide header icons so they cannot "leak" above the panel */
  body.nav-open .otg-nav-icons{
    opacity:0;
    pointer-events:none;
  }
}


/* Cart badge: allow 'Empty' text */
.qty.cartCount{ min-width: 40px; padding: 2px 8px; text-align:center; }

/* Align Menu (left) + Cart (right) on the same row on desktop/tablet */
@media only screen and (min-width: 768px){
  #header .header-ctn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  #header .header-ctn .menu-toggle{
    float:none;
    margin:0;
    /* Electro template hides Menu on desktop; OTG wants it visible */
    display:inline-block !important;
  }

  /* Desktop/tablet: Menu must be visible on the dark bar (your theme makes header links dark) */
  #header .header-ctn .menu-toggle > a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(0,194,255,0.35);
  }
  #header .header-ctn .menu-toggle > a,
  #header .header-ctn .menu-toggle > a > i,
  #header .header-ctn .menu-toggle > a > span{
    color:#ffffff !important;
  }
  #header .header-ctn .menu-toggle > a:hover{
    background:rgba(0,194,255,0.15);
    border-color:rgba(0,194,255,0.55);
  }
  #header .header-ctn .otg-nav-icons{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px;
  }
}

/* Base (all sizes): ensure cart + home icon group is visible unless explicitly hidden */
#header .otg-nav-icons{
  display:flex;
  align-items:center;
  gap:12px;
}
#header .otg-nav-icons .nav-icon-link,
#header .otg-nav-icons .otg-cart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Desktop: allow the left drawer menu to work even when viewport > 991px.
   Only convert the nav into an off-canvas panel when it is open (body.nav-open). */
@media only screen and (min-width: 992px){
  body.nav-open #responsive-nav{
    position:fixed;
    left:0;
    top:0;
    background:#15161D;
    height:100vh;
    max-width:250px;
    width:100%;
    overflow:hidden;
    z-index:10050;
    padding-top:60px;
  }
  body.nav-open #responsive-nav .main-nav{
    margin:0;
    float:none;
  }
  body.nav-open #responsive-nav .main-nav>li{
    display:block;
    float:none;
  }
  body.nav-open #responsive-nav .main-nav>li>a{
    padding:15px;
    color:#FFF;
  }
}

/* Backdrop should work on desktop too (not just <=991px) */
#nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:10049;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
#nav-backdrop.active{
  opacity:1;
  pointer-events:auto;
}



/* FIX: Desktop header alignment for Menu (left) and Cart/Home icons (right) */
@media (min-width: 992px){
  #header .header-ctn{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
  }

  /* Menu left */
  #header .header-ctn .menu-toggle{
    margin-right:auto !important;
  }

  /* Icons right */
  #header .header-ctn .otg-nav-icons{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
  }

  /* Make Menu visible on dark header */
  #header .header-ctn .menu-toggle > a,
  #header .header-ctn .menu-toggle > a i,
  #header .header-ctn .menu-toggle > a span{
    color:#0b1f3a !important;
  }
}


/* ===== Desktop header toolbar (Menu left, Cart right) ===== */
.otg-desktop-toolbar{
  display:none;
  width:100%;
  max-width:100%;
  margin-top:10px;
  padding:0 0 12px 0;
}
.otg-desktop-toolbar .menu-toggle,
.otg-desktop-toolbar .otg-nav-icons{
  display:flex;
  align-items:center;
}
@media (min-width: 992px){
  .otg-desktop-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  /* hide the inline/mobile versions inside the header columns */
  #header .otg-menu-inline,
  #header .otg-nav-icons:not(.otg-desktop-icons){
    display:none !important;
  }
  #header .otg-desktop-toolbar .menu-toggle > a{
    color:#ffffff;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(0,176,255,0.35);
    background:rgba(0,0,0,0.25);
    box-shadow:0 0 18px rgba(0,176,255,0.15);
  }
}


/* FIX: desktop-mode header action alignment (Menu left, Cart right) */
#header .header-ctn{
  float:none !important;
  width:100% !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:14px !important;
}
#header .header-ctn .menu-toggle{
  margin-right:0 !important;
}
#header .header-ctn .otg-nav-icons{
  margin-left:0 !important;
}


/* Cart icon numeric badge */
.cartBtn{ position: relative; }
.cartBadge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: #ff3b30;
  color: #0b1f3a;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Toast */
.toastHost{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  /* Avoid transform on fixed elements (can cause mobile rendering glitches) */
  transform: none;
  text-align: center;
  z-index: 99999;
  pointer-events: none;
}
.toastHost .toast{
  /* Bright, high-contrast toast for both mobile + desktop */
  display: inline-block !important;
  width: auto !important;
  max-width: min(420px, 92vw);
  background: #00b7ff;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0;
  /* No transforms: prevents mobile GPU layer glitches that blank images */
  transition: opacity .2s ease;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toastHost .toast.show{
  opacity: 1;
}


/* Desktop: show a real 'Home' text button next to Menu (left side) */
.otg-desktop-home-link{
  display:none;
  text-decoration:none;
  font-weight:600;
}
.otg-desktop-home-link i{ margin-right:6px; }

@media (min-width: 992px){
  #header .header-ctn{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    justify-content:space-between !important;
  }

  /* Left side: Menu + Home */
  #header .header-ctn .menu-toggle{
    margin-right:10px !important;
  }
  #header .header-ctn .otg-desktop-home-link{
    display:inline-flex !important;
    align-items:center !important;
    color:#0b1f3a !important;
    padding:8px 12px !important;
    border-radius:8px !important;
  }
  #header .header-ctn .otg-desktop-home-link i,
  #header .header-ctn .otg-desktop-home-link span{
    color:#0b1f3a !important;
  }

  /* Right side icons */
  #header .header-ctn .otg-nav-icons{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
  }

  /* Hide the icon-only Home in the right group on desktop to avoid duplicate Home */
  #header .header-ctn .otg-nav-icons a.nav-icon-link[title="Home"]{
    display:none !important;
  }
}


/* OVERRIDE: show desktop 'Home' text button on all non-mobile widths */
.otg-desktop-home-link{
  display:inline-flex !important;
  align-items:center !important;
  color:#0b1f3a !important;
  padding:8px 12px !important;
  border-radius:8px !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
.otg-desktop-home-link i,
.otg-desktop-home-link span{
  color:#0b1f3a !important;
  display:inline !important;
}

/* Mobile: keep the left "Home" text button, remove the duplicate icon-only Home */
@media (max-width: 767px){
  /* keep the text Home button visible on mobile */
  .otg-desktop-home-link{ display:inline-flex !important; }

  /* hide the icon-only Home inside the right-side icon group */
  #header .header-ctn .otg-nav-icons a.nav-icon-link[title="Home"]{
    display:none !important;
  }
}

/* Hide the right-side Home icon/link on tablet+ so Home only appears next to Menu */
@media (min-width: 768px){
  #header .header-ctn .otg-nav-icons a.nav-icon-link[title="Home"]{
    display:none !important;
  }
}


/* OTG: product card hover image swap (desktop only)
   Fixes mobile bug where tap/"stuck hover" could hide the main image (blank tile).
   Only enable swap on true hover+fine pointer devices (desktop/laptop). */
.product .product-img.otg-swap-img{position:relative;overflow:hidden;}
.product .product-img.otg-swap-img img{width:100%;display:block;}

/* Defaults: always show main image, never hide it on touch */
.product .product-img.otg-swap-img img.main-img{opacity:1;transition:opacity 0.18s ease-in-out;}
.product .product-img.otg-swap-img img.hover-img{
  position:absolute;left:0;top:0;
  opacity:0;
  transition:opacity 0.18s ease-in-out;
}

/* Desktop hover swap only */
@media (hover: hover) and (pointer: fine){
  .product:hover .product-img.otg-swap-img img.hover-img{opacity:1;}
  .product:hover .product-img.otg-swap-img img.main-img{opacity:0;}
}


/* Make category images clickable */
.shop-img-link{display:block;}
.shop-img-link img{display:block; width:100%; height:auto;}
.shop-img-link{cursor:pointer;}


/* --- OTG FIX: make category images clickable on mobile --- */
.shop-img{z-index:1 !important;}
.shop-img a{display:block; position:relative; z-index:2;}
.shop-img a img{display:block; width:100%; height:auto;}
/* prevent the overlay body from blocking taps except on its own links */
.shop-body{pointer-events:none;}
.shop-body a{pointer-events:auto;}


/* --- OTG FIX: make product images clickable --- */
.product-img{z-index:1; position:relative;}
.product-img .product-img-link{display:block; position:relative; z-index:2;}
.product-img .product-img-link img{display:block; width:100%; height:auto;}


/* =========================
   OTG: Services Page (flyer-like)
   ========================= */
.services-page{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0, 140, 255, .18), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(0, 90, 200, .16), transparent 55%),
              linear-gradient(180deg, #061a33 0%, #050b16 55%, #05050a 100%);
}
.services-hero{
  background-image: url("../img/flyer.png");
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 220px;
}

.services-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(0,140,255,.35), rgba(0,0,0,0)) ,
              rgba(0,0,0,.70);
  z-index:0;
}

.services-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,11,22,0.90) 0%, rgba(7,11,22,0.65) 55%, rgba(7,11,22,0.90) 100%);
}

.services-hero-inner {
  position: relative;
  z-index: 1;
  padding: 34px 26px;
}

.services-title {
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
}

.services-subtitle {
  margin-top: 10px;
  margin-bottom: 18px;
  color: rgba(233,238,247,0.88);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 768px) {
  .services-subtitle {
    text-align: left;
  }
}

.services-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.services-cta-row .btn {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
}

.services-section-title {
  color: rgba(233,238,247,0.95);
  font-weight: 800;
  margin: 26px 0 14px 0;
}

.service-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px 18px;
  box-shadow: 0 14px 26px rgba(0,0,0,0.28);
}

.service-block h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 800;
  color: rgba(233,238,247,0.98);
}

.service-kicker {
  color: rgba(233,238,247,0.82);
  margin: 0 0 10px 0;
}

.service-bullets {
  margin: 8px 0 14px;
  padding-left: 0;
  list-style: none;
  color: rgba(233,238,247,0.92);
}

.service-bullets li {
  position: relative;
  padding-left: 14px;
  margin: 6px 0;
}

.service-bullets li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(233,238,247,0.92);
}

.service-subhead{
  margin: 12px 0 6px;
  font-weight: 800;
  color: rgba(233,238,247,0.96);
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,170,255,0.14);
  border: 1px solid rgba(0,170,255,0.28);
  margin-bottom: 10px;
}

.services-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 18px 0;
}


/* Flyer-ref services layout */
.services-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom: 30px;
}

.service-flex{
  display:flex;
  gap:14px;
  align-items:stretch;
}

.service-media{
  flex: 0 0 108px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.service-media img{
  width:108px;
  height:108px;
  object-fit:contain;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  padding:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.service-content{
  flex:1;
}

.service-note{
  opacity:.85;
  margin-top:10px;
  font-size: .95rem;
}

.service-cta-row{
  display:flex;
  gap:10px;
  margin-top: 10px;
  flex-wrap:wrap;
}

@media (max-width: 576px){
  .service-flex{
    flex-direction:column;
  }
  .service-media{
    flex-basis:auto;
    align-self:flex-start;
  }
  .service-media img{
    width:96px;
    height:96px;
  }
}


/* ===== Home hero: services promo ===== */
.hero-card.hero-services{
  position:relative;
  background-image: linear-gradient(180deg, rgba(5,16,28,.78), rgba(5,16,28,.88)), url('../img/electric_bg.svg');
  background-size: cover;
  background-position: center;
  color:#ffffff;
}

.hero-services-title{
  margin-top:0;
  font-weight:900;
  letter-spacing:.5px;
  color:#ffffff;
  /* Allow wrapping on small screens; keep single-line on desktop via media query below */
  white-space:normal;
}

/* Second half of the SERVICES title drops to a new line ONLY on mobile */
.hero-services-title-break{ display:inline; }

.hero-appointment{
  display:block;
  width:100%;
  text-align:center;
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  color:#21d4ff;
  text-transform:uppercase;
}

@media (max-width: 576px){
  .hero-services-title{font-size:24px; line-height:1.05; white-space:normal}
  .hero-services-title-break{display:block;}
  .hero-appointment{font-size:12px}
}

@media (min-width: 577px){
  .hero-services-title{white-space:nowrap;}
  .hero-services-title-break{display:inline;}
}

.hero-services-sub{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  opacity: .95;
}

.hero-services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:16px;
}

.svc-mini{
  min-width: 0;
  background: rgba(10, 22, 38, .62);
  border: 1px solid rgba(80, 170, 255, .22);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-radius: 16px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(6px);
}

.svc-mini-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.svc-mini-ic{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0, 153, 255, .18);
  border: 1px solid rgba(0, 153, 255, .28);
  border-radius: 10px;
  font-size: 18px;
}

.svc-mini-name{
  font-weight: 800;
  font-size: 18px;
}

.svc-mini-list{
  margin: 0;
  padding-left: 18px;
  opacity: .95;
}

.hero-services-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.hero-services-cta .primary-btn{
  flex: 1 1 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.primary-btn.btn-outline-otg{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #0b1f3a;
}

.primary-btn.btn-outline-otg:hover{filter:brightness(1.05)}

.primary-btn.btn-dark-otg{
  background: rgba(7, 26, 46, .85);
  border: 1px solid rgba(80, 170, 255, .22);
  color: #0b1f3a;
}

.primary-btn.btn-dark-otg:hover{filter:brightness(1.05)}

@media (max-width: 560px){
  .hero-services-title{font-size: 24px; line-height: 1.05; white-space:nowrap}
  /* Keep the 3-column flyer-style layout even on phones */
  .hero-services-grid{gap:10px; grid-template-columns: repeat(3, minmax(0, 1fr));}
  .svc-mini{padding: 10px 10px 8px; border-radius: 14px}
  .svc-mini-ic{width:30px; height:30px; font-size:16px; border-radius:9px}
  .svc-mini-name{font-size: 13px}
  .svc-mini-list{padding-left: 14px; font-size: 11px; line-height: 1.25}
  .hero-services-cta{gap:10px}
  .hero-services-cta .primary-btn{flex:1 1 0; padding-left:12px; padding-right:12px}
}

@media (max-width: 420px){
  /* If a device is extremely narrow, allow wrap to avoid unreadable text */
  .hero-services-grid{grid-template-columns: 1fr;}
  .svc-mini-name{font-size: 16px}
  .svc-mini-list{font-size: 13px}
}

/* GLOBAL ELECTRIC BACKGROUND */
body {
    background: url('img/electric_bg.svg') no-repeat center center fixed;
    background-size: cover;
}

/* REMOVE WHITE HEADER BACKGROUND */
header, .header, .top-header {
    background: transparent !important;
}

/* LOGO BLEND */
.logo img {
    background: transparent !important;
    filter: drop-shadow(0 0 12px #00cfff);
}

/* HERO CARD GLOW */
.hero, .services-hero {
    background: rgba(0, 20, 40, 0.75) !important;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0,200,255,0.4);
}


/* Global readability overlay on top of the background image */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(0,0,0,0.25), rgba(0,0,0,0.72));
  pointer-events:none;
  z-index:-1;
}

/* FORCE STACK SERVICES */
.services-grid, .services, .service-cards {
    display: block !important;
}
.service-card, .service-item {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* REMOVE FLOATING SQUARE ICONS */
.service-card::before,
.service-item::before {
    display: none !important;
    content: none !important;
}

/* FIX FOOTER STACK */
.footer, .footer-content {
    display: block !important;
}


/* =========================
   FORCE HEADER + CART TEXT WHITE
   ========================= */
#top-header, #header, #navigation, #navigation * {
  color:#ffffff !important;
}
#navigation a, #navigation a span, #navigation a i,
.main-nav>li>a, .main-nav>li>a>span {
  color:#ffffff !important;
}

/* Cart dropdown/panel */
.cart-dropdown, .cart-dropdown * {
  color:#ffffff !important;
}
.cart-dropdown {
  background: rgba(7,14,30,0.95) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.cart-dropdown .cart-summary, 
.cart-dropdown .cart-summary * {
  color:#ffffff !important;
}
.cart-dropdown .cart-btns a {
  color:#00121a !important;
}

/* Services page: force all text white inside the electric section */
body.services-page .services-page-section * {
  color:#ffffff !important;
}
body.services-page .services-page-section .muted {
  color: rgba(255,255,255,0.82) !important;
}

/* ===== FINAL OVERRIDES: force readable white text on dark UI ===== */
/* Header nav + icons */
.header-links li a,
.main-nav > li > a,
.main-nav > li > a > i,
.menu-toggle,
.menu-toggle > a,
.header-ctn > div > a,
.header-ctn > div > a > i,
.header-ctn > div > a > span,
.header-ctn > div > a > strong,
.header-ctn .qty {
  color:#ffffff !important;
}

/* Search category select on dark header */
.header-search .input-select select,
.header-search .input-select .select {
  color:#0b1220 !important; /* keep dark text on light control */
}

/* Hero/services card: EVERYTHING inside should be white */
.hero-card,
.hero-card *,
.svc-mini,
.svc-mini * {
  color:#ffffff !important;
}

/* Cart drawer (mobile slide-out cart) */
.cart-drawer,
.cart-drawer * {
  color:#ffffff !important;
}

/* Keep remove links visible */
.cart-item-remove,
.cart-drawer .remove,
.cart-drawer a.remove {
  color:#ff4d4d !important;
}


/* FORCE NAV + HOME TEXT WHITE */
.nav, .nav a, .menu, .menu a, .header, .header a,
.home-link, .breadcrumb, .breadcrumb a,
a[href*="index"], a[href="/"], .nav-item, .nav-item a {
    color: #ffffff !important;
}

/* ICON + HOME BUTTON */
.nav i, .home-icon {
    color: #ffffff !important;
}

/* ==========================================================
   FIX v31: Header + cart drawer text low-contrast on mobile
   ========================================================== */

/* Header nav items (Home, icons, cart) must stay WHITE */
.header-ctn .nav-icon-link,
.header-ctn .otg-desktop-home-link,
.header-ctn .otg-cart-btn,
.header-ctn .otg-cart-btn .qty{
  color: #ffffff !important;
  opacity: 1 !important;
}
.header-ctn .nav-icon-link svg,
.header-ctn .otg-desktop-home-link svg,
.header-ctn .otg-cart-btn svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Cart drawer (dark) needs light text/borders */
.cart-drawer-header{ border-bottom: 1px solid rgba(255,255,255,0.16) !important; }
.cart-drawer-title{ color: #ffffff !important; }
.cart-drawer-close{ color: #ffffff !important; }
.cart-empty{ color: rgba(255,255,255,0.85) !important; }

.cart-drawer-item{ border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.cart-drawer-item-name{ color: #ffffff !important; }
.cart-drawer-item-meta{ color: rgba(255,255,255,0.80) !important; }

.cart-drawer-footer{ border-top: 1px solid rgba(255,255,255,0.16) !important; }
.cart-drawer-subtotal{ color: #ffffff !important; }

/* v31 override: force Home button + header icons WHITE (beats earlier #header rules) */
#header .header-ctn .otg-desktop-home-link,
#header .header-ctn .otg-desktop-home-link i,
#header .header-ctn .otg-desktop-home-link span{
  color:#ffffff !important;
}
#header .header-ctn .otg-nav-icons a.nav-icon-link{
  color:#ffffff !important;
  opacity:1 !important;
}

/* FORCE HOME BUTTON BUBBLE STYLE */
.home-link, a[href*="index"], a[href*="home"] {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}


/* FORCE LOGO FIX */
.logo img, .header img, .site-logo img {
    max-width: 320px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}


img[src*='logo']{display:block;margin:0 auto !important;}


/* ===== Fixes: top contact centered, category text white, appointment blue, logo centered ===== */
#top-header .header-links.pull-left{
  float:none !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  text-align:center !important;
  width:100% !important;
  padding-left:0 !important;
  margin:0 auto !important;
}
#top-header .header-links.pull-left li{
  float:none !important;
  display:inline-flex !important;
}
#top-header .header-links.pull-left li a{
  white-space:nowrap;
}

/* Logo: center in header and prevent "shift right" */
#header .header-logo{
  text-align:center !important;
  width:100% !important;
}
#header .header-logo .logo{
  display:inline-block !important;
  margin:0 auto !important;
}
#header .site-logo-img{
  display:block !important;
  margin:0 auto !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Category cards: force white title + CTA text */
.category-card .category-title,
.category-card .category-info,
.category-card .category-info *{
  color:#ffffff !important;
}
.category-card a.shop-now{
  color:#ffffff !important;
}
.category-card a.shop-now i{
  color:#ffffff !important;
}

/* Ensure "BY APPOINTMENT ONLY" stays bright blue (some themes override) */
.hero-appointment, .hero-appointment *{
  color:#00bfff !important;
  font-weight:800 !important;
}

/* ---- OTG fixes: header centering + shop text white + logo centered ---- */

/* Center top contact info */
#top-header .container { text-align: center !important; }
#top-header .header-links {
  float: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
}
#top-header .header-links li { display: inline-flex !important; float: none !important; }
#top-header .header-links a { white-space: nowrap !important; }

/* Force shop category titles + CTA text to white */
.shop-category .shop-body h3,
.shop-category .shop-body .cta-btn,
.shop-category .shop-body .cta-btn i {
  color: #ffffff !important;
}

/* Center the header logo image and prevent right-shift */
.header-logo, .header-logo .logo { width: 100% !important; text-align: center !important; }
.header-logo img, .site-logo-img { display: block !important; margin: 0 auto !important; max-width: 100% !important; height: auto !important; }

/* CART FIX */
.cart, .cart-container, .cart-overlay {
    background:#ffffff !important;
    color:#000000 !important;
}
.cart a, .cart-item a {
    color:#000000 !important;
    text-decoration:none;
}

/* REAL CART FIX */
#cartDrawer, .cart-drawer, .cartDrawer {
 background:#ffffff !important;
 color:#000000 !important;
}
.cart-drawer-item, .cart-drawer * {
 color:#000000 !important;
}

/* FORCE CHECKOUT WHITE */
.checkout-section,
.checkout-box,
.order-summary,
.customer,
.shipping,
#checkout-container div {
    background: #ffffff !important;
    color: #000000 !important;
}


/* FORCE CHECKOUT WHITE */
.checkout, .checkout * {
    background: #ffffff !important;
    color: #000000 !important;
}

.checkout input, .checkout select, .checkout textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
}

.checkout .card, .checkout .section, .checkout .box {
    background: #ffffff !important;
    color: #000000 !important;
}


/* FORCE FULL WHITE CHECKOUT */
.checkout, .checkout * {
    background: #ffffff !important;
    color: #000000 !important;
}

.checkout input, .checkout select, .checkout textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
}

.checkout .card, .checkout .section, .checkout .box {
    background: #ffffff !important;
    color: #000000 !important;
}


/* FORCE CHECKOUT WHITE */
.checkout, .checkout * , .order-summary, .customer, .shipping, .paypal, .invoice {
    background: #ffffff !important;
    color: #000000 !important;
}

.checkout .card, .checkout-section, .box, .panel {
    background: #ffffff !important;
    color: #000000 !important;
}

input, select, textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
}


/* FORCE SERVICES STYLE FIX */
.services, .services-section {
    background: transparent !important;
}
.services .card, .services-section .card {
    background: rgba(10,20,40,0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
    color: #ffffff !important;
}
.services h2, .services-section h2,
.services h3, .services-section h3,
.services p, .services-section p {
    color: #ffffff !important;
}


/* Global top contact bar spacing + icon gap (applies on all pages) */
.top-header{
  padding-top: 8px;
  padding-bottom: 8px;
}
.top-header .header-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.top-header .header-links li{
  display: flex;
  align-items: center;
}
.top-header .header-links li i{
  margin-right: 8px;
}
@media (max-width: 767px){
  .top-header .header-links{
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
  }
}





/* Global TOP HEADER (contact bar) spacing + icon gap (applies on all pages) */
#top-header{
  padding-top: 8px;
  padding-bottom: 8px;
}
#top-header .header-links{
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}
#top-header .header-links li{
  display: flex;
  align-items: center;
}
#top-header .header-links li i{
  margin-right: 8px;
}
@media (max-width: 767px){
  #top-header .header-links{
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
  }
}



/* Cart page: make qty input wide enough for 2+ digits on mobile (desktop unchanged) */
@media (max-width: 767px){
  #cartTableWrap td:nth-child(4){
    min-width: 72px;
    width: 72px;
  }
  #cartTableWrap input[data-qty]{
    min-width: 56px !important;
    width: 56px !important;
    text-align: center;
    box-sizing: border-box;
  }
}