/* custom overrides (loaded last) */
/* The logo was demoted from <h1> to <div> for correct heading hierarchy. One
   mobile rule in the original CSS targeted only `h1.logo img`; replicate it for
   `div.logo img` so the logo keeps its sizing (harmless on desktop where the
   computed width is already below this cap). */
.headerContent div.logo img { max-width: 220px; }
/* The store-info eyebrow uses the template's native .secondaryNav styling
   (white bar, dark text, blue location/phone/clock icons) — no custom visual
   rules needed. Only the mobile fixed-header + collapse-on-scroll behavior
   below is layered on. */
@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;
  }
}
/* Mobile page "Text me the FREE app now" SMS form: the third-party RxWiki widget
   injects its phone <input> with an inline color of #4a4a4a that renders too faint
   to read what is typed on some devices. Inline color carries no !important, so a
   stylesheet rule with !important wins the cascade. Force a clearly visible dark
   value (and -webkit-text-fill-color for iOS Safari, which otherwise overrides
   color). Scoped to the SMS widget input only. */
input[type="tel"]#phoneLanding,
input.phoneLanding[type="tel"],
.sms-widget input[type="tel"] {
  color: #27251f !important;
  -webkit-text-fill-color: #27251f !important;
  opacity: 1 !important;
}
input[type="tel"]#phoneLanding::placeholder,
input.phoneLanding[type="tel"]::placeholder,
.sms-widget input[type="tel"]::placeholder {
  color: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !important;
}