/* Generated by scripts/build-css.mjs from templates/partials.mjs — do not edit directly. */

body { background-color: #ffffff;font-family: Lexend;font-weight: 300;color: #57575A;font-size: 16px;line-height: 160%; }
blockquote { font-family: Libre Baskerville;font-style: normal; }
a { color: #bb0a07; }
a:hover { color: #2a2a2a; }
.wrap { width: 1280px;max-width: 90%; }
.logo.logoDefault { height: 46px; width: auto; max-width: none; }
#main-content { width: 100%; }
.content-inner.products[data-grid] .product,.content-inner.products[data-grid-normal] .product { padding-left: 30.000000px;padding-right: 30.000000px;margin-bottom: 60px; }
.content-inner.products[data-grid],.content-inner.products[data-grid-normal] { margin-left: -30px;margin-right: -30px; }
body:not(.is-loaded):after, body:not(.is-loaded):before { content: none !important; }
::selection { background: #BB0A07; }
::-moz-selection { background: #BB0A07; }
.header-info-text i,
.navigator .menu-primary > li:hover > a,
.navigator .menu-primary > li.current-menu-item > a,
.navigator .menu-primary li .sub-menu li:hover > a,
.page-title-inner,
.widget-title,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.products li.product .woocommerce-loop-product__link .price,
.product .summary .price,
.infoBox i, .infoBox strong,
.breadcrumbs a {
	color: #BB0A07;
}
.navigator .menu-primary li .sub-menu,
.menu-top li .sub-menu,
.search-box .search-form label .screen-reader-text,
.site-footer .footer-copyright .social-icons a,
.infoList,
.infoBox i {
	background: linear-gradient(135deg, #E9E9E9 20%, #B9BBBC 180%);
}
input[type="submit"], input[type="button"], button, .button:not([class*="product_type_"]),
.button.primary:hover {
	background-color: #2A2A2A;
}
.button:not([class*="product_type_"]).primary,
span.onsale {
	background-color: #DA291C;
}
.site-footer { border-top: 1px solid rgba(0,0,0,.1); margin-top: 60px; }
/* The theme only reveals .woocommerce-categories via a "hidden-categories"
   toggle sibling we don't render; force it visible as a simple wrapping grid. */
.woocommerce-categories { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 20px; white-space: normal; overflow: visible; }
.woocommerce-categories li { display: block !important; margin-right: 0 !important; width: 260px; height: 260px; }
.woocommerce-categories li a { height: 100%; justify-content: center; }
.woocommerce-categories li img { width: 170px; height: 170px; object-fit: cover; }


/* ---- Header redesign: contact topbar, single-row nav, sticky header ---- */
#site-topbar .site-topbar-inner { padding: 12px 0; flex-wrap: wrap; row-gap: 8px; }
.topbar-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; }
.topbar-contact .topbar-contact-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(255,255,255,0.85); }
.topbar-contact .topbar-contact-item i { color: #ffffff; font-size: 15px; }
a.topbar-contact-item:hover { color: #ffffff; }
@media only screen and (max-width: 767px) { .topbar-address { display: none; } }
@media only screen and (max-width: 480px) { .topbar-contact { gap: 8px 18px; } }

#site-header .site-header-inner, #site-header-sticky .site-header-inner { padding: 18px 0 !important; align-items: center !important; }
#site-header .header-brand, #site-header-sticky .header-brand { margin: 0 !important; width: auto !important; flex: 0 0 auto !important; }
#site-header nav.main-nav, #site-header-sticky nav.main-nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; margin-top: 0 !important; }
#site-header nav.main-nav .menu-primary, #site-header-sticky nav.main-nav .menu-primary { flex-grow: 0 !important; justify-content: center !important; align-items: center !important; gap: 40px !important; }
#site-header .header-actions, #site-header-sticky .header-actions { display: flex !important; align-items: center !important; gap: 26px !important; flex: 0 0 auto !important; }
#site-header .header-actions .menu-extras, #site-header-sticky .header-actions .menu-extras { margin: 0 !important; margin-top: 0 !important; gap: 18px !important; }
#site-header .header-actions .header-cta, #site-header-sticky .header-actions .header-cta { white-space: nowrap; }
#site-header-sticky .site-header-inner { padding: 12px 0 !important; }
#site-header-sticky .logo.logoDefault { height: 36px; }
#site-header-sticky { box-shadow: 0 2px 15px rgba(0,0,0,0.08); }

/* Mobile (<1025px, matching the theme's own .menu-primary breakpoint): the
   desktop nav links, search/cart icons, and "Book a Service" button all
   collapse away, leaving only the logo and the hamburger toggle — the mobile
   nav panel below carries the same links plus Book a Service in its footer,
   so nothing is actually lost, just relocated off the persistent header bar. */
@media only screen and (max-width: 1024px) {
  #site-header .site-header-inner, #site-header-sticky .site-header-inner { flex-wrap: wrap !important; row-gap: 14px !important; padding: 16px 0 !important; }
  #site-header .header-actions, #site-header-sticky .header-actions { margin-left: auto !important; }
  #site-header .header-actions .menu-extras, #site-header-sticky .header-actions .menu-extras,
  #site-header .header-actions .header-cta, #site-header-sticky .header-actions .header-cta {
    display: none !important;
  }
  .mobile-menu-toggle { display: flex !important; }
}
@media only screen and (max-width: 480px) {
  .logo.logoDefault { height: 32px; }
  #site-header-sticky .logo.logoDefault { height: 28px; }
}

/* ---- Mobile hamburger + off-canvas nav panel ---- */
/* appearance:none on all 3 custom buttons below: components.css sets
   appearance:button on all button/input[type=button] elements sitewide,
   which makes the browser paint native OS button chrome (a solid themed
   fill) UNDER our own background/border — background:none alone doesn't
   stop it. The theme's own style.css also has a sitewide "button:hover {
   background-color: #BB0A07 }" (a bare element selector, meant for real
   <button> CTAs elsewhere) that otherwise paints these small icon-only
   buttons solid red on hover/tap — reset it explicitly below, since a class
   selector's specificity beats a bare element selector regardless of
   source order. */
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus,
.mobile-nav-close:hover, .mobile-nav-close:focus,
.mobile-nav-expand:hover, .mobile-nav-expand:focus {
  background: none !important;
}
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  user-select: none;
}
.mobile-menu-toggle span { display: block; width: 100%; height: 2px; background: #2A2A2A; border-radius: 2px; }

.mobile-nav-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw;
  background: #ffffff; z-index: 9999; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex; flex-direction: column; overflow-y: auto;
}
body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; }
body.mobile-nav-open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); flex: 0 0 auto; }
.mobile-nav-panel-header .logo { height: 32px; width: auto; }
.mobile-nav-close { width: 30px; height: 30px; border: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; position: relative; flex: 0 0 auto; user-select: none; }
.mobile-nav-close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: #2A2A2A; }
.mobile-nav-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav-content { flex: 1; display: flex; flex-direction: column; }
.mobile-nav-menu { list-style: none; margin: 0; padding: 8px 0 0; }
.mobile-nav-menu > li > a { display: block; padding: 14px 20px; font-weight: 600; color: #2A2A2A; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.mobile-nav-menu > li:first-child > a { border-top: 0; }
.mobile-nav-dept-row { display: flex; align-items: stretch; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.mobile-nav-dept-row > a { flex: 1; display: block; padding: 14px 20px; font-weight: 600; color: #2A2A2A; }
.mobile-nav-expand { width: 48px; border: 0; background: none; appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; user-select: none; }
.mobile-nav-expand span { display: block; width: 9px; height: 9px; border-right: 2px solid #57575A; border-bottom: 2px solid #57575A; transform: rotate(45deg); transition: transform 0.2s ease; }
.mobile-nav-dept.is-expanded > .mobile-nav-dept-row .mobile-nav-expand span { transform: rotate(-135deg); }
.mobile-nav-submenu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; background: #f7f7f7; transition: max-height 0.25s ease; }
.mobile-nav-dept.is-expanded > .mobile-nav-submenu { max-height: 2000px; }
.mobile-nav-submenu > li > a { display: block; padding: 10px 20px 10px 34px; font-size: 14px; color: #57575A; }
.mobile-nav-submenu .mobile-nav-dept-row > a { padding-left: 34px; font-size: 14px; font-weight: 500; }
.mobile-nav-submenu .mobile-nav-submenu > li > a { padding-left: 48px; }

.mobile-nav-footer { margin-top: auto; padding: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; }
.mobile-nav-footer .button.full { display: block; text-align: center; }
.mobile-nav-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mobile-nav-contact a { display: flex; align-items: center; gap: 8px; color: #57575A; font-size: 14px; }
@media only screen and (min-width: 1025px) {
  .mobile-nav-backdrop, .mobile-nav-panel { display: none; }
}

/* The theme only reveals the sticky header when scrolling back up
   (.site.scrolling_up .site-header-sticky.active); we want it to stay put
   any time it's scrolled past the main header, in either direction. */
.site-header-sticky.active { transform: translateY(0) !important; }

/* ---- Shop menu, two levels ----
   Level 1 (hover "Shop"): a fixed-size panel with the 4 departments listed
   as a left-hand rail. Level 2 (hover a department in that rail): its
   subcategories fill a content pane to the right, split into short parallel
   columns. The panel is one fixed-size box so it never has to grow sideways
   off a specific tab's position (which is what ran off the edge of the
   screen before). Which panel is showing is controlled by a JS-toggled
   ".active" class — see the DEPT_MENU_JS script constant further down this
   file — not CSS :hover, because a pure-CSS sibling-hover chain here proved
   unreliable for real mouse movement. */
.shop-menu > .sub-menu.shop-menu-panel {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  margin-left: -440px !important;
  width: auto !important;
  padding: 0 !important;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.shop-menu > .sub-menu.shop-menu-panel:before { display: none !important; }
/* Grid (not flex) so the 4 tabs can be explicitly placed in column 1 across
   4 rows while .dept-content (column 2) spans the full height regardless of
   which panel inside it is currently active. */
.shop-menu-layout { display: grid; grid-template-columns: 220px 660px; grid-template-rows: repeat(4, auto); width: 880px; max-width: 90vw; }
.dept-tab:nth-child(1) { grid-column: 1; grid-row: 1; }
.dept-tab:nth-child(2) { grid-column: 1; grid-row: 2; }
.dept-tab:nth-child(3) { grid-column: 1; grid-row: 3; }
.dept-tab:nth-child(4) { grid-column: 1; grid-row: 4; }
/* Fixed min-height sized for the tallest department (Lifts, 3 columns) so
   switching to a short department (e.g. Air Compressors, 1 column) doesn't
   shrink the panel and shift the tabs' Y position out from under the
   cursor mid-hover — that made department tabs other than the tallest
   effectively unclickable (the tab moved before the click landed). */
.dept-content { grid-column: 2; grid-row: 1 / -1; min-height: 440px; }
.dept-tab { border-right: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.dept-tab:last-child { border-bottom: none; }
.dept-tab > a {
  display: block !important;
  padding: 14px 20px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.3;
  white-space: normal;
}
.dept-tab > a:before, .dept-tab > a:after { display: none !important; }
.dept-tab { position: relative; z-index: 2; }
.dept-tab > a, .dept-tab.active > a { background: transparent; }
.dept-tab.active > a { background: #f7f7f7; color: #BB0A07 !important; }
.dept-content { position: relative; z-index: 1; min-width: 0; }
.dept-panel { display: none; padding: 30px 34px; }
.dept-panel.active { display: block; }
.dept-flyout { display: flex; flex-wrap: nowrap; gap: 32px; }
.dept-col { list-style: none; margin: 0; padding: 0; width: 190px; flex: 0 0 auto; }
.dept-col + .dept-col { border-left: 1px solid rgba(0, 0, 0, 0.08); padding-left: 28px; margin-left: -4px; }
.dept-col li a {
  white-space: normal !important;
  display: block !important;
  padding: 6px 0 6px 16px !important;
  font-size: 14px !important;
  line-height: 1.4;
  text-align: left !important;
  color: #57575A !important;
}
.dept-col li a:before { left: 0 !important; width: 5px !important; height: 5px !important; }
.dept-col li a:hover, .dept-col li a:hover:before { color: #BB0A07 !important; }
@media only screen and (max-width: 1024px) {
  .shop-menu-layout { display: none !important; } /* desktop-only mega menu; nav collapses below 1025px anyway */
}


/* ---- Typography: Orbitron for headings, Space Grotesk for body ---- */
body, input, textarea, select, button, .button:not([class*="product_type_"]) {
  font-family: 'Space Grotesk', Lexend, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.page-title-inner,
.product_title,
.woocommerce-loop-product__title,
.widget-title,
.hero-slide-content h2 {
  font-family: 'Orbitron', sans-serif !important;
}
/* Elementor's own global typography settings (used by heading/text widgets
   on the Elementor-built pages — home, about-us, etc.) read these custom
   properties rather than a plain font-family rule. */
.elementor-kit-15 {
  --e-global-typography-primary-font-family: "Orbitron";
  --e-global-typography-secondary-font-family: "Orbitron";
  --e-global-typography-text-font-family: "Space Grotesk";
  --e-global-typography-accent-font-family: "Space Grotesk";
}


/* ---- Home page hero carousel (pure CSS crossfade) ---- */
.hero-carousel { position: relative; width: 100%; height: 560px; overflow: hidden; background: #1a1a1a; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation-name: heroFade;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 6s; }
.hero-slide-3 { animation-delay: 12s; }
.hero-slide-4 { animation-delay: 18s; }
.hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,15,15,0.82) 0%, rgba(15,15,15,0.55) 45%, rgba(15,15,15,0.15) 80%); }
.hero-slide-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 620px; color: #fff; gap: 14px; padding: 0 20px; }
.hero-slide-eyebrow { color: #ff8a80; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.hero-slide-content h2 { color: #fff; font-size: 42px; line-height: 1.15; margin: 0; }
.hero-slide-content p { color: rgba(255,255,255,0.88); font-size: 18px; line-height: 1.5; margin: 0; max-width: 520px; }
.hero-slide-content .button { width: fit-content; }
@keyframes heroFade {
  0% { opacity: 0; }
  2% { opacity: 1; }
  23.00% { opacity: 1; }
  25.00% { opacity: 0; }
  100% { opacity: 0; }
}
@media only screen and (max-width: 1024px) {
  .hero-carousel { height: 460px; }
  .hero-slide-content h2 { font-size: 32px; }
}
@media only screen and (max-width: 640px) {
  .hero-carousel { height: 420px; }
  .hero-slide-overlay { background: linear-gradient(180deg, rgba(15,15,15,0.35) 0%, rgba(15,15,15,0.85) 65%); }
  .hero-slide-content { max-width: 100%; justify-content: flex-end; padding: 0 20px 32px; }
  .hero-slide-content h2 { font-size: 26px; }
  .hero-slide-content p { font-size: 15px; }
}
/* The section right after the hero ("5 Reasons You Can Trust...") has a
   -112px top margin in the original design, meant to pull it up over the
   thin empty spacer that used to sit behind the transparent header. With
   the hero carousel in that spot instead, the negative margin pulls it up
   over the hero's own content (most visibly the CTA button on mobile).
   Cancel it only right after our hero, not sitewide. */
.hero-carousel + .elementor-section .elementor-element-2b564a2 { margin-top: 0 !important; }
/* The decorative arrow next to "5 Reasons You Can Trust Precision Shop
   Services" (data-id 031c0e6) is absolutely positioned in the original
   design and overlaps that heading text. Nudge it right with a transform
   (rather than overriding its "left" value) so it clears the text at both
   breakpoints the original per-page CSS defines, without duplicating
   those pixel values here. */
.elementor-element-031c0e6 { transform: translateX(120px) !important; }


.product-gallery { display: flex; flex-direction: column; gap: 14px; }
.product-gallery__main {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.product-gallery__main-img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  background: #f7f7f7; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px;
}
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.product-gallery__thumb {
  display: block; width: 72px; height: 72px; flex-shrink: 0; padding: 0; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
}
.product-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active, .product-gallery__thumb:hover { border-color: #BB0A07; }
.product-lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.97); padding: 50px;
}
.product-lightbox.is-open { display: flex; }
.product-lightbox__img { max-width: 90vw; max-height: 80vh; object-fit: contain; }
.product-lightbox__close, .product-lightbox__nav {
  position: absolute; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff;
  cursor: pointer; line-height: 1; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.product-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.product-lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 18px; }
.product-lightbox__prev { left: 20px; }
.product-lightbox__next { right: 20px; }
.product-lightbox__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: 0.8; }
body.product-lightbox-open { overflow: hidden; }
@media only screen and (max-width: 600px) {
  .product-lightbox { padding: 16px; }
  .product-lightbox__nav { width: 40px; height: 40px; }
}