/* 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;
  }
}
/* Desktop header/nav: keep the menu on a single line as a tidy group with
   even, moderate gaps (rather than stretched edge-to-edge). Items cluster to
   the right of the logo. Scoped away from the JS mobile-nav states so the
   dropdown/fullscreen menu is untouched. */
@media only screen and (min-width: 768px) {
  .navContainer:not(.mobileDropDownNav):not(.mobileFullNav):not(.mobileSideNav) .navContent {
    text-align: right;
  }
  .navContainer:not(.mobileDropDownNav):not(.mobileFullNav):not(.mobileSideNav) #navTopLevel {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2em;
    width: 100% !important;
  }
  .navContainer:not(.mobileDropDownNav):not(.mobileFullNav):not(.mobileSideNav) #navTopLevel > li {
    float: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}
/* Top contact bar (eyebrow / .secondaryNav): the CMS JS wraps the address,
   phone and hours footer blocks into .secondaryNavContent and drops them into
   the bar, but those source blocks carry inline width:100%/float styles that
   make the columns stack/squeeze so the hours line wraps and the spacing is
   lopsided. On desktop, lay the three blocks out as one evenly distributed,
   single-line flex row. Scoped to >=768px so the mobile collapse is untouched. */
@media only screen and (min-width: 768px) {
  .secondaryNav .secondaryNavContent {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2em;
  }
  .secondaryNav .secondaryNavContent > .blockContainer {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .secondaryNav .secondaryNavContent > .blockContainer:last-child {
    text-align: right !important;
  }
  .secondaryNav .secondaryNavContent .blockContent,
  .secondaryNav .secondaryNavContent .blockText,
  .secondaryNav .secondaryNavContent .blockInnerContent {
    width: auto !important;
    float: none !important;
  }
  .secondaryNav .secondaryNavContent p {
    margin: 0 !important;
    white-space: nowrap !important;
  }
  /* Icon-to-text spacing. The template renders each icon as a ::before
     background image, but inconsistently: the phone/email icons hang off the
     <p>, while the hours/location icons hang off the block <div> — each with a
     different float + margin-top (5/7px) and a footer-only margin-bottom
     (25/50px). In the thin top bar that makes the gaps uneven and the icons sit
     misaligned. Lay every icon-carrying element as a centered flex row and
     reset the icon to a single even gap so each icon sits tight against its
     text on one line. */
  .secondaryNav .secondaryNavContent .blockContent,
  .secondaryNav .secondaryNavContent .blockText p.contactPhone {
    display: flex !important;
    align-items: center !important;
  }
  .secondaryNav .secondaryNavContent .blockContent::before,
  .secondaryNav .secondaryNavContent .blockText p.contactPhone::before {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 6px 0 0 !important;
  }
}
/* "The Pharmacy Team" member box (Luke Lamertina) on the Our Pharmacy page.
   The template renders this single-column items collection with .oneColCenter,
   which centers the item via float:none;margin-left:auto;margin-right:auto and
   center-aligns its text. Left-justify it: pin the item to the left edge and
   left-align its title/text. Scoped to this specific block id only. */
.items_fd132e06afb743ceaa334fa61a47b700.oneColCenter .item {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.items_fd132e06afb743ceaa334fa61a47b700 .item .contentTitle,
.items_fd132e06afb743ceaa334fa61a47b700 .item .itemInnerContent {
  text-align: left !important;
}
/* Header logo: the template sizes the logo image at 66.67% of its .logo
   container. Bump it up a bit so the brand mark reads larger in the header.
   Scoped to the header .logo img so the standalone footer logo is unaffected. */
.headerContent .logo img,
.logo img {
  width: 82% !important;
}
/* Newsletter section: the template's two-column form+heading block was replaced
   with the Lumistry capture embed (which renders its own titled signup form).
   Keep the template's framing (blue top rule, padding, white background from
   .blockWrap_d66f6a80...) but lay the embed out full-width and centered instead
   of the old 48% floated column. */
.newsletterEmbedBlock .blockImg.newsletterEmbed {
  width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.newsletterEmbedBlock .newsletterEmbed [data-lumistry-capture] {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}