/* ===========================================================
   Chemist Box — shared styles for sub-pages
   (about / PrivacyPolicy / accountdeletion)
   Brand tokens match index.html exactly.
   =========================================================== */
:root{
  --navy:#313A74;
  --ink:#232323;
  --sky:#2797C6;
  --deep-blue:#004A7C;
  --slate:#668BB3;
  --white:#fff;
  --paper:#F6F8FB;
  --line:rgba(49,58,116,0.16);
  --line-strong:rgba(49,58,116,0.30);
  --display:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --body:'Fira Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.62; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--navy); color:#fff;}
.narrow{max-width:820px;}
:focus-visible{outline:2.5px solid var(--sky); outline-offset:2px;}

/* ---------- Page hero ---------- */
.page-hero{
  position:relative; color:#fff; overflow:hidden;
  /* lighter, airier navy than a flat dark block */
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(39,151,198,0.38), transparent 62%),
    radial-gradient(700px 460px at 0% 110%, rgba(0,74,124,0.34), transparent 60%),
    linear-gradient(152deg, #45509d 0%, #3a4488 42%, #313A74 100%);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:url('hero-art.jpg'); background-size:cover; background-position:center right;
  opacity:0.35; mix-blend-mode:soft-light; pointer-events:none;   /* texture, not a dark wash */
}
.page-hero-inner{position:relative; z-index:1; padding-top:62px; padding-bottom:58px;}
.crumb{font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:#9fc3df; font-weight:600; margin-bottom:14px;}
.crumb a{text-decoration:none; opacity:0.9;}
.crumb a:hover{opacity:1; text-decoration:underline;}
.page-hero h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,5.6vw,58px); line-height:1.0; letter-spacing:0.01em; margin-bottom:16px;
}
.page-hero h1 span{color:var(--sky);}
.page-hero p{font-size:17px; color:rgba(255,255,255,0.82); max-width:56ch;}
.page-meta{margin-top:20px; font-size:13.5px; color:rgba(255,255,255,0.66);}

/* ---------- Sections ---------- */
section{padding:66px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
.sec-tag{
  font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--sky);
  font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
.sec-tag::before{content:""; width:24px; height:2px; background:var(--sky);}
h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,40px); line-height:1.06; letter-spacing:0.01em; color:var(--navy); margin-bottom:16px;
}
h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:20px; letter-spacing:0.01em; color:var(--navy); margin-bottom:8px;
}
.lead{font-size:17px; color:rgba(35,35,35,0.72); max-width:62ch; margin-bottom:14px;}

/* ---------- Prose / legal ---------- */
.prose p{font-size:15.5px; color:rgba(35,35,35,0.78); margin-bottom:15px; max-width:74ch;}
.prose ul{margin:0 0 16px 20px; max-width:74ch;}
.prose li{font-size:15.5px; color:rgba(35,35,35,0.78); margin-bottom:9px;}
.prose strong{color:var(--ink); font-weight:600;}
.prose a{color:var(--deep-blue); text-decoration:underline; text-underline-offset:2px;}
.prose a:hover{color:var(--sky);}
.legal-sec{padding:26px 0; border-top:1px solid var(--line);}
.legal-sec:first-of-type{border-top:none;}
.legal-sec h2{
  font-size:21px; margin-bottom:12px; display:flex; align-items:baseline; gap:12px;
}
.legal-sec h2 .n{
  font-size:14px; color:var(--sky); letter-spacing:0.06em; flex-shrink:0;
}
.legal-sec h3{font-size:17px; margin-top:16px;}
.defn{margin:0 0 16px; max-width:74ch;}
.defn dt{font-family:var(--display); font-size:16px; letter-spacing:0.01em; color:var(--navy); margin-top:14px;}
.defn dd{font-size:15.5px; color:rgba(35,35,35,0.78); margin-left:0;}

/* Table of contents */
.toc{
  background:var(--white); border:1px solid var(--line-strong); border-radius:8px;
  padding:24px 26px; margin-bottom:38px;
}
.toc h2{font-size:17px; margin-bottom:14px;}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:32px;}
.toc li{font-size:14.5px; margin-bottom:8px; break-inside:avoid;}
.toc a{color:var(--deep-blue); text-decoration:none;}
.toc a:hover{text-decoration:underline;}

/* Callout / notice boxes */
.note{
  border-left:3px solid var(--sky); background:var(--white);
  border-radius:0 8px 8px 0; padding:20px 24px; margin:22px 0; max-width:74ch;
}
.note h3{font-size:17px; margin-bottom:6px;}
.note p{font-size:15px; color:rgba(35,35,35,0.76); margin-bottom:0;}
.note.warn{border-left-color:#c9721f; background:#fffaf3;}
.note.warn h3{color:#8a4f14;}

/* Contact card */
.contact-card{
  background:var(--navy); color:#fff; border-radius:8px; padding:30px 32px; margin-top:6px;
}
.contact-card h3{color:#fff; margin-bottom:10px;}
.contact-card p{font-size:15px; color:rgba(255,255,255,0.82); margin-bottom:12px; max-width:60ch;}
.contact-card a{color:#bfe2f4;}
.contact-row{display:flex; gap:32px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.2);}
.contact-row .ci-label{font-family:var(--display); font-size:12.5px; letter-spacing:0.07em; color:rgba(255,255,255,0.55); text-transform:uppercase;}
.contact-row .ci-val{font-size:14.5px; color:#fff; margin-top:3px;}

/* ---------- Branch directory (store-locator) ---------- */
.branch-filters{display:flex; flex-wrap:wrap; gap:9px;}
.fchip{
  font-family:var(--display); font-size:14px; letter-spacing:0.03em;
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:100px;
  background:var(--white); color:var(--navy); cursor:pointer; transition:all .15s ease;
}
.fchip:hover{border-color:var(--sky); color:var(--sky);}
.fchip.is-active{background:var(--navy); border-color:var(--navy); color:#fff;}

.branch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.bcard{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line-strong); border-radius:8px; padding:20px 20px 18px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .15s ease;
  animation:bcardIn .38s ease both;
}
@keyframes bcardIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.bcard:hover{transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(49,58,116,0.4); border-color:var(--slate);}
.bcard-city{font-family:var(--display); font-size:12px; letter-spacing:0.08em; color:var(--sky); text-transform:uppercase;}
.bcard-name{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:0.01em;
  text-transform:uppercase; color:var(--navy); margin:6px 0 8px; line-height:1.1;}
.bcard-addr{font-size:13.5px; color:rgba(35,35,35,0.66); line-height:1.5; margin-bottom:16px; flex:1;}
.bcard-addr .pin{color:var(--navy); font-weight:600; white-space:nowrap;}
.bcard-dir{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--display); font-size:13.5px; letter-spacing:0.03em; color:var(--navy);
  text-decoration:none; border:1.5px solid var(--navy); border-radius:4px; padding:9px 15px;
  transition:all .15s ease;
}
.bcard-dir svg{width:16px; height:16px; flex-shrink:0;}
.bcard-dir:hover{background:var(--navy); color:#fff;}
.branch-empty{grid-column:1/-1; padding:36px 0; text-align:center; color:rgba(35,35,35,0.6); font-size:15px;}
@media (max-width: 900px){ .branch-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .branch-grid{grid-template-columns:1fr;} }

/* ---------- Cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:40px; align-items:start;}
.card{
  background:var(--white); border:1px solid var(--line-strong); border-radius:8px; padding:26px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(49,58,116,0.4);}
.card svg{width:28px; height:28px; color:var(--navy); margin-bottom:14px;}
.card p{font-size:14.5px; color:rgba(35,35,35,0.68);}

.stat-bar{display:grid; grid-template-columns:repeat(3,1fr); background:var(--deep-blue); color:#fff; text-align:center;}
.stat-bar .si{padding:24px 14px; border-right:1px solid rgba(255,255,255,0.18);}
.stat-bar .si:last-child{border-right:none;}
.stat-bar .s-num{font-family:var(--display); font-size:30px; color:#bfe2f4; letter-spacing:0.02em;}
.stat-bar .s-lab{font-size:13px; color:rgba(255,255,255,0.85); line-height:1.35; margin-top:3px;}

.steps{counter-reset:s; display:grid; gap:14px;}
.step{
  background:var(--white); border:1px solid var(--line-strong); border-radius:8px;
  padding:24px 26px; display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
}
.step .s-n{
  font-family:var(--display); font-size:15px; letter-spacing:0.05em; color:#fff;
  background:var(--navy); border-radius:50%; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
}
.step h3{margin-bottom:5px;}
.step p{font-size:14.5px; color:rgba(35,35,35,0.7);}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--navy); color:#fff; text-align:center; border-bottom:none;}
.final-cta h2{color:#fff;}
.final-cta p{font-size:16.5px; color:rgba(255,255,255,0.8); max-width:52ch; margin:0 auto 30px;}
.cta-row{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr; gap:30px;}
}
@media (max-width: 560px){
  /* keep "Find a branch" — drop the secondary CTA instead */
}
@media (max-width: 600px){
  section{padding:48px 0;}
  .page-hero-inner{padding-top:46px; padding-bottom:44px;}
  .grid-3{grid-template-columns:1fr;}
  .stat-bar{grid-template-columns:1fr;}
  .stat-bar .si{border-right:none; border-bottom:1px solid rgba(255,255,255,0.18);}
  .stat-bar .si:last-child{border-bottom:none;}
  .toc ol{columns:1;}
  .step{grid-template-columns:1fr; gap:10px;}
  .contact-row{gap:20px;}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }