/* Lyng Pharmacy — shared sitewide styles.
   Extracted from per-page inline blocks so the browser downloads and caches
   them once instead of re-parsing the same CSS on all 110 pages. */

/* ===== lp-pg-css ===== */
.lp-pg{display:inline-flex;align-items:center;gap:8px;text-decoration:none!important;padding:4px 2px;transition:opacity .16s}
.lp-pg:hover{opacity:.82}
.lp-pg-ic{width:19px;height:19px;display:block;flex-shrink:0}
.lp-pg-lb{font-size:13px;color:rgba(255,255,255,.62);letter-spacing:.1px}
.lp-pg-nm{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.01em}

/* ===== lp-shopnav-css ===== */
/* Shop is the commercial link — give it weight without shouting */
.nav-links a[href="shop.html"],.nav-links a[href="/shop.html"]{
  position:relative;font-weight:700!important;color:#c25c17!important;
  background:rgba(232,118,44,.09);border-radius:8px;padding-left:13px!important;padding-right:13px!important}
.nav-links a[href="shop.html"]:hover,.nav-links a[href="/shop.html"]:hover{
  background:rgba(232,118,44,.17);color:#a84d13!important}
.lp-nav-scrolled .nav-links a[href="shop.html"],.lp-nav-scrolled .nav-links a[href="/shop.html"]{
  color:#ffb877!important;background:rgba(255,255,255,.10)}

/* ===== lp-topbar-css ===== */
.lp-topbar{display:block;background:linear-gradient(97deg,#101a4a 0%,#1a1f4e 26%,#1f3a86 58%,#2b64c4 100%);
 text-decoration:none!important;position:relative;z-index:1200}
.lp-topbar-in{max-width:1280px;margin:0 auto;padding:9px 1.5rem;display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap}
.lp-topbar .ic{display:inline-flex;color:rgba(255,255,255,.85);flex-shrink:0}
.lp-topbar .tx{font-family:'Outfit',sans-serif;font-size:13.5px;color:rgba(255,255,255,.92);letter-spacing:.1px}
.lp-topbar .tx b{color:#fff;font-weight:700}
.lp-topbar .go{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;color:#fff;
 background:rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;transition:background .16s;box-shadow:0 1px 0 rgba(255,255,255,.14) inset}
.lp-topbar:hover .go{background:rgba(255,255,255,.28)}
@media(max-width:700px){
  .lp-topbar-in{padding:8px 1rem;gap:.5rem}
  .lp-topbar .tx{font-size:12.5px}
  .lp-topbar .tx b{display:block}
  .lp-topbar .go{font-size:11.5px;padding:3px 10px}
}

/* ===== lp-dob-css ===== */
.lp-dob-wrap{position:relative}
.lp-dob-msg{display:none;font-size:12.5px;color:#b42318;line-height:1.5;margin-top:.35rem}
.lp-dob-msg.on{display:block}
.lp-dob-wrap input.bad{border-color:#e0796d!important;box-shadow:0 0 0 3px rgba(224,121,109,.12)!important}
input[type="date"]{cursor:pointer}

/* ===== lp-guard-css ===== */
img,.lp-guard{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none}
img{pointer-events:auto}
@media print{
  body:after{content:"\00a9 Lyng Pharmacy \2014 lyngpharmacy.uk \2014 1 Lyng Lane, West Bromwich B70 7RW";
    display:block;margin-top:14pt;padding-top:8pt;border-top:1px solid #999;font-size:8.5pt;color:#555;text-align:center}
}

/* ===== foot-tidy-css ===== */
@media(min-width:1000px){.lp-foot-grid{grid-template-columns:1.45fr 1fr 1fr 1fr 1fr;gap:1.5rem}}
@media(max-width:999px) and (min-width:640px){
  .lp-foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 2rem}
  .lp-foot-brand{grid-column:1/-1;margin-bottom:.5rem}
}
.lp-foot-col{align-content:start}
.lp-foot-col a{padding:.15rem 0;line-height:1.55}
.lp-foot-col h4.mt{margin-top:1.5rem}

/* ===== lp-acct-css ===== */
.lp2-acct{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #dfe5ee;background:#fff;color:#1a1f4e!important;
 font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;border-radius:999px;padding:8px 16px;text-decoration:none!important;
 transition:border-color .16s,background .16s,color .16s;white-space:nowrap;line-height:1}
.lp2-acct:hover{border-color:#1a1f4e;background:#f6f8fd}
.lp2-acct .ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
 background:#eef1fb;color:#1a1f4e;transition:background .16s,color .16s}
.lp2-acct:hover .ic{background:#1a1f4e;color:#fff}
.lp2-acct.in{border-color:#cbe7d8;background:#f2faf6}
.lp2-acct.in .ic{background:#0e7a44;color:#fff}
.lp2-acct.in:hover{border-color:#0e7a44;background:#eaf6f0}
.lp-nav-scrolled .lp2-acct,.lp2-nav.scrolled .lp2-acct{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff!important}
.lp-nav-scrolled .lp2-acct .ic,.lp2-nav.scrolled .lp2-acct .ic{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:1100px){.lp2-acct .tx{display:none}.lp2-acct{padding:8px 10px}}
/* header breathing room — nudge the menu block off the right edge */
.nav-inner{max-width:1280px;padding-right:2.4rem}
.nav-links{gap:2px;margin-left:auto;padding-right:.25rem}
.nav-links>a,.nav-links .lp2-dd-btn{padding-left:10px;padding-right:10px}
.nav-links .lp2-acct{margin-left:10px}
.nav-links .lp2-cta{margin-left:10px}
@media(max-width:1240px){
  .nav-inner{padding-right:1.6rem}
  .nav-links>a,.nav-links .lp2-dd-btn{padding-left:8px;padding-right:8px;font-size:12.5px}
}
@media(max-width:1024px){.nav-inner{padding-right:1.5rem}}

/* ===== lp-anim-css ===== */
/* promote only the elements that actually animate, so the compositor
   isn't re-rasterising their parents on every frame */
.nom-logo img,.nom-pill,.nm-ring,.fdy-img,.fdy-glow,.ap-ph{will-change:transform}
/* long pages: let the browser skip layout for sections still off-screen */
.lp-footer{content-visibility:auto;contain-intrinsic-size:1px 900px}


/* ===== lp-hdr2 two-row commerce header ===== */
/* ============ Experimental two-row commerce header ============
   Row 1: brand · product search · basket · account · CTA
   Row 2: category / service navigation
   Only applied to pages carrying .lp-hdr2 — the classic navbar stays elsewhere. */
.lp-hdr2{position:sticky;top:0;z-index:1100;background:#fff;border-bottom:1px solid #e9edf5;
 box-shadow:0 1px 0 rgba(18,33,59,.03)}
.lp-hdr2 .r1{max-width:1280px;margin:0 auto;padding:.85rem 1.5rem;display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem;align-items:center}
.lp-hdr2 .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.lp-hdr2 .brand img{width:42px;height:42px;display:block}
.lp-hdr2 .brand .nm{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:#1a1f4e;letter-spacing:-.02em;white-space:nowrap}
.lp-hdr2 .brand .nm i{color:#e8762c;font-style:normal}

/* search */
.h2-search{position:relative;max-width:620px;width:100%;justify-self:center}
.h2-search form{display:flex;align-items:center;background:#f4f6fa;border:1.5px solid #e6ebf3;border-radius:12px;
 transition:border-color .15s,background .15s,box-shadow .15s}
.h2-search form:focus-within{background:#fff;border-color:#1a1f4e;box-shadow:0 0 0 3px rgba(26,31,78,.08)}
.h2-search input{flex:1;border:none;background:none;padding:.8rem 1rem;font-family:'Outfit',sans-serif;
 font-size:15px;color:#12213b;outline:none;min-width:0}
.h2-search input::placeholder{color:#8b94ab}
.h2-search button{border:none;background:none;padding:.55rem .9rem;color:#1a1f4e;cursor:pointer;display:flex;align-items:center}
.h2-search button:hover{color:#e8762c}
/* suggestion panel */
.h2-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #e9edf5;
 border-radius:14px;box-shadow:0 22px 54px rgba(18,33,59,.16);padding:1.1rem 1.2rem;display:none;z-index:20;
 max-height:min(520px,70vh);overflow-y:auto}
.h2-panel.on{display:grid;grid-template-columns:1fr 1.25fr;gap:1.4rem}
@media(max-width:760px){.h2-panel.on{grid-template-columns:1fr;gap:1rem}}
.h2-panel h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
 color:#98a2b8;margin-bottom:.65rem}
.h2-pop a{display:flex;align-items:center;gap:.55rem;font-size:14px;color:#1a1f4e;text-decoration:none;
 padding:.4rem .3rem;border-radius:8px}
.h2-pop a:hover{background:#f7f9fc;color:#c25c17}
.h2-pop a svg{color:#0e7a44;flex-shrink:0}
.h2-res a{display:grid;grid-template-columns:46px 1fr auto;gap:.7rem;align-items:center;padding:.45rem .3rem;
 border-radius:9px;text-decoration:none}
.h2-res a:hover{background:#f7f9fc}
.h2-res img{width:46px;height:46px;object-fit:contain;background:#f7f9fc;border-radius:8px;border:1px solid #eef1f7}
.h2-res .ph{width:46px;height:46px;background:#f4f6fa;border-radius:8px}
.h2-res .nm{font-size:13.5px;color:#12213b;line-height:1.35}
.h2-res .nm small{display:block;color:#98a2b8;font-size:11.5px}
.h2-res .pr{font-size:13.5px;font-weight:700;color:#12213b}
.h2-none{font-size:13.5px;color:#68738c;padding:.4rem .3rem}

/* right cluster */
.h2-right{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.h2-ico{position:relative;display:flex;align-items:center;gap:7px;text-decoration:none;color:#1a1f4e;
 border:1px solid #e6ebf3;border-radius:10px;padding:.55rem .8rem;font-family:'Outfit',sans-serif;
 font-size:13.5px;font-weight:600;transition:border-color .15s,background .15s;white-space:nowrap}
.h2-ico:hover{border-color:#c9d3e4;background:#f9fbfd}
.h2-ico .n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:999px;background:#e8762c;
 color:#fff;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px}
.h2-ico .n.on{display:flex}
.h2-cta{background:#e8762c;color:#fff!important;border:none;border-radius:10px;padding:.62rem 1.1rem;
 font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
 box-shadow:0 6px 16px rgba(232,118,44,.28);transition:background .15s}
.h2-cta:hover{background:#c25c17}

/* row 2 — categories */
.lp-hdr2 .r2{border-top:1px solid #eef1f7;background:#fff}
.h2-cats{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:.2rem;
 overflow-x:auto;scrollbar-width:none}
.h2-cats::-webkit-scrollbar{display:none}
.h2-cats a,.h2-cats button{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
 font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:#1a1f4e;text-decoration:none;
 padding:.72rem .8rem;white-space:nowrap;cursor:pointer;border-bottom:2.5px solid transparent;transition:color .14s,border-color .14s}
.h2-cats a:hover,.h2-cats button:hover{color:#c25c17;border-bottom-color:#e8762c}
.h2-cats a.shop{color:#c25c17}
.h2-cats .sep{width:1px;height:20px;background:#e9edf5;margin:0 .5rem;flex-shrink:0}

/* mobile */
.h2-burger{display:none;width:40px;height:40px;border:1px solid #e6ebf3;border-radius:10px;background:#fff;
 align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.h2-burger span{display:block;width:17px;height:2px;background:#1a1f4e;border-radius:2px;position:relative}
.h2-burger span:before,.h2-burger span:after{content:'';position:absolute;left:0;width:17px;height:2px;background:#1a1f4e;border-radius:2px}
.h2-burger span:before{top:-5.5px}.h2-burger span:after{top:5.5px}
@media(max-width:940px){
  .lp-hdr2 .r1{grid-template-columns:auto auto;gap:.7rem;padding:.7rem 1rem;justify-content:space-between}
  .h2-search{grid-column:1/-1;order:3;max-width:none}
  .h2-burger{display:flex}
  .h2-ico .tx{display:none}
  .h2-ico{padding:.55rem .7rem}
  .h2-cta{display:none}
  .lp-hdr2 .brand .nm{font-size:17px}
  .lp-hdr2 .brand img{width:36px;height:36px}
  .h2-cats{padding:0 1rem}
  .h2-cats a,.h2-cats button{font-size:13.5px;padding:.65rem .6rem}
}
@media(max-width:420px){.lp-hdr2 .brand .nm{display:none}}

/* ===== lp-hdr2 mobile drawer ===== */
#h2mob{position:fixed;inset:0;z-index:6400;display:none}
#h2mob.on{display:block}
#h2mob .ovl{position:absolute;inset:0;background:rgba(18,22,58,.5)}
#h2mob .pane{position:absolute;top:0;right:0;bottom:0;width:min(330px,88vw);background:#fff;overflow-y:auto;
 padding:1rem 1.1rem 2rem;box-shadow:-18px 0 50px rgba(18,22,58,.28);animation:h2In .26s cubic-bezier(.22,.61,.36,1)}
@keyframes h2In{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
#h2mob .hd{display:flex;align-items:center;justify-content:space-between;padding-bottom:.9rem;border-bottom:1px solid #eef1f7;margin-bottom:.6rem}
#h2mob .hd .brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:#1a1f4e}
#h2mob .hd .brand i{color:#e8762c;font-style:normal}
#h2mob .hd button{width:34px;height:34px;border:none;border-radius:50%;background:#f1f4fa;color:#1a1f4e;font-size:19px;cursor:pointer}
#h2mob a,#h2mob button.pri,#h2mob .pane>button{display:block;width:100%;text-align:left;background:none;border:none;
 font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:#1a1f4e;text-decoration:none;
 padding:.75rem .4rem;border-bottom:1px solid #f4f6fa;cursor:pointer}
#h2mob a:hover,#h2mob .pane>button:hover{color:#c25c17}
#h2mob a.pri{color:#c25c17}
#h2mob .ft{margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem}
#h2mob .ft a{border:none;border-radius:10px;text-align:center;padding:.8rem;font-weight:700}
#h2mob .ft .acct{background:#f1f4fa;color:#1a1f4e}
#h2mob .ft .cta{background:#e8762c;color:#fff}
#h2mob .ft .tel{background:#fff;color:#1a1f4e;border:1px solid #dfe5ee}

/* ---- search panel: services + typing layout ---- */
.h2-panel.on{display:grid;grid-template-columns:1fr 1.25fr;gap:1.4rem}
.h2-panel.on.typing{grid-template-columns:1fr 1fr}
.h2-panel.on.typing > .h2-col:only-child{grid-column:1/-1}
@media(max-width:760px){.h2-panel.on,.h2-panel.on.typing{grid-template-columns:1fr;gap:1rem}}
.h2-svc a.svc{display:grid;grid-template-columns:32px 1fr auto;gap:.6rem;align-items:center;padding:.5rem .35rem;
 border-radius:9px;text-decoration:none}
.h2-svc a.svc:hover{background:#f4faf6}
.h2-svc .ic{width:32px;height:32px;border-radius:9px;background:#e7f4ef;color:#0e7a44;display:flex;align-items:center;justify-content:center}
.h2-svc .nm{font-size:13.5px;color:#12213b;line-height:1.35;font-weight:600}
.h2-svc .nm small{display:block;font-size:11.5px;color:#98a2b8;font-weight:400;margin-top:.1rem}
.h2-svc .go{color:#c25c17;font-size:15px;font-weight:700}
/* on phones the keyboard eats the lower half — keep results tight to the top */
@media(max-width:760px){
  .h2-panel{max-height:min(340px,44vh)}
  .h2-panel.on.typing .h2-col.pop{display:none}
  .h2-panel h4{margin-bottom:.45rem}
  .h2-res a,.h2-svc a.svc{padding:.4rem .3rem}
}