/* HD Electric main styles (v1.0.9).
   Original HD Electric grid/layout/to-top/pointer rules are NOT redeclared here,
   except the single go-to-top placement rule below (bottom/z-index only):
   original style.css wins for those classes. Only HD-prefixed helpers,
   forms, comments, the 100px preloader spinner and the black-screen
   failsafe block (last) live in this file. */
:root {
    --hd-electric-accent: #e03131;
    --hd-electric-dark: #111111;
    --hd-electric-light: #f5f5f5;
}
* { box-sizing: border-box; }
body { margin: 0; color: #222; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--hd-electric-accent); }
.hd-blog-wrap, .hd-page-wrap, .hd-single-wrap, .hd-portfolio-wrap, .hd-woo-wrap, .hd-portfolio-archive { padding: 60px 0; }
.hd-post-card { margin-bottom: 40px; border-bottom: 1px solid #e5e5e5; padding-bottom: 30px; }
.hd-post-meta span { margin-right: 12px; color: #767676; font-size: 14px; }
.hd-read-more { font-weight: 700; }
.hd-sidebar .widget { margin-bottom: 30px; }
.widget-title { font-size: 20px; margin: 0 0 12px; }
.hd-recent-posts { list-style: none; padding: 0; margin: 0; }
.hd-recent-posts li { margin-bottom: 12px; }
.hd-recent-posts img { width: 60px; height: auto; vertical-align: middle; margin-right: 10px; }
.hd-fullscreen-header { min-height: 70vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background-color: #111; }
.hd-slider-header { text-align: center; padding: 40px 0; }
.hd-slider { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; }
.hd-slide { flex: 0 0 80%; scroll-snap-align: center; }
.hd-video-header { text-align: center; padding: 40px 0; }
.hd-video-header video { max-width: 100%; }
.hd-portfolio-nav { display: flex; justify-content: space-between; margin-top: 40px; }
.hd-electric-pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; }
.hd-electric-pagination a, .hd-electric-pagination .current { padding: 6px 12px; border: 1px solid #ddd; text-decoration: none; }
.loading {
    position: fixed;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    visibility: visible;
    -webkit-transition: .5s cubic-bezier(.755, .05, .855, .06);
    -o-transition: .5s cubic-bezier(.755, .05, .855, .06);
    transition: .5s cubic-bezier(.755, .05, .855, .06);
    z-index: 101;
    width: 100px;
    height: 100px;
}
.logo-loading {
    width: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.form-search { display: flex; gap: 10px; }
.search-control { flex: 1; padding: 12px; border: 1px solid #ccc; }
.search-btn { padding: 12px 20px; background: var(--hd-electric-accent); color: #fff; border: 0; cursor: pointer; }
.comment-list { list-style: none; padding: 0; }
.comment-avatar img { border-radius: 50%; }
.hd-comments-area { margin-top: 40px; }


/* HD Electric v1.0.9 — live-audit fixes (2026-10-25). main.css loads after
   style.css, additional.css and nav.css, so these placement/contrast rules
   win. No header-bar colour, logo image, logo container size, icon size,
   or card copy is changed here — only placement, insets and text contrast. */

/* Header right-edge clipping, desktop (code-verified in nav.css): the
   cart badge is .cart-count-badge.ltr { position:fixed; right:-10px; },
   i.e. 10px past the viewport edge, and the navbar-nav strip is 100%
   wide with overflow:hidden, so the last icon sits flush on the edge.
   Inset the strip container (not the individual icons) and bring the
   badge inside the viewport. */
header.header .navbar ul.navbar-nav { padding-right: 24px; box-sizing: border-box; }
.cart-count-badge.ltr { right: 12px; }
/* Sticky social rail (header.php .sticky-icon.ltr): its links are
   translated 100px right inside a 140px rail, leaving only ~40px visible,
   so the 35px search icon circle is clipped at the right edge. Show
   ~48px so the icon circle fits inside the viewport. */
.sticky-icon.ltr a { transform: translate(92px, 0); }
/* Restore hover slide-in: nav.css :hover has equal specificity to the rule above,
   and main.css loads later, so without this the hover transform was overridden
   and the rail stopped animating. This higher-specificity hover rule restores it. */
.sticky-icon.ltr a:hover { transform: translate(0px, 0px); }
/* Mobile header (code-verified; live 375/768px widths were NOT verified):
   nav.css sets the collapsed mobile menu to min-width:100vw with a 15px
   left margin — 15px wider than the viewport, pushing its right edge
   off-screen. Remove that margin so the collapsed menu fits. */
@media (max-width: 991.98px) {
  header.header .navbar-collapse { margin-left: 0; }
}

/* Logo / hero overlap: nav.css pulls main up with top:-150px under the
   fixed header, so the 110px logo box covers the first letter of hero
   headings. Push page content inside main down 60px. The logo image,
   its 105x110 container and its logo-main.png rule are untouched. */
main.animsition-overlay { padding-top: 60px; }

/* Faint / low-contrast text: darken only the text, not the cards. Blog
   card body/meta, single-product tab/short-description text, sidebar
   links on the blue gradient, the Custom Cable selected tab, and the
   Contact "OPEN IN GOOGLE MAPS" link (maps href). */
.blog-category, .blog-tags, .blog-category li, .blog-tags li,
.blog-category a, .blog-tags a,
.single-blog-post p, .blog-post-content p { color: #333; }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-product-details__short-description p { color: #333; }
.single-side-bar a, .single-side-bar li a, .sidebar-box a, .sidebar-box h4,
.single-side-bar .widget-title { color: #111; }
.vc_tta-tabs-list .vc_tta-tab.vc_active > a,
.wpb_tabs_nav li.ui-tabs-active a { color: #222; }
a[href*="google.com/maps"], a[href*="maps.google"] { color: #111; }

/* Homepage 3-card block: equal-height columns, button kept inside the
   card instead of cut off at the bottom edge. Colours and copy unchanged. */
.three-columns { display: flex; align-items: stretch; overflow: visible; }
.three-columns > * { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.three-columns .vc_column-inner { display: flex; flex-direction: column; height: 100%; }
.three-columns .vc_btn3, .three-columns a.button, .three-columns .btn { margin-top: auto; }

/* HD Electric black-screen failsafe (v1.0.2, carried into v1.0.3) (LAST rule, scoped to failsafe only).
   The failsafe script adds hd-failsafe-visible to <body> only when animsition
   has not added body.in within 2500ms. Normal animsition transitions are
   untouched: without that class, none of these rules apply. */
/* HD Electric — go-to-top ONLY, user-corrected 2026-10-25:
   Keep the to-top button at its original position (style.css bottom 40px
   plus Additional CSS margin-bottom 10px) — no bottom offset and no
   margin-bottom change here. Only raise z-index to 99999, so the to-top
   button sits above the WhatsApp button and wins the click where they
   overlap. Size, look, arrow, scroll logic and hide-at-top behaviour
   are intentionally NOT set here. */
.to-top-btn {
    z-index: 99999;
}
body.hd-failsafe-visible .animsition-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}
body.hd-failsafe-visible .animsition-overlay-slide {
    opacity: 1 !important;
    visibility: visible !important;
}
body.hd-failsafe-visible {
    overflow: visible !important;
    overflow-x: hidden !important;
}
body.hd-failsafe-visible .loading {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
body.in .loading {
    opacity: 0;
    visibility: hidden;
}