/* ==========================================================================
   Pharmazon — Service pages · shared base · v2
   Tokens, labels, headings and buttons every service page uses. Each page
   then has its own theme in service/<layout>.css: adhd ("focus"),
   weight ("momentum") and fertility ("the cycle").
   ========================================================================== */

.pz--service{--sv-e:var(--pz-edge);--sv-r:24px}
.pz--service main{overflow-x:clip}

.sv-tag{display:flex;align-items:center;gap:12px;font-family:var(--pz-ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-teal);margin-bottom:20px}
.sv-tag::before{content:"";width:28px;height:1px;background:currentColor}
.sv-h2{font-family:var(--pz-ui);font-weight:500;font-size:clamp(38px,4.4vw,72px);line-height:1;letter-spacing:-.045em;color:var(--pb-text);text-wrap:balance}
.sv-h2 span{color:var(--pb-teal)}
.sv-h2 .wd{color:inherit}
.sv-lede{font-family:var(--pz-body);font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--pb-soft);max-width:46ch}
.sv-head{margin-bottom:clamp(30px,3.4vw,52px)}
.sv-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 60px;flex-wrap:wrap}
.sv-head--row .sv-h2{max-width:14ch}
.sv-actions{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap}

.sv-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#2DB37A;flex:none}
.sv-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #2DB37A;animation:sv-ping 2s var(--pz-expo) infinite}
.sv-tag .sv-live{margin-right:-2px}
.sv-tag:has(.sv-live)::before{display:none}
@keyframes sv-ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

.sv-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:999px;background:var(--pb-petrol);color:#F2EFE6;font-family:var(--pz-ui);font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .4s, box-shadow .6s var(--pz-expo), transform .6s var(--pz-expo)}
.sv-btn svg{width:15px;height:15px;transition:transform .6s var(--pz-expo)}
.sv-btn:hover{background:#034E6A;box-shadow:0 16px 30px -18px rgba(2,61,84,.7)}
.sv-btn:hover svg{transform:translateX(4px)}
.sv-btn--lime{background:#C3DE9A;color:var(--pb-petrol)}
.sv-btn--lime:hover{background:#D3E8B0}
.sv-btn--ghost{background:transparent;color:#F2EFE6;box-shadow:inset 0 0 0 1.5px rgba(242,239,230,.35)}
.sv-btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px #F2EFE6}

/* the second header button on service pages (clinics) */
.pz-hd__alt{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:99px;font:500 14px/1 var(--pz-ui);color:var(--pb-text);box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.2);white-space:nowrap;transition:background-color .4s, box-shadow .4s}
.pz-hd__alt:hover{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px var(--pb-petrol)}
.pz-hd__alt--mob{justify-content:center;height:52px;margin-bottom:10px}
@media (max-width:1360px){.pz--service .pz-hd__nav{gap:2px}.pz--service .pz-hd__link{padding-left:10px;padding-right:10px}}
@media (max-width:1240px){.pz--service .pz-hd__right .pz-hd__alt{display:none}}

/* in-stock toggle and status dots (stock board) */
.sv-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font:500 14px/1 var(--pz-ui);color:var(--pb-text);cursor:pointer}
.sv-toggle input{position:absolute;opacity:0;pointer-events:none}
.sv-toggle span{position:relative;width:44px;height:26px;border-radius:99px;background:rgba(2,61,84,.16);transition:background-color .4s}
.sv-toggle span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(2,61,84,.25);transition:transform .5s var(--pz-expo)}
.sv-toggle input:checked + span{background:var(--pb-teal)}
.sv-toggle input:checked + span::after{transform:translateX(18px)}
.sv-toggle input:focus-visible + span{outline:2px solid var(--pb-teal);outline-offset:3px}

.sv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 6px 1px 0}
.sv-dot--in{background:#2DB37A}
.sv-dot--out{background:#D5DCD9;margin-left:12px}
.sv-skel{height:190px;border-radius:22px;background:linear-gradient(100deg,rgba(255,255,255,.5) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.5) 70%) 0 0/300% 100%;animation:sv-shine 1.6s linear infinite}
@keyframes sv-shine{to{background-position:-150% 0}}

/* plain text link with an arrow, used instead of a second button */
.a-link{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--pz-ui);color:var(--pb-text);padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .6s var(--pz-expo), color .4s}
.a-link svg{width:15px;height:15px;transition:transform .6s var(--pz-expo)}
.a-link:hover{background-size:0 1.5px;background-position:100% 100%}
.a-link:hover svg{transform:translateX(4px)}
.wl-small{margin-top:16px;font-family:var(--pz-ui);font-size:13px;line-height:1.5;color:var(--pb-soft)}

@media (prefers-reduced-motion:reduce){
  .sv-live::after,.sv-skel{animation:none}
}


/* ==========================================================================
   Shared: the secure prescription forms (upload and collection)
   ========================================================================== */
.ct-form{display:grid;gap:clamp(22px,2.4vw,32px)}
.ct-pills{display:flex;flex-wrap:wrap;gap:10px}
.ct-pills label{cursor:pointer}
.ct-pills input{position:absolute;opacity:0;pointer-events:none}
.ct-pills span{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;font:500 15px/1 var(--pz-ui);color:var(--pb-text);box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.14);transition:background .5s, color .4s, box-shadow .4s, padding .6s var(--pz-expo)}
.ct-pills span:hover{box-shadow:inset 0 0 0 1.5px var(--pb-teal)}
.ct-pills input:checked + span{padding:0 24px;color:#F2EFE6;background:linear-gradient(90deg,#0A5470,var(--pb-petrol));box-shadow:0 12px 24px -14px rgba(2,61,84,.6)}
.ct-pills input:focus-visible + span{outline:2px solid var(--pb-teal);outline-offset:3px}
.ct-cap{position:relative;display:inline-grid;grid-template-columns:auto auto;padding:4px;border-radius:999px;background:linear-gradient(180deg,#F4FBF8,#D3EAE1);box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(2,61,84,.4)}
.ct-cap label{position:relative;z-index:1;cursor:pointer}
.ct-cap input{position:absolute;opacity:0;pointer-events:none}
.ct-cap span{display:block;padding:10px 18px;border-radius:999px;font:500 14.5px/1 var(--pz-ui);color:var(--pb-petrol);transition:color .4s}
.ct-cap input:checked + span{color:#F2EFE6}
.ct-cap input:focus-visible + span{outline:2px solid var(--pb-teal);outline-offset:2px}
.ct-cap i{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:linear-gradient(180deg,#0A5470,var(--pb-petrol));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:left .6s var(--pz-expo), width .6s var(--pz-expo)}
.ct-f{position:relative;display:block}
.ct-f input,.ct-f textarea{width:100%;padding:26px 0 12px;border:0;border-bottom:1.5px solid rgba(2,61,84,.18);border-radius:0;background:transparent;font:500 18px/1.3 var(--pz-ui);color:var(--pb-text);outline:0;resize:vertical;transition:border-color .4s}
.ct-f span{position:absolute;left:0;top:26px;font:400 17px/1 var(--pz-ui);color:var(--pb-soft);pointer-events:none;transform-origin:left top;transition:transform .5s var(--pz-expo), color .4s}
.ct-f input:focus + span,.ct-f input:not(:placeholder-shown) + span,.ct-f textarea:focus + span,.ct-f textarea:not(:placeholder-shown) + span{transform:translateY(-22px) scale(.76);color:var(--pb-teal)}
.ct-f input:focus-visible,.ct-f textarea:focus-visible{outline:none !important;box-shadow:none !important}
.ct-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--pb-teal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--pz-expo)}
.ct-f:focus-within::after{transform:scaleX(1)}
.ct-f.is-bad input,.ct-f.is-bad textarea{border-color:#C0563B}
.ct-go{position:relative;display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 28px;border:0;border-radius:999px;background:linear-gradient(180deg,#0A5470,var(--pb-petrol));color:#F2EFE6;font:500 16px/1 var(--pz-ui);cursor:pointer;overflow:hidden;isolation:isolate;filter:drop-shadow(0 10px 16px rgba(2,61,84,.22));transition:color .5s var(--pz-expo)}
.ct-go i{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--pb-petrol)}
.ct-go i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#C3DE9A;z-index:-1;transition:transform .7s var(--pz-expo)}
.ct-go svg{width:16px;height:16px;transition:transform .6s var(--pz-expo)}
.ct-go:hover{color:var(--pb-petrol)}
.ct-go:hover i::before{transform:scale(9)}
.ct-go:hover svg{transform:rotate(-45deg)}
.ct-go--lime{background:linear-gradient(180deg,#0A5470,var(--pb-petrol))}
.ct-find{position:relative;height:clamp(560px,88vh,860px);overflow:hidden;background:#E7ECEA}
.ct-find__card{position:absolute;left:var(--sv-e);top:0;bottom:0;margin:auto 0;height:fit-content;width:min(440px,calc(100% - var(--sv-e) * 2));padding:clamp(24px,2.4vw,34px);border-radius:30px;background:rgba(246,244,239,.82);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 40px 80px -40px rgba(2,61,84,.55)}
.ct-find__t{font-family:var(--pz-ui);font-weight:500;font-size:clamp(30px,2.8vw,44px);line-height:1.04;letter-spacing:-.045em;color:var(--pb-text);margin-bottom:22px}
.ct-find__t em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--pb-teal)}
.ct-f input:focus-visible,.ct-f textarea:focus-visible{outline:none !important;box-shadow:none !important}
.rx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rx-form{position:relative}
.rx-legend{display:block;margin-bottom:14px;font:600 12px/1 var(--pz-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pb-teal)}
.rx-step{border:0;margin:0;padding:0;display:none}
.rx-step.is-on{display:block;animation:rx-in .6s var(--pz-expo)}
@keyframes rx-in{from{opacity:0;transform:translateX(18px)}}
.rx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);margin-bottom:22px}
.rx-grid--3{grid-template-columns:repeat(3,1fr)}
.rx-wide{grid-column:1 / -1}
.rx-grid--3 .rx-wide{grid-column:span 2}
.rx-grid--3 .ct-f--area,.rx-grid--3 label:has(textarea){grid-column:1 / -1}
.rx-consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin:6px 0 24px;font:400 14px/1.5 var(--pz-ui);color:var(--pb-soft);cursor:pointer}
.rx-consent input{position:absolute;opacity:0;pointer-events:none}
.rx-consent i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.25);color:transparent;transition:background-color .3s, box-shadow .3s, color .3s}
.rx-consent i svg{width:14px;height:14px}
.rx-consent input:checked + i{background:var(--pb-teal);box-shadow:none;color:#fff}
.rx-consent input:focus-visible + i{outline:2px solid var(--pb-teal);outline-offset:2px}
.rx-consent.is-bad i{box-shadow:inset 0 0 0 1.5px #C0563B}
.rx-consent a{color:var(--pb-teal);text-decoration:underline;text-underline-offset:3px}
.rx-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px}
.rx-back{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--pz-ui);color:var(--pb-soft);cursor:pointer}
.rx-back svg{width:14px;height:14px;transform:rotate(180deg)}
.rx-back:hover{color:var(--pb-text)}
.rx-hint{font:400 14px/1.4 var(--pz-ui);color:var(--pb-soft)}
.rx-hint a{color:var(--pb-teal);text-decoration:underline;text-underline-offset:3px}
.rx-bar{height:4px;margin-top:20px;border-radius:9px;background:rgba(2,61,84,.08);overflow:hidden;opacity:0;transition:opacity .3s}
.rx-bar.is-on{opacity:1}
.rx-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pb-teal),#C3DE9A);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .3s}
.rx-err{margin-top:16px;padding:12px 16px;border-radius:14px;background:#FBEDE8;font:500 14px/1.45 var(--pz-ui);color:#8C3A24}
.rx-done{text-align:center;padding:30px 10px 10px;animation:rx-in .7s var(--pz-expo)}
.rx-done__ic{display:inline-grid;place-items:center;width:84px;height:84px;margin-bottom:20px;border-radius:999px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%);color:#fff;box-shadow:0 20px 40px -20px rgba(2,61,84,.6);animation:rx-pop 1s var(--pz-expo)}
.rx-done__ic svg{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--pb-teal)}
@keyframes rx-pop{from{transform:scale(.4) rotate(-40deg);opacity:0}}
.rx-done h2{font:500 clamp(28px,2.6vw,40px)/1.1 var(--pz-ui);letter-spacing:-.04em;color:var(--pb-text);margin-bottom:10px}
.rx-done h2 em{font-family:var(--pz-body);font-style:italic;font-weight:400;color:var(--pb-teal)}
.rx-done p{font-family:var(--pz-body);font-size:17px;line-height:1.55;color:var(--pb-soft);max-width:40ch;margin:0 auto 18px}
@media (max-width:640px){.rx-grid,.rx-grid--3{grid-template-columns:1fr}.rx-grid--3 .rx-wide{grid-column:auto}}
.rx-prog[hidden],.rx-actions[hidden],.rx-grid[hidden],.rx-days[hidden],.rx-consent[hidden]{display:none !important}