/* 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;
  }
}
/* screen-reader-only text: gives the logo H1 real content without visible change */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* top contact bar (eyebrow): even icon-to-text gap + no wrapping.
   Template positions each icon as an absolute :before at left:-20px, but the
   three icon images have different intrinsic widths (location 13px, phone/hours
   16px), so the visible gap to the text varied (7px vs 4px) and the long hours
   string wrapped. Scoped to the desktop row layout (the bar stacks into a
   centered column at <=1024px, handled by the template). We pin each icon's
   rendered right edge to a uniform position (background-position:right) inside a
   fixed-width box and use a single left offset, so the icon-to-text gap is an
   identical 6px for all three regardless of image width. */
@media (min-width: 1025px) {
  /* These three blocks live in the footer source (where they carry an inline
     text-align:right;width:100% from the footer right-align step) and are
     relocated into the bar by the platform JS, dragging that inline style with
     them. Left over, it pushed each block to full width and right-aligned the
     text, detaching the phone number from its (left-anchored) icon. Reset both
     so the text hugs its icon. !important is needed to beat the inline style. */
  .secondaryNavContent .blockContainer {
    width: auto !important;
    text-align: left !important;
  }
  .secondaryNavContent .blockWrap_d1c3085901d84645b31bd09c4bae76b6 .blockInnerContent:before,
  .secondaryNavContent .blockWrap_ec68df6a64454b0d992c5244bb2cac55 .blockInnerContent:before,
  .secondaryNavContent .blockWrap_f00a8333e723460baad25b5365b52e36 .blockInnerContent:before {
    width: 18px;
    margin-right: 0;
    margin-top: 0;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background-position: right center;
    vertical-align: middle;
  }
  .secondaryNavContent .blockInnerContent {
    white-space: nowrap;
  }
}
/* newsletter block: the duplicate plain heading column is removed in the build,
   leaving only the Lumistry form (which carries its own heading + email field +
   Subscribe button). The template's two-column layoutD floats the form to 48%
   width on one side; center it instead so the standalone form sits in the
   middle of the block, matching the original template's balanced look. */
.block_d66f6a80367049f7b70e5a4e6d422571.layoutD--vAlign1 {
  justify-content: center;
}
.block_d66f6a80367049f7b70e5a4e6d422571 .blockImg.blockForm {
  float: none;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* contact page cards: the template gives every .itemContent p a 1.5em
   padding-bottom, so the Our Location and Pharmacy Hours cards rendered with
   large gaps between lines while How to Reach Us looked tight (its phone line
   carries .contactPhone padding-bottom:0 and the fax line is :last-child).
   Collapse the gap on the marked card bodies so all three cards match. */
.contactCardBody p,
.contactCardBody ul {
  padding-bottom: 0;
  margin-bottom: 0.35em;
}
.contactCardBody p:last-child,
.contactCardBody ul:last-child {
  margin-bottom: 0;
}