/* custom overrides (loaded last) */
/* eyebrow (top address bar): the template's .secondaryNavContent ships a centered
   flex group (justify-content:center; gap:3em; max-width:1400px; margin:auto), but
   the source wrapper carries inline text-align:right/width:100% and the JS-built
   structure lets the items spread edge-to-edge. Force the intended centered group so
   the address / phone / hours sit together in the middle (matches MSI reference).
   Each item's text box (.blockInnerContent) also ships max-width:270px with the icon
   ::before pinned at left:-20px, so make each item hug its own text. */
@media only screen and (min-width: 1025px) {
  .secondaryNav .blockContent {
    text-align: center !important;
  }
  .secondaryNavContent {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3em !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .secondaryNavContent > .blockContainer {
    float: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    text-align: left !important;
  }
  .secondaryNavContent .blockInnerContent {
    position: relative;
    max-width: none !important;
    width: -moz-max-content;
    width: max-content;
    text-align: left;
  }
}
@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;
  }
}
/* About page: make the "The Pharmacy Team" heading larger and centered. The base
   rule .contentTitle{text-align:left} overrides the .txa1 container's centering, so
   force center explicitly. */
.customTeamHeading {
  font-size: 2.75rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
@media (max-width: 767px) {
  .customTeamHeading { font-size: 2rem !important; }
}
/* About page: show staff photos in full (no circle crop). The template renders
   these as a square box (.imgShape:before padding-top:100%) with the photo set as
   a background using background-size:cover, which crops faces. Switch to contain
   and a soft rounded square so the entire portrait is visible, uncut. */
.customTeamMember .imgShape {
  background-size: contain !important;
  background-color: transparent !important;
  border-radius: 14px !important;
}
.customTeamMember .imgShape.circleImg { border-radius: 14px !important; }
.customTeamMember .imgEffect,
.customTeamMember .imgHover { border-radius: 14px !important; }
/* Homepage About circle: the image renders as a background-size:cover on a square
   .imgShape, so a portrait photo (Amy Schwan, 3:4) gets center-cropped and clips the
   top of her head. Anchor the crop to the top so her face stays fully visible. */
.block_cf2495fef3f246eda03a4a26d0afb874 .imgShape {
  background-position: center top !important;
}
/* Home newsletter block: the Lumistry capture embed renders its own heading
   (h3.lk-title) and subtitle (p.lk-sub). We keep our own H2 "Sign Up For Our
   Newsletter" and the form, but suppress the widget's duplicate title + subtitle
   (the widget always renders defaults, so an empty data-title can't remove it). */
.blockForm .lk-head { display: none !important; }