/* custom overrides (loaded last) */
@media (max-width: 767px) {
  .headerAndNavContainer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  /* eyebrow (secondary nav) collapses on scroll to reclaim space */
  .secondaryNav {
    overflow: hidden;
    max-height: 300px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .secondaryNav.eyebrow-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
  }
}
/* contact page: the address / phone / hours text wrappers ship full-bleed and
   sit flush against the viewport edge (the template's nested float layout eats
   padding on the outer block). Indent the innermost text wrapper by the same 4%
   the site's content column uses, so the text lines up with the cards below.
   Scoped to .blockInnerContent so the card grid (itemInnerContent) is untouched. */
.contactPage .primaryContent .blockInnerContent {
  padding-left: 4% !important;
  padding-right: 4% !important;
  box-sizing: border-box;
}
/* Contact 'Our Location' card: address lines sit above the Get Directions link,
   matching the demo's card layout. */
.contactPage .itemContent .ms-addr {
  margin: 0 0 0.5em;
  line-height: 1.5;
}
/* Keyless Google Maps embed that replaces the (key-less, blank) interactive map.
   Full-width block under the contact cards, tall like the demo's map. */
.contactPage .scMap.contentImg,
.contactPage .scInteractiveMap {
  width: 100%;
  height: auto;
}
.contactPage .ms-map-embed {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
/* /mobile/ page: store-badge list rebuilt into the app block. Strip the
   template's list styling (the block ships .lstsy1, which forces disc bullets +
   indent at higher specificity) and lay the two badges out inline at a sensible
   size. !important keeps these scoped overrides ahead of the template rules. */
.mobileInfo ul.appLinks {
  list-style: none !important;
  margin: 1.5em 0 0 !important;
  padding: 0 !important;
}
.mobileInfo ul.appLinks li {
  display: inline-block;
  margin: 0 14px 10px 0;
}
.mobileInfo ul.appLinks li img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}
/* scroll-reveal fail-safe. Below the full-height hero, the template hides every
   content block with .blockAnim--hidden (opacity:0 plus off-screen transforms
   like translateY(50px)/translateX(-100vw)/scale(0)) and relies on a JS
   IntersectionObserver to reveal each block as it scrolls into view. In the
   embedded preview (and any browser where that observer doesn't fire) the blocks
   never reveal, so the homepage looks empty below the hero. Worse, the observer
   also RE-hides blocks once they leave the viewport, so a one-time reveal can't
   stick. We make the content fail open: force the animated children visible and
   untransformed regardless of the hidden class. This keeps the final (revealed)
   state the design intends; it only drops the fade-in motion. Parallax bg images
   are excluded, exactly as the template's own selector excludes them. */
.blockAnim--hidden > *:not(.plxBg-img) {
  opacity: 1 !important;
  -ms-transform: none !important;
  transform: none !important;
}
/* image reveal fail-safe. Content images (.contentImg) ship at opacity:0 and a
   template script fades each in by adding a .visible class once it has loaded
   and scrolled into view. For "shape" images (.imgShape, e.g. the circular
   service icons and the About photo) the script also paints the picture as the
   wrapper's background-image and leaves the real <img> nearly transparent. When
   that script doesn't run in the embedded preview, every content image stays
   invisible: empty circles and blank service cards. We reveal the real <img>
   instead: force .contentImg visible, and for shape wrappers give the absolutely
   positioned <img> object-fit:cover so it fills the square/circle exactly the way
   the intended background-size:cover would (the wrapper already clips it via its
   overflow:hidden + border-radius). The only template context where a *.visible*
   content image is meant to stay hidden is .fixedHeightGallery (a crossfade
   slideshow), which does not exist anywhere on this site, so forcing visibility
   is safe here. */
.contentImg {
  opacity: 1 !important;
  -ms-transform: none !important;
  transform: none !important;
}
.imgShape .contentImg {
  object-fit: cover;
  object-position: 50% 50%;
}
/* quick-link grid icons: "Get Directions" and "Delivery" ship as circular
   photos in the demo; we replace the <img> with an inline-SVG icon that fills
   the same circular shape wrapper (.imgShape clips it to a circle via its
   border-radius + overflow:hidden). Light brand-tint background, primary-blue
   glyph, matching the rest of the palette. */
.itemImg .gridIcon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #c2d8f0;
  color: #003e7e;
}
.itemImg .gridIcon svg {
  width: 44%;
  height: 44%;
  fill: currentColor;
  display: block;
}
/* sticky footer: on short pages (e.g. a single service page) the content does
   not fill the viewport, so the footer used to ride up and leave blank space
   below it. Make the page a full-height flex column and let the footer's own
   auto top-margin absorb the slack, pinning it to the bottom of the viewport.
   The header (fixed/position on mobile) and the floated primary content are
   unaffected -- they keep their natural height; only the leftover space is
   pushed above the footer. */
.pageContainer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}
.pageContainer > .footerContainer {
  margin-top: auto;
}

/* The mobile hamburger (#navTrigger) ships in the static HTML as a direct
   <body> child with an inline `display:block`. On the demo the nav engine
   hides it on desktop viewports (its `.hide()` fires from JS driven by the
   released global `$`, which we no longer expose), so here it lingers as a
   ~584px-tall block below the site wrapper -- the empty space under the
   footer. Restore the demo's desktop end-state: keep the stray trigger out
   of the desktop layout entirely. Scoped to the direct body child so a
   header-relocated trigger (if the engine ever runs) is untouched. */
@media (min-width: 768px) {
  body > #navTrigger { display: none !important; }
}