.site-header {
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:1000;
  height:var(--header-h);
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow var(--dur-fast);
}
.site-header.is-scrolled { box-shadow:var(--shadow-soft); }
.site-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; }

.brand { display:flex; align-items:center; gap:var(--sp-3); }
.brand-mark {
  width:52px; height:52px; border-radius:50%;
  background:var(--grad-saffron); display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.3rem; flex:0 0 auto;
}
.brand-name { font-family:var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.15; color:var(--color-ink); }
.brand-name small { display:block; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary-dark); margin-top:.25em; }

.navbar { display:flex; align-items:center; gap:var(--sp-6); }
.nav-links { display:flex; align-items:center; gap:var(--sp-5); font-weight:600; font-size:.94rem; }
.nav-links a { position:relative; padding:.4em 0; color:var(--color-text); }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-primary);
  transition:width var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--color-primary-dark); }

.nav-cta { display:flex; align-items:center; gap:var(--sp-4); }

.nav-toggle { display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--color-border); align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content:""; display:block; width:20px; height:2px; background:var(--color-ink); position:relative; transition:transform var(--dur-fast);
}
.nav-toggle span::before { position:absolute; top:-6px; }
.nav-toggle span::after { position:absolute; top:6px; }

@media (max-width:980px){
  .nav-links, .nav-cta .btn-outline { display:none; }
  .nav-toggle { display:flex; }
  .site-header { height:78px; }
  .nav-links.mobile-open {
    display:flex; flex-direction:column; position:absolute; top:78px; left:0; right:0;
    background:var(--color-surface); padding:var(--sp-5) var(--sp-6); gap:var(--sp-4);
    border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-soft);
  }
}
/* Logo */

.brand-logo{
    max-height:90px;
    width: 400px;
}

/* Desktop Header Height */

.site-header{
    height:100px;
}

.site-header .container{
    height:100%;
}

/* Mobile */

@media (max-width:980px){

    .site-header{
        height:78px;
    }

    .brand-logo{
        height:55px;
    }
}

/* Logo Final */

.brand-logo{
    width:420px !important;
    height:auto !important;
    max-width:none !important;
    display:block !important;
    object-fit:contain !important;
}

@media(max-width:768px){
    .brand-logo{
        width:220px !important;
    }
}
.site-header .container{
    width:100% !important;
    max-width:100% !important;
}

.brand{
    margin-left:0 !important;
}



/* =========================================
   SCPM PHARMACY - RESPONSIVE BRAND
   Logo + Text Side-by-Side on Mobile
   ========================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
    flex-shrink: 1;
}

.brand-logo-wrap {
    width: 68px;
    height: 68px;
    min-width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
}

.brand-text strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-text span {
    display: block;
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.2;
}

.brand-text small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    line-height: 1.2;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .brand {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
        width: auto;
        max-width: calc(100vw - 70px);
    }

    .brand-logo-wrap {
        width: 52px;
        height: 52px;
        min-width: 52px;
        flex: 0 0 52px;
    }

    .brand-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .brand-text strong {
        font-size: 13px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .brand-text span {
        font-size: 9px;
        line-height: 1.2;
        margin-top: 2px;
        white-space: nowrap;
    }

    .brand-text small {
        font-size: 8px;
        line-height: 1.2;
        margin-top: 3px;
        white-space: nowrap;
    }
}

/* Small Mobile */
@media (max-width: 400px) {

    .brand {
        gap: 6px;
        max-width: calc(100vw - 55px);
    }

    .brand-logo-wrap {
        width: 45px;
        height: 45px;
        min-width: 45px;
        flex-basis: 45px;
    }

    .brand-text strong {
        font-size: 11px;
    }

    .brand-text span {
        font-size: 8px;
    }

    .brand-text small {
        font-size: 7px;
    }
}