.page-title {
  color: var(--blue-700);       /* brand‑mid tone – readable on white  */
  font-weight: 600;             /* 600 keeps it assertive but not SHOUT */
  font-size: 1.75rem;           /* ≈ Bootstrap h3 / display‑6          */
  letter-spacing: .2px;
  margin-bottom: .10rem;        /* snug gap above the sub‑headline     */

  display: flex;                /* room for an optional icon           */
  align-items: center;
}

.page-subtitle {
  color: var(--gray-700);       /* muted neutral text                  */
  font-size: .95rem;
}
/* ───────────────────────────────────────────────────────────────
   Headlines
   ─────────────────────────────────────────────────────────────── */
.border-underline{
  border-bottom: 2px solid var(--blue-600);   /* brand accent      */
  padding-bottom: .35rem;
}
/* ───────────────────────────────────────────────────────────────
   Section tabs  (ul.pi-section-tabs)
   ─ single 3 px brand‑blue underline on the active tab
   ─ smooth hover for inactives
   ─ no secondary 1 px borders anywhere
   ─────────────────────────────────────────────────────────────── */

/* 1 ▸ <UL> : kill Bootstrap’s default bottom border completely   */
.pi-section-tabs{                 /* <ul class="pi-section-tabs">  */
  margin-bottom:.25rem;
  border-bottom:none !important;  /* ← gets rid of the pale rule   */
}

/* 2 ▸ <LIs>/<A> : base appearance                                */
.pi-section-tabs .nav-link{
  position:relative;              /* container for the pseudo‑line */
  background:transparent;
  border:0 !important;            /* nuke any Bootstrap tab border */
  padding:.45rem 1rem;
  font-weight:600;
  color:var(--blue-700);
  transition:background-color .15s,color .15s;
}

/* 3 ▸ inactive                                                    */
.pi-section-tabs .nav-link:not(.active){
  color:var(--gray-700);
  opacity:.85;
}
.pi-section-tabs .nav-link.active{
  background:transparent;   /* or any colour you prefer */
}
/* 4 ▸ hover/focus on inactive                                     */
.pi-section-tabs .nav-link:not(.active):hover,
.pi-section-tabs .nav-link:not(.active):focus-visible{
  /*background:var(--blue-100);*/
  color:var(--blue-700);
  border-radius:.25rem;
  outline:none;
}

/* 5 ▸ active – the ONLY underline comes from the pseudo‑element   */
.pi-section-tabs .nav-link.active{
  color:var(--blue-700);
}
.pi-section-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;                       /* stripe thickness             */
  background:var(--blue-600);       /* brand accent                 */
  pointer-events:none;              /* never blocks hovers/clicks   */
}

/* keep the line while hovering the active tab (same colour)       */
.pi-section-tabs .nav-link.active:hover::after,
.pi-section-tabs .nav-link.active:focus::after{
  background:var(--blue-600);
}

/* ───── src/assets/brand.css ───── */

/* ①  brand wrapper: just layout, no translucent block */
.brand{
    display:flex;
    align-items:center;
    gap:4px;
    text-decoration:none;
    /* ⬇ NO background, padding, or box-shadow here */
}

/* ②  icon chip: tiny card that hugs only the logo */
.brand-icon{
    /* existing styles … */

    position:relative;   /* makes left/right/top work */
    left:-15px;           /* ⬅︎ nudges the chip 4 px left; tweak to taste */
}

/* clamp the logo so it still centres nicely */

/* deeper shadow on hover/lift remains unchanged */
.brand:hover .brand-icon,
.brand:focus .brand-icon{
    box-shadow:0 4px 10px rgba(0,0,0,.50);
    transform:translateY(-1px);
}

.brand:hover .brand-icon,
.brand:focus .brand-icon{
    transform:translateY(-1px);           /* gentle lift           */
    box-shadow:0 3px 6px rgba(0,0,0,.35); /* deeper shadow         */

}

/* ③  logo itself remains crisp */
.brand-icon img{

    height:55px;      /* adjust to taste (36 px fits nicely in a 60 px bar) */
    width:auto;
    display:block;
}


.brand:hover::after{ width:100%; }

#chain-dropdown .dropdown-item:active,
#chain-dropdown .dropdown-item.active {
    background-color: transparent !important;
    color: inherit !important;
}

/* Online‑Pharmacies: low‑coverage toggle (header) */
.low-cov-toggle .form-check-input {
    /* raise the checkbox 1 px so it centres vertically */
    margin-top: 0.55rem;          /* default = 0.25 rem           */

}

.low-cov-toggle .form-check-label {
    /* nudge the text up the same amount */
    position: relative;
    top: 3px;                    /* bring baseline level          */
               /* keep it in line with radios   */
}