/* =============================================================
   DOORSTEP PHARMACY — HEADER / HERO / FOOTER
   Header = Elementor Pro Theme Builder > Header template.
   Footer = Elementor Pro Theme Builder > Footer template.
   ============================================================= */

/* ============================================================ UTILITY BAR */
.dp-utility {
  background: var(--dp-purple-950);
  color: rgba(255,255,255,.72);
  font-size: var(--dp-t-xs);
}
.dp-utility .dp-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dp-s4); min-height: 40px; flex-wrap: wrap;
}
.dp-utility-track {
  display: flex; align-items: center; gap: var(--dp-s5);
  width: 100%; min-height: 40px;
}
/* Phone sits at the far end on desktop; the promo messages stay left. */
.dp-utility-phone { margin-left: auto; }
.dp-utility a { color: rgba(255,255,255,.72); transition: color var(--dp-fast); }
.dp-utility a:hover { color: #fff; text-decoration: none; }
.dp-utility-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dp-utility-item svg { color: var(--dp-green-400); flex: 0 0 auto; }

/* ============================================================ HEADER */
:root { --dp-header-h: 137px; } /* main bar + nav bar at desktop widths; sticky panels clear it by this much */
.dp-header { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--dp-line); }

.dp-header-main .dp-wrap {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: var(--dp-s6);
  min-height: 84px;
}
.dp-brand img { height: 42px; width: auto; }

/* Search */
.dp-search {
  display: flex; align-items: stretch;
  max-width: 520px; width: 100%;
  background: var(--dp-surface-3);
  border: 1.5px solid transparent; border-radius: var(--dp-r-pill);
  transition: all var(--dp-fast);
}
.dp-search:focus-within { background: #fff; border-color: var(--dp-purple); box-shadow: var(--dp-ring); }
.dp-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--dp-font-body); font-size: var(--dp-t-sm);
  color: var(--dp-ink); padding: 12px 4px 12px 20px;
}
.dp-search input::placeholder { color: var(--dp-ink-4); }
/* The box itself shows the focus ring (focus-within above); the global
   :focus-visible ring on the input drew a second, smaller-radius ring
   inside the pill. */
.dp-search input:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.dp-search button {
  border: 0; cursor: pointer; background: var(--dp-purple); color: #fff;
  border-radius: var(--dp-r-pill); margin: 4px; padding: 0 20px;
  display: grid; place-items: center; transition: background var(--dp-fast);
}
.dp-search button:hover { background: var(--dp-purple-600); }

/* Account + basket */
.dp-header-actions { display: flex; align-items: center; gap: var(--dp-s2); }
.dp-haction {
  display: flex; align-items: center; gap: var(--dp-s2);
  padding: 10px 14px; border-radius: var(--dp-r);
  color: var(--dp-ink-2); transition: all var(--dp-fast);
}
.dp-haction:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }
.dp-haction svg { flex: 0 0 auto; }
/* Direct child only. The count badge is a span too, nested inside
   .dp-haction-ico — a bare `.dp-haction span` also styled the badge, jumping
   its digit to the 14px label size. */
.dp-haction > span:not(.dp-haction-ico) { font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700; line-height: 1; }
.dp-haction-ico { position: relative; display: grid; place-items: center; }
.dp-count {
  /* Explicit, because this badge was an <em> and inherited italic — a leaning
     digit reads as off-centre inside a circle however well it is boxed. */
  font-style: normal;
  position: absolute; top: -6px; right: -8px;
  /* 4px padding keeps a single digit inside the 18px min-width, so the badge
     stays a true circle; two digits push it out to a pill on their own. */
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--dp-green-500); color: var(--dp-purple-950);
  font-family: var(--dp-font-head); font-size: 10px; font-weight: 800;
  border-radius: var(--dp-r-pill);
  /* At 10px the metrics-centred line box already lands within a fifth of a
     pixel of the optical centre, so no nudge is needed. (It was required at
     11px, and overcorrected once the digit came down.) */
  line-height: 1;
}

/* Primary nav */
.dp-nav { border-top: 1px solid var(--dp-line-soft); background: #fff; }
.dp-nav .dp-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s4); }
.dp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; flex-wrap: wrap; }
.dp-nav > .dp-wrap > ul > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 15px 16px; position: relative;
  font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
  color: var(--dp-ink); transition: color var(--dp-fast);
}
.dp-nav > .dp-wrap > ul > li > a:hover { color: var(--dp-purple); text-decoration: none; }
.dp-nav > .dp-wrap > ul > li > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2.5px;
  border-radius: 2px; background: var(--dp-green-500);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dp-mid);
}
.dp-nav > .dp-wrap > ul > li:hover > a::after,
.dp-nav > .dp-wrap > ul > li.is-active > a::after { transform: scaleX(1); }
.dp-nav-cta { display: flex; align-items: center; gap: var(--dp-s2); }

/* ============================================================ HERO */
.dp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--dp-purple-950) 0%, var(--dp-purple-800) 45%, var(--dp-purple-700) 100%);
  color: rgba(255,255,255,.8);
}
.dp-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(680px 420px at 88% 8%,  rgba(101,205,0,.20), transparent 62%),
    radial-gradient(520px 380px at 4% 96%,  rgba(154,92,196,.26), transparent 60%);
  pointer-events: none;
}
.dp-hero .dp-wrap { position: relative; z-index: 1; }
.dp-hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: var(--dp-s8); align-items: center;
  padding-block: clamp(52px, 6vw, 88px);
}
.dp-hero h1 { color: #fff; font-size: var(--dp-t-display); margin-bottom: var(--dp-s5); }
.dp-hero h1 em { font-style: normal; color: var(--dp-green-400); }
.dp-hero-lead { font-size: var(--dp-t-lg); color: rgba(255,255,255,.78); line-height: var(--dp-lh-loose); margin-bottom: var(--dp-s6); max-width: 52ch; }
.dp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--dp-s3); margin-bottom: var(--dp-s7); }
.dp-hero .dp-eyebrow { color: var(--dp-green-400); }
.dp-hero .dp-eyebrow::before { background: var(--dp-green-400); }
.dp-hero .dp-eyebrow a { color: inherit; text-decoration: none; }
.dp-hero .dp-eyebrow a:hover { text-decoration: underline; }

.dp-hero-trust { display: flex; flex-wrap: wrap; gap: var(--dp-s3) var(--dp-s6); padding-top: var(--dp-s5); border-top: 1px solid rgba(255,255,255,.14); }
.dp-hero-trust .dp-trust-item { color: rgba(255,255,255,.66); font-size: var(--dp-t-xs); }
.dp-hero-trust .dp-trust-item b { color: #fff; }
.dp-hero-trust .dp-trust-item svg { color: var(--dp-green-400); }

/* Hero booking panel — where the Project Peach iframe will sit */
.dp-hero-panel {
  background: #fff; border-radius: var(--dp-r-lg);
  padding: var(--dp-s6); box-shadow: var(--dp-shadow-lg);
}
.dp-hero-panel h3 { font-size: var(--dp-t-h4); margin-bottom: var(--dp-s2); }
.dp-hero-panel > p { font-size: var(--dp-t-sm); color: var(--dp-ink-3); margin-bottom: var(--dp-s5); }
.dp-peach-slot {
  border: 2px dashed var(--dp-purple-200); border-radius: var(--dp-r);
  background: var(--dp-purple-50); padding: var(--dp-s6) var(--dp-s5);
  text-align: center; margin-bottom: var(--dp-s4);
}
.dp-peach-slot svg { margin: 0 auto var(--dp-s3); color: var(--dp-purple-400); }
.dp-peach-slot strong { display: block; font-family: var(--dp-font-head); color: var(--dp-purple-700); font-size: var(--dp-t-sm); margin-bottom: 4px; }
.dp-peach-slot span { font-size: var(--dp-t-xs); color: var(--dp-ink-3); }

/* ============================================================ SHOP TRANSITION
   The visual seam between the services half and the shop half.     */
.dp-seam {
  background: var(--dp-purple-800); color: #fff;
  padding-block: var(--dp-s6);
}
.dp-seam .dp-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s5); flex-wrap: wrap; }
.dp-seam h2 { color: #fff; margin: 0 0 6px; font-size: var(--dp-t-h3); }
.dp-seam p { color: rgba(255,255,255,.72); font-size: var(--dp-t-sm); margin: 0; }

/* ============================================================ DELIVERY BAND */
.dp-promise { display: flex; align-items: flex-start; gap: var(--dp-s4); }
.dp-promise-ico {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--dp-r);
  display: grid; place-items: center;
  background: var(--dp-green-100); color: var(--dp-green-700);
}
.dp-promise strong { display: block; font-family: var(--dp-font-head); font-size: var(--dp-t-base); color: var(--dp-ink); margin-bottom: 4px; }
.dp-promise p { font-size: var(--dp-t-sm); color: var(--dp-ink-3); margin: 0; }

/* ============================================================ FOOTER */
.dp-footer { background: var(--dp-purple-950); color: rgba(255,255,255,.62); font-size: var(--dp-t-sm); }
.dp-footer a { color: rgba(255,255,255,.62); transition: color var(--dp-fast); }
.dp-footer a:hover { color: #fff; text-decoration: none; }
.dp-footer-top { padding-block: var(--dp-s8) var(--dp-s7); }
.dp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--dp-s6); }
.dp-footer h4 { color: #fff; font-size: var(--dp-t-sm); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--dp-s4); }
.dp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dp-footer img.dp-footer-logo { height: 38px; width: auto; margin-bottom: var(--dp-s4); filter: brightness(0) invert(1); opacity: .95; }
.dp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--dp-s5);
  display: flex; justify-content: space-between; gap: var(--dp-s4); flex-wrap: wrap;
  font-size: var(--dp-t-xs); color: rgba(255,255,255,.42);
}
.dp-footer-credit a { color: rgba(255,255,255,.7); text-decoration: none; }
.dp-footer-credit a:hover { color: #fff; text-decoration: underline; }
.dp-reg {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--dp-r); padding: var(--dp-s4); margin-top: var(--dp-s5);
  font-size: var(--dp-t-xs); line-height: 1.7; color: rgba(255,255,255,.55);
}
.dp-reg b { color: rgba(255,255,255,.85); font-weight: 600; }
.dp-reg a { color: rgba(255,255,255,.7); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 2px; }
.dp-reg a:hover { color: #fff; text-decoration-color: #fff; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .dp-hero-grid { grid-template-columns: 1fr; gap: var(--dp-s7); }
  .dp-footer-grid { grid-template-columns: 1fr 1fr; }
  /* Hide the LABEL only. .dp-haction-ico is a span too, so a bare
     `.dp-haction span` also hid the icon — which is why the mobile basket
     rendered as an empty circle. */
  .dp-haction > span:not(.dp-haction-ico) { display: none; }
  /* header grid + nav handled in the off-canvas block below */
}
@media (max-width: 767px) {
  .dp-footer-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   OFF-CANVAS MOBILE MENU
   Elementor Pro: build with the native Off-Canvas widget
   (Elementor 3.23+) containing a Nav Menu widget, triggered by
   a Menu Toggle. Accordion behaviour = Nav Menu "Submenu: Click".
   ============================================================= */

/* ---- Hamburger toggle (hidden on desktop) ---- */
.dp-menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px;
  background: transparent; border: 0; border-radius: var(--dp-r-sm);
  color: var(--dp-ink); cursor: pointer;
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-menu-toggle:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); }
.dp-burger { position: relative; width: 22px; height: 16px; display: block; }
.dp-burger span {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
  background: currentColor; transition: transform var(--dp-mid), opacity var(--dp-fast);
}
.dp-burger span:nth-child(1) { top: 0; }
.dp-burger span:nth-child(2) { top: 6.75px; }
.dp-burger span:nth-child(3) { bottom: 0; }

/* ---- Scrim ---- */
.dp-oc-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(27, 4, 40, .55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dp-mid), visibility var(--dp-mid);
}
body.dp-oc-open .dp-oc-scrim { opacity: 1; visibility: visible; }

/* ---- Panel ---- */
.dp-oc {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  width: min(340px, 88vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s var(--dp-ease);
  box-shadow: 0 0 60px rgba(27,4,40,.3);
  visibility: hidden;
}
body.dp-oc-open .dp-oc { transform: translateX(0); visibility: visible; }

/* Panel header */
.dp-oc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dp-s4); padding: var(--dp-s4) var(--dp-s5);
  border-bottom: 1px solid var(--dp-line);
  flex: 0 0 auto;
}
.dp-oc-head img { height: 34px; width: auto; }
.dp-oc-close {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--dp-surface-3); border: 0; border-radius: 50%;
  color: var(--dp-ink); cursor: pointer;
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-oc-close:hover { background: var(--dp-purple-100); color: var(--dp-purple-700); }

/* Panel body — the only scrolling region */
.dp-oc-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--dp-s3) 0 var(--dp-s5); }

/* Nav list */
.dp-oc-nav { list-style: none; margin: 0; padding: 0; }
.dp-oc-nav > li { border-bottom: 1px solid var(--dp-line-soft); }

.dp-oc-link,
.dp-oc-sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dp-s3); width: 100%;
  padding: 15px var(--dp-s5);
  font-family: var(--dp-font-head); font-size: var(--dp-t-base); font-weight: 700;
  color: var(--dp-ink); text-align: left;
  background: transparent; border: 0; cursor: pointer;
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-oc-link:hover, .dp-oc-sub-toggle:hover,
.dp-oc-link:focus-visible, .dp-oc-sub-toggle:focus-visible {
  background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none;
}
.dp-oc-link .dp-badge { flex: 0 0 auto; }

/* Chevron */
.dp-oc-chev { flex: 0 0 auto; color: var(--dp-ink-4); transition: transform var(--dp-mid), color var(--dp-fast); }
.dp-oc-sub-toggle[aria-expanded="true"] { color: var(--dp-purple-700); }
.dp-oc-sub-toggle[aria-expanded="true"] .dp-oc-chev { transform: rotate(180deg); color: var(--dp-purple); }

/* Submenu — animated open/close */
.dp-oc-sub {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: 0fr;
  background: var(--dp-surface-2);
  transition: grid-template-rows var(--dp-mid);
}
.dp-oc-sub > div { overflow: hidden; min-height: 0; }
.dp-oc-sub-toggle[aria-expanded="true"] + .dp-oc-sub { grid-template-rows: 1fr; }
.dp-oc-sub a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s3);
  padding: 12px var(--dp-s5) 12px calc(var(--dp-s5) + 14px);
  font-size: var(--dp-t-sm); font-weight: 500; color: var(--dp-ink-2);
  border-left: 2px solid var(--dp-purple-200); margin-left: var(--dp-s5);
  transition: color var(--dp-fast), border-color var(--dp-fast), background var(--dp-fast);
}
.dp-oc-sub a:hover { color: var(--dp-purple-700); border-color: var(--dp-green-500); background: #fff; text-decoration: none; }
.dp-oc-sub a small { color: var(--dp-ink-4); font-size: var(--dp-t-xs); }
.dp-oc-sub a.has-thumb { display: flex; align-items: center; gap: var(--dp-s3); }
.dp-oc-thumb { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--dp-purple-50); color: var(--dp-green-700); overflow: hidden; }
.dp-oc-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dp-oc-sub a.has-thumb .dp-oc-label { flex: 1 1 auto; }

/* Secondary link block */
.dp-oc-secondary { padding: var(--dp-s5) var(--dp-s5) 0; }
.dp-oc-secondary h4 {
  font-size: var(--dp-t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--dp-ink-4); margin-bottom: var(--dp-s3);
}
.dp-oc-secondary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dp-oc-secondary a {
  display: flex; align-items: center; gap: var(--dp-s3);
  padding: 10px 0; font-size: var(--dp-t-sm); color: var(--dp-ink-2);
}
.dp-oc-secondary a:hover { color: var(--dp-purple-700); text-decoration: none; }
.dp-oc-secondary svg { color: var(--dp-ink-4); flex: 0 0 auto; }
.dp-oc-secondary a:hover svg { color: var(--dp-purple); }

/* Panel footer — sticky CTA */
.dp-oc-foot {
  flex: 0 0 auto; padding: var(--dp-s4) var(--dp-s5);
  border-top: 1px solid var(--dp-line); background: var(--dp-surface-2);
  display: grid; gap: var(--dp-s3);
}
.dp-oc-foot .dp-phone {
  display: flex; align-items: center; justify-content: center; gap: var(--dp-s2);
  font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-sm);
  color: var(--dp-ink-2);
}
.dp-oc-foot .dp-phone svg { color: var(--dp-green-600); }

/* ---- Breakpoint switch ---- */
@media (max-width: 1024px) {
  .dp-menu-toggle { display: flex; }
  .dp-nav { display: none; }
  .dp-header-main .dp-wrap {
    /*
     * Both side columns are the SAME fixed width, so the middle column is
     * centred on the header by construction and the logo simply fills it.
     *
     * This is deliberately not `1fr auto 1fr` with a max-width on the image.
     * That shape needs a hand-computed reserve, and the previous one
     * (calc(100vw - 216px)) had gone stale — its comment described 40px icons
     * that are now 71px, so it capped the logo below even what the centred
     * layout allowed. Here the only number is the side width itself, which is
     * visible next to the thing it has to clear.
     */
    grid-template-columns: var(--dp-hdr-side) minmax(0, 1fr) var(--dp-hdr-side);
    grid-template-areas:
      "toggle brand  actions"
      "search search search";
    row-gap: var(--dp-s3);
    column-gap: var(--dp-s2);
    align-items: center;

    /* Wide enough for the account + basket pair, which is the wider side. */
    --dp-hdr-side: 72px;
  }
  .dp-menu-toggle   { grid-area: toggle;  justify-self: start; }
  .dp-brand         { grid-area: brand;   justify-self: center; }
  .dp-search        { grid-area: search; max-width: none; order: 0; }
  .dp-header-actions{ grid-area: actions; justify-self: end; }
}
@media (max-width: 767px) {
  .dp-header-main .dp-wrap { min-height: 0; padding-block: 10px; }
  .dp-brand img { height: 34px; }
}

/* Lock background scroll while the drawer is open */
body.dp-oc-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dp-oc, .dp-oc-scrim, .dp-oc-sub, .dp-oc-chev { transition: none; }
}

/* =============================================================
   WORDPRESS THEME ADDITIONS
   Classes used by the PHP templates that had no prototype equivalent.
   ============================================================= */

/* Skip link */
.dp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--dp-purple); color: #fff;
  font-family: var(--dp-font-head); font-weight: 700;
  border-radius: 0 0 var(--dp-r) 0;
}
.dp-skip:focus { left: 0; text-decoration: none; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Custom-logo output */
.dp-brand .custom-logo-link img,
.dp-oc-head .custom-logo-link img { height: 42px; width: auto; }
.dp-oc-head .custom-logo-link img { height: 34px; }
.dp-footer-logo-wrap img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: var(--dp-s4); }

/* Booking embed slot */
.dp-peach-embed iframe { width: 100%; min-height: 560px; border: 0; border-radius: var(--dp-r); display: block; }

/* Stats in the about band */
.dp-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--dp-r-md);
  padding: var(--dp-s5);
}
.dp-stat-n {
  font-family: var(--dp-font-head); font-size: var(--dp-t-h2);
  font-weight: 800; color: var(--dp-green-400); line-height: 1;
}
.dp-stat-n span { font-size: .5em; }
.dp-stat-l { font-size: var(--dp-t-sm); color: rgba(255,255,255,.7); margin-top: 6px; }

/* Article card */
.dp-article { display: flex; flex-direction: column; }
.dp-article-media {
  aspect-ratio: 16/9; border-radius: var(--dp-r); overflow: hidden;
  margin-bottom: var(--dp-s4); background: var(--dp-purple-100);
  display: grid; place-items: center;
}
.dp-article-media img { width: 100%; height: 100%; object-fit: cover; }
.dp-article-ph { color: var(--dp-purple-400); }

/* Page + archive headers */
.dp-page-head { padding-block: var(--dp-s7) 0; }
.dp-page-head h1 { margin-bottom: var(--dp-s2); }

/* A page head is a title strip, not a hero — it carries no bottom padding of
   its own. The section that follows brings the full band spacing (~87px),
   which left the title sitting further from its own content than from the
   header above it. A heading belongs to what follows, so it sits closer to it. */
.dp-page-head + .dp-wrap.dp-section { padding-top: var(--dp-s6); }

/* Compact hero for single service */
.dp-hero-compact .dp-hero-compact-grid {
  /* minmax(0, …): a plain fr track will not shrink below its content's
     min-width, so the nowrap trust list on the weight-loss and travel heroes
     was widening the text column and shrinking the photo (Will, 21 Sep). */
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--dp-s8); align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.dp-hero-compact h1 { color: #fff; margin-block: var(--dp-s3) var(--dp-s4); }
.dp-price-panel { text-align: center; }
.dp-price-big {
  font-family: var(--dp-font-head); font-size: var(--dp-t-h1);
  font-weight: 800; color: var(--dp-ink); line-height: 1.1; margin: 4px 0;
}

/* Long-form content */
.dp-prose { max-width: var(--dp-maxw-text); min-width: 0; }
.dp-prose > * + * { margin-top: var(--dp-s4); }
.dp-prose h2 { margin-top: var(--dp-s7); }
.dp-prose h3 { margin-top: var(--dp-s6); }
.dp-prose ul, .dp-prose ol { padding-left: 1.4em; }
.dp-prose li + li { margin-top: 6px; }
.dp-prose img { border-radius: var(--dp-r); }
.dp-prose blockquote {
  margin: var(--dp-s6) 0; padding: var(--dp-s4) var(--dp-s5);
  border-left: 4px solid var(--dp-green-500);
  background: var(--dp-surface-2); border-radius: 0 var(--dp-r) var(--dp-r) 0;
}

/* Pagination */
.dp-pagination {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "prev pages next" "meta meta meta";
  align-items: center; gap: var(--dp-s4); margin-top: var(--dp-s7); padding-top: var(--dp-s6); border-top: 1px solid var(--dp-line);
}
.dp-pagination-prev { grid-area: prev; } .dp-pagination-next { grid-area: next; }
.dp-pagination-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: var(--dp-r-pill); border: 1.5px solid var(--dp-line); background: #fff;
  font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-sm); color: var(--dp-ink);
  transition: background var(--dp-fast), border-color var(--dp-fast), color var(--dp-fast);
}
a.dp-pagination-btn:hover { background: var(--dp-purple-50); border-color: var(--dp-purple-300); color: var(--dp-purple-700); text-decoration: none; }
.dp-pagination-btn.is-disabled { opacity: .4; }
.dp-pagination-pages { grid-area: pages; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-pagination-pages a, .dp-pagination-pages span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 50%;
  font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-sm); color: var(--dp-ink-2);
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-pagination-pages a:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }
.dp-pagination-pages .is-current { background: var(--dp-purple); color: #fff; }
.dp-pagination-dots { color: var(--dp-ink-4); padding: 0 2px; }
.dp-pagination-meta { grid-area: meta; margin: 0; text-align: center; font-size: var(--dp-t-sm); color: var(--dp-ink-3); }
@media (max-width: 640px) {
  /* previous / next full width, the current page and its neighbours only */
  .dp-pagination { grid-template-columns: 1fr 1fr; grid-template-areas: "pages pages" "prev next" "meta meta"; gap: var(--dp-s3); }
  .dp-pagination-btn { justify-content: center; width: 100%; }
  .dp-pagination-pages [data-dist]:not([data-dist="0"]):not([data-dist="1"]):not([data-edge]) { display: none; }
}

@media (max-width: 1024px) {
  .dp-hero-compact .dp-hero-compact-grid { grid-template-columns: 1fr; gap: var(--dp-s6); }
}

/* =============================================================
   MOBILE HEADER BASKET
   At 375px there is not room for the logo plus two icon links, so the
   account link was squeezing the basket to 28px — exactly its own padding,
   leaving a zero-width content box that collapsed the SVG to nothing.
   Account already lives in the drawer menu, so the basket takes the space.
   ============================================================= */

/* Icons must never be the thing that shrinks. */
.dp-haction svg { flex: 0 0 auto; max-width: none; }

@media (max-width: 1024px) {

  /* The menu toggle and the basket are the two controls framing the header,
     so they are built as a matched pair: same box, same ink, no resting fill.
     A tinted circle on one side alone made the header read lopsided — and the
     two also sat at different insets from their own edges.

     The 12px negative margin pulls each 46px box outward so the ICONS align
     with the 16px gutter, rather than the boxes doing so and leaving the
     icons visually indented. */
  .dp-menu-toggle,
  .dp-header-actions .dp-haction {
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--dp-r);
    background: transparent;
    color: var(--dp-ink);
    transition: background var(--dp-fast), transform var(--dp-fast);
  }
  .dp-menu-toggle { margin-left: -12px; }
  .dp-header-actions .dp-cart-link { margin-right: -12px; }

  .dp-menu-toggle:hover,
  .dp-header-actions .dp-haction:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); }
  .dp-menu-toggle:active,
  .dp-header-actions .dp-haction:active { background: var(--dp-purple-100); transform: scale(.94); }

  .dp-header-actions .dp-haction svg { width: 22px; height: 22px; }

  /* The visual gap between the two glyphs was 26px — 12px of padding inside
     each box plus a 2px gap. Closing the gap alone would not have helped, so
     the boxes narrow to 40px while keeping the full 46px height, bringing the
     icons to 18px apart. The pair still reads as one group. */
  .dp-header-actions { gap: 0; }
  .dp-header-actions .dp-haction { width: 40px; margin-right: 0; }
  /* Both boxes are 40px, so the padding either side of an icon is 9px and the
     glyphs land 18px apart. The basket's negative margin drops from 12 to 9 to
     match its narrower padding, keeping its icon on the same 16px gutter. */
  .dp-header-actions .dp-cart-link { margin-right: -9px; }

  /* The badge sits on the rim of the circle rather than inside the icon. */
  .dp-header-actions .dp-cart-link .dp-count {
    top: -3px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    border: 2px solid #fff;
    font-size: 9px;
  }

  /* Give the logo somewhere to shrink to so nothing else has to. */
  .dp-brand img,
  .dp-brand .custom-logo-link img { max-width: 168px; height: auto; }
}

@media (max-width: 767px) {
  /*
   * No magic reserve any more. The logo simply fills its grid column, which
   * the browser has already sized around the toggle and the icons — so the
   * arithmetic cannot go stale the way the old calc() did when the icon boxes
   * changed width.
   *
   * max-height is what protects the header: the top row is 46px tall because
   * of the toggle, so a logo capped at 40px can never make the header grow.
   */
  .dp-brand img,
  .dp-brand .custom-logo-link img {
    max-width: 100%;
    max-height: 40px;
    height: auto;
    width: auto;
  }
}

@media (max-width: 359px) {
  /* Three controls plus a legible logo do not fit. Account is in the menu. */
  .dp-header-actions .dp-haction:not(.dp-cart-link) { display: none; }
  /* One icon fewer, so the toggle becomes the wider side and sets the reserve. */
  .dp-header-main .dp-wrap { --dp-hdr-side: 48px; }
}

/* =============================================================
   UTILITY BAR CAROUSEL (mobile)
   Three messages will not fit across a phone without shrinking to noise, so
   below 768px the same markup becomes a slide carousel — each item full
   width, centred by construction rather than by nudging.
   ============================================================= */

@media (max-width: 767px) {
  .dp-utility .dp-wrap {
    padding-inline: 0;      /* the track is full-bleed so slides clear the edge */
    overflow: hidden;
  }

  .dp-utility-track {
    gap: 0;
    transition: transform .45s var(--dp-ease);
    will-change: transform;
  }
  /* No JS? The track is still a flex row, so the first item shows and the
     rest sit harmlessly off-screen behind the overflow. */
  .dp-utility-track:not(.is-ready) { transform: none; }

  .dp-utility-item,
  .dp-utility-phone {
    flex: 0 0 100%;
    justify-content: center;
    margin-left: 0;
    padding-inline: var(--dp-gutter);
  }

  /* Only the item on screen should be reachable by tab or screen reader. */
  .dp-utility-track.is-ready .dp-utility-item[aria-hidden="true"] { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-utility-track { transition: none; }
}

/* =============================================================
   FOOTER ACCORDIONS
   Three stacked link columns make the mobile footer very long. Native
   <details> collapses them with no JavaScript at all — and because the
   markup ships closed, it still works with scripts disabled.

   Desktop then forces them permanently open. Browsers hide a closed
   <details>' contents with content-visibility, not display, so both have to
   be overridden — display alone leaves the panel invisible.
   ============================================================= */

.dp-footer-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-s3);
  list-style: none;
  cursor: pointer;
}
.dp-footer-acc summary::-webkit-details-marker { display: none; }
.dp-footer-acc summary h4 { margin: 0; }
.dp-footer-acc summary > svg {
  flex: 0 0 auto;
  color: rgba(255,255,255,.5);
  transition: transform var(--dp-mid);
}
.dp-footer-acc[open] summary > svg { transform: rotate(180deg); }
.dp-footer-acc summary:focus-visible {
  outline: none;
  box-shadow: var(--dp-ring);
  border-radius: var(--dp-r-sm);
}

@media (min-width: 768px) {
  /* Always open, and not a control.
     Current engines wrap a closed details' contents in a ::details-content
     pseudo-element and hide THAT — styling the child does nothing, which is
     why an earlier attempt reserved the height but painted nothing. The
     second rule covers older engines that hid the child directly. */
  .dp-footer-acc::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
  .dp-footer-acc > *:not(summary) { display: block !important; }
  .dp-footer-acc summary {
    cursor: default;
    pointer-events: none;
    margin-bottom: var(--dp-s4);
  }
  .dp-footer-acc summary > svg { display: none; }
}

@media (max-width: 767px) {
  .dp-footer-acc {
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .dp-footer-acc summary {
    padding-block: var(--dp-s4);
    min-height: 48px;              /* comfortable tap target */
  }
  .dp-footer-acc summary h4 { margin-bottom: 0; }
  .dp-footer-acc-body { padding-bottom: var(--dp-s4); }

  /* The columns collapse to one, so the grid gap would double the spacing
     the borders already provide. */
  .dp-footer-grid { gap: 0; }
  .dp-footer-grid > div:first-child { margin-bottom: var(--dp-s5); }

  /* Collapsed accordions leave the footer much shorter, so the generous
     desktop padding reads as dead space beneath the last one.
     Bottom padding is zero because the divider under the last accordion is
     the bottom bar's own border-top: any padding here stacks on the summary's
     16px and makes that one gap 40px while the other two stay 16px. */
  .dp-footer-top { padding-block: var(--dp-s6) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-footer-acc summary > svg { transition: none; }
}

/* =============================================================
   SERVICES INDEX — GROUPS
   ============================================================= */

.dp-service-group + .dp-service-group { margin-top: var(--dp-section); }

.dp-service-group-head {
  margin-bottom: var(--dp-s5);
  padding-bottom: var(--dp-s4);
  border-bottom: 2px solid var(--dp-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dp-s4);
  flex-wrap: wrap;
}
.dp-service-group-head h2 { margin: 0; }
.dp-service-group-head p {
  margin: 0;
  font-size: var(--dp-t-sm);
  color: var(--dp-ink-3);
  max-width: 52ch;
}

/* =============================================================
   DUAL FUNDING ROUTES
   Flu and smoking cessation are free on the NHS to those who qualify and
   private to everyone else. Two side-by-side routes on one page, rather than
   two competing pages, provided the page says plainly which is which.
   ============================================================= */

.dp-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-s5);
  margin-bottom: var(--dp-s7);
}

.dp-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dp-s3);
  padding: var(--dp-s6);
  border-radius: var(--dp-r-md);
  border: 1px solid var(--dp-line);
  background: var(--dp-surface-2);
}
.dp-route h3 { margin: 0; font-size: var(--dp-t-h4); }
.dp-route p { margin: 0; font-size: var(--dp-t-sm); color: var(--dp-ink-3); line-height: var(--dp-lh-loose); }
.dp-route .dp-btn { margin-top: auto; }

.dp-route--nhs {
  background: var(--dp-nhs-bg);
  border-color: #cfe0f2;
}
.dp-route--nhs h3 { color: var(--dp-nhs); }

.dp-route--private {
  background: var(--dp-purple-50);
  border-color: var(--dp-purple-100);
}

.dp-route-price {
  font-family: var(--dp-font-head);
  font-size: var(--dp-t-h3);
  font-weight: 800;
  color: var(--dp-ink) !important;
}
.dp-route-price small { font-size: var(--dp-t-sm); font-weight: 500; color: var(--dp-ink-3); }

@media (max-width: 767px) {
  .dp-routes { grid-template-columns: 1fr; gap: var(--dp-s4); }
  .dp-route { padding: var(--dp-s5); }
  .dp-route .dp-btn { width: 100%; }
}

/* =============================================================
   SERVICES MEGA MENU
   ============================================================= */

.dp-nav li.dp-has-mega { position: static; }   /* panel spans the nav, not the item */
.dp-nav li.dp-has-mega > a > svg {
  margin-left: 2px;
  color: var(--dp-ink-4);
  transition: transform var(--dp-mid);
}
.dp-nav li.dp-has-mega:hover > a > svg,
.dp-nav li.dp-has-mega.is-open > a > svg { transform: rotate(180deg); }

.dp-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 70;
  background: #fff;
  border-top: 1px solid var(--dp-line);
  box-shadow: 0 18px 40px -20px rgba(26,21,35,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dp-fast), transform var(--dp-fast), visibility var(--dp-fast);
}
.dp-mega[hidden] { display: block; }   /* hidden is managed by opacity, for the transition */

.dp-nav li.dp-has-mega:hover > .dp-mega,
.dp-nav li.dp-has-mega:focus-within > .dp-mega,
.dp-nav li.dp-has-mega.is-open > .dp-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Carries its own container sizing rather than reusing .dp-wrap: that class
   inside .dp-nav inherits the nav's own `display:flex; align-items:center`,
   which silently replaced this grid and dropped the first column. */
.dp-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
  gap: var(--dp-s6);
  align-items: start;
  width: 100%;
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
  padding-block: var(--dp-s6);
}

.dp-mega-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: var(--dp-s3);
  margin-bottom: var(--dp-s3);
  border-bottom: 2px solid var(--dp-line);
  font-family: var(--dp-font-head);
  font-size: var(--dp-t-sm); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dp-purple);
}
.dp-mega-head:hover { color: var(--dp-purple-600); text-decoration: none; }
.dp-mega-head svg { transition: transform var(--dp-fast); }
.dp-mega-head:hover svg { transform: translateX(3px); }

.dp-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.dp-mega-col li a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin-inline: -8px;
  border-radius: var(--dp-r-sm);
  font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: 1.35;
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-mega-col li a:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }

.dp-mega-flag {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--dp-nhs); background: var(--dp-nhs-bg);
  border: 1px solid #cfe0f2; border-radius: var(--dp-r-pill);
  padding: 2px 7px; line-height: 1.4;
}

.dp-mega-aside {
  padding: var(--dp-s5);
  background: var(--dp-surface-2);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-md);
}
.dp-mega-aside h4 { margin: 0 0 var(--dp-s2); font-size: var(--dp-t-base); }
.dp-mega-aside p { margin: 0 0 var(--dp-s4); font-size: var(--dp-t-sm); color: var(--dp-ink-3); line-height: var(--dp-lh-base); }
.dp-mega-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--dp-s3);
  font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
  color: var(--dp-purple);
}

/* The drawer already lists services on mobile, so the panel is desktop only. */
@media (max-width: 1024px) {
  .dp-mega { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-mega, .dp-nav li.dp-has-mega > a > svg { transition: none; }
}

/* =============================================================
   PHARMACY FIRST EXPLAINER
   ============================================================= */

.dp-explainer {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--dp-s7);
  margin-bottom: var(--dp-section);
  padding-bottom: var(--dp-section);
  border-bottom: 1px solid var(--dp-line);
}
.dp-explainer-main h2 { margin-bottom: var(--dp-s4); }

.dp-explainer-side {
  padding: var(--dp-s6);
  background: var(--dp-nhs-bg);
  border: 1px solid #cfe0f2;
  border-radius: var(--dp-r-md);
}
.dp-explainer-side h3 { margin: 0 0 var(--dp-s4); font-size: var(--dp-t-h4); color: var(--dp-nhs); }

.dp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dp-s4); }
.dp-facts li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: var(--dp-lh-base);
}
.dp-facts li svg { flex: 0 0 auto; margin-top: 2px; color: var(--dp-nhs); }
.dp-facts li:last-child svg { color: var(--dp-pmed); }

.dp-conditions-head { margin-bottom: var(--dp-s2); }
.dp-conditions-sub { margin: 0 0 var(--dp-s6); color: var(--dp-ink-3); font-size: var(--dp-t-lg); }

/* Homepage condition chips became links to their own pages. */
.dp-trust-link { transition: color var(--dp-fast); }
.dp-trust-link:hover { color: var(--dp-purple); text-decoration: none; }
.dp-trust-link:hover svg { color: var(--dp-purple); }

@media (max-width: 900px) {
  .dp-explainer { grid-template-columns: 1fr; gap: var(--dp-s6); }
}

/* Service breadcrumb — sits on the dark hero, so it needs its own colours
   rather than the light-background breadcrumb styling WooCommerce pages use. */
.dp-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--dp-s4);
  font-size: var(--dp-t-sm);
  color: rgba(255,255,255,.55);
}
.dp-crumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.dp-crumbs a:hover { color: #fff; text-decoration: underline; }
.dp-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* ==========================================================================
   Prescriptions
   Two routes, NHS and private. The NHS card leads because it is the larger
   volume and the free one; the private card is quieter but not hidden.
   ========================================================================== */

.dp-rx-intro { margin-bottom: var(--dp-s7); }

.dp-rx-routes {
	display: grid;
	gap: var(--dp-s5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.dp-rx-routes { grid-template-columns: 1fr 1fr; }
}

.dp-rx-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dp-s3);
	padding: var(--dp-s6);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-lg);
	background: var(--dp-surface);
}

.dp-rx-route.is-nhs {
	border-color: var(--dp-purple-200);
	background: var(--dp-purple-50);
}

.dp-rx-route h2 {
	margin: 0;
	font-size: var(--dp-t-h3);
	line-height: var(--dp-lh-snug);
}

.dp-rx-route p {
	margin: 0;
	color: var(--dp-ink-2);
	line-height: var(--dp-lh-base);
}

/* Push the button to the bottom so the two cards align however long the text. */
.dp-rx-route .dp-btn { margin-top: auto; }

.dp-rx-route-tag {
	font-size: var(--dp-t-xs);
	font-weight: 700;
	letter-spacing: var(--dp-ls-wide);
	text-transform: uppercase;
	color: var(--dp-purple-700);
}

.dp-rx-route.is-private .dp-rx-route-tag { color: var(--dp-ink-3); }

/* --- NHS ordering widget ------------------------------------------------ */

.dp-rx-order { margin-top: var(--dp-s7); }

.dp-rx-order-todo {
	padding: var(--dp-s4);
	border: 1px dashed var(--dp-line);
	border-radius: var(--dp-r-md);
	background: var(--dp-surface-2);
	color: var(--dp-ink-2);
	font-size: var(--dp-t-sm);
}

.dp-rx-order-todo p { margin: 0; }

.dp-rx-dialog {
	width: min(760px, calc(100vw - var(--dp-s5)));
	max-height: min(880px, calc(100dvh - var(--dp-s5)));
	padding: 0;
	border: 0;
	border-radius: var(--dp-r-lg);
	box-shadow: var(--dp-shadow-lg);
	background: var(--dp-surface);
	overflow: hidden;
}

.dp-rx-dialog::backdrop { background: rgb(0 0 0 / 0.5); }

.dp-rx-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-s4);
	padding: var(--dp-s4) var(--dp-s5);
	border-bottom: 1px solid var(--dp-line);
}

.dp-rx-dialog-head h2 {
	margin: 0;
	font-size: var(--dp-t-h4);
}

.dp-rx-dialog-x {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--dp-r-pill);
	background: transparent;
	color: var(--dp-ink-2);
	cursor: pointer;
}

.dp-rx-dialog-x:hover { background: var(--dp-surface-2); color: var(--dp-ink); }

.dp-rx-dialog-body {
	/* The iframe sets its own height; this caps it and scrolls past it. */
	max-height: calc(min(880px, 100dvh - var(--dp-s5)) - 72px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.dp-rx-dialog-body iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
}

/* --- Private prescription form ------------------------------------------ */

.dp-rx-cols {
	display: grid;
	gap: var(--dp-s7);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.dp-rx-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--dp-s8); }
	.dp-rx-form-wrap { position: sticky; top: calc(var(--dp-header-h) + var(--dp-s5)); }
}

.dp-rx-form-wrap {
	padding: var(--dp-s6);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-lg);
	background: var(--dp-surface-2);
}

.dp-rx-field { margin-bottom: var(--dp-s5); }

.dp-rx-field > label,
.dp-rx-field legend {
	display: block;
	margin-bottom: var(--dp-s2);
	font-weight: 600;
	line-height: var(--dp-lh-snug);
}

.dp-rx-field legend { padding: 0; }
.dp-rx-field fieldset { margin: 0; padding: 0; border: 0; }

.dp-rx-req,
.dp-rx-opt {
	font-weight: 400;
	color: var(--dp-ink-3);
	font-size: var(--dp-t-sm);
}

.dp-rx-hint {
	margin: 0 0 var(--dp-s2);
	color: var(--dp-ink-3);
	font-size: var(--dp-t-sm);
	line-height: var(--dp-lh-base);
}

.dp-rx-field input[type="text"],
.dp-rx-field input[type="email"],
.dp-rx-field input[type="tel"],
.dp-rx-field select,
.dp-rx-field textarea {
	width: 100%;
	padding: var(--dp-s3) var(--dp-s4);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-md);
	/* background-color, NOT the background shorthand: the shorthand resets
	   background-image, which wiped the select's chevron declared above. */
	background-color: var(--dp-surface);
	font: inherit;
	color: var(--dp-ink);
}

.dp-rx-field textarea { resize: vertical; }

/*
 * Declared AFTER the shared field rule on purpose. That rule uses the padding
 * and background SHORTHANDS, which reset padding-right and background-image —
 * so a select styled before it lost both its chevron and the space for it.
 */
.dp-rx-field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: calc(var(--dp-s4) * 2 + 16px);

	/* Same inline chevron as the shop sorting control: no extra request, and
	   nothing inherited from the system dropdown. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6377' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--dp-s4) center;
}

.dp-rx-field input:focus-visible,
.dp-rx-field select:focus-visible,
.dp-rx-field textarea:focus-visible {
	outline: 2px solid var(--dp-purple-500);
	outline-offset: 1px;
	border-color: var(--dp-purple-500);
}

.dp-rx-field.is-bad input,
.dp-rx-field.is-bad select,
.dp-rx-field.is-bad textarea { border-color: var(--dp-danger); }

.dp-rx-err {
	margin: 0 0 var(--dp-s2);
	color: var(--dp-danger);
	font-size: var(--dp-t-sm);
	font-weight: 600;
	line-height: var(--dp-lh-base);
}

.dp-rx-radio {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-s3);
	margin-bottom: var(--dp-s2);
	padding: var(--dp-s3) var(--dp-s4);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-md);
	background: var(--dp-surface);
	cursor: pointer;
	line-height: var(--dp-lh-snug);
}

.dp-rx-radio:has(input:checked) {
	border-color: var(--dp-purple-500);
	background: var(--dp-purple-50);
}

.dp-rx-radio input { margin: 2px 0 0; flex: none; }

.dp-rx-consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-s3);
	font-weight: 400;
	line-height: var(--dp-lh-base);
	cursor: pointer;
}

.dp-rx-consent input { margin: 3px 0 0; flex: none; }

.dp-rx-submit { width: 100%; }

.dp-rx-foot {
	margin: var(--dp-s4) 0 0;
	color: var(--dp-ink-3);
	font-size: var(--dp-t-sm);
	line-height: var(--dp-lh-base);
}

.dp-rx-errs {
	margin-bottom: var(--dp-s5);
	padding: var(--dp-s4);
	border: 2px solid var(--dp-danger);
	border-radius: var(--dp-r-md);
	background: var(--dp-danger-bg);
}

.dp-rx-errs h2 { margin: 0 0 var(--dp-s2); font-size: var(--dp-t-base); }
.dp-rx-errs ul { margin: 0; padding-left: var(--dp-s5); }
.dp-rx-errs a { color: var(--dp-danger); font-weight: 600; }

/* The honeypot must be reachable by bots and invisible to people — so it is
   moved off-screen rather than display:none, which some bots skip. */
.dp-rx-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dp-rx-done {
	padding: var(--dp-s6);
	border: 1px solid var(--dp-green-300);
	border-radius: var(--dp-r-lg);
	background: var(--dp-green-50);
}

.dp-rx-done h2 { margin: 0 0 var(--dp-s3); font-size: var(--dp-t-h4); }
.dp-rx-done p { margin: 0 0 var(--dp-s4); line-height: var(--dp-lh-base); }
.dp-rx-done p:last-child { margin-bottom: 0; }

/* Cart, checkout and account: full container width, no reading measure.
   The checkout block needs >1000px to lay out in two columns. */
.dp-app { width: 100%; max-width: none; }
/* The app band is a boxed card, so stacking it between two full sections
   put two sections' worth of padding (166px) each side of it. One is enough:
   the neighbour above supplies the space over the card, the card's own
   bottom padding supplies the space under it. A coloured band on either
   side keeps the full gap, because the band runs to its own edge. */
.dp-section:not(.dp-band-2):not(.dp-band-deep) + .dp-app { padding-top: 0; }
.dp-app + .dp-section:not(.dp-band-2):not(.dp-band-deep) { padding-top: 0; }

/* ==========================================================================
   Contact page
   ========================================================================== */

/* --- Quick contact cards ------------------------------------------------ */

.dp-contact-quick {
	display: grid;
	gap: var(--dp-s4);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.dp-contact-quick { grid-template-columns: repeat(3, 1fr); }
}

.dp-contact-card {
	display: flex;
	flex-direction: column;
	gap: var(--dp-s1);
	padding: var(--dp-s5);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-lg);
	background: var(--dp-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dp-fast) var(--dp-ease), transform var(--dp-fast) var(--dp-ease);
}

a.dp-contact-card:hover {
	border-color: var(--dp-purple-300);
	transform: translateY(-2px);
	/* The whole card is the link. The theme underlines link text on hover,
	   which here underlines every line in the card at once. The lift and the
	   border are the affordance. */
	text-decoration: none;
}

a.dp-contact-card:focus-visible {
	outline: 2px solid var(--dp-purple-500);
	outline-offset: 2px;
}

.dp-contact-ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--dp-s2);
	border-radius: var(--dp-r);
	background: var(--dp-purple-50);
	color: var(--dp-purple-700);
}

.dp-contact-ico svg { width: 20px; height: 20px; }

.dp-contact-label {
	font-size: var(--dp-t-xs);
	font-weight: 700;
	letter-spacing: var(--dp-ls-wide);
	text-transform: uppercase;
	color: var(--dp-ink-3);
}

.dp-contact-value {
	font-family: var(--dp-font-head);
	font-size: var(--dp-t-lg);
	line-height: var(--dp-lh-snug);
	color: var(--dp-ink);
}

.dp-contact-note {
	font-size: var(--dp-t-sm);
	color: var(--dp-ink-3);
	line-height: var(--dp-lh-base);
}

.dp-contact-card-todo {
	border-style: dashed;
	background: var(--dp-surface-2);
}

/* --- Before you visit --------------------------------------------------- */

.dp-visit-head { max-width: var(--dp-maxw-text); margin-bottom: var(--dp-s6); }
.dp-visit-head h2 { margin: 0 0 var(--dp-s3); }
.dp-visit-lead { margin: 0; color: var(--dp-ink-2); line-height: var(--dp-lh-loose); }

.dp-visit-grid {
	display: grid;
	gap: var(--dp-s5);
	grid-template-columns: 1fr;
}

@media (min-width: 820px) {
	.dp-visit-grid { grid-template-columns: 1fr 1fr; }
}

.dp-visit-card {
	padding: var(--dp-s6);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-lg);
	background: var(--dp-surface);
}

/* The left edge does the signalling, so the two cards read as a pair rather
   than as a good box and a bad box. */
.dp-visit-yes { border-left: 4px solid var(--dp-green-500); }
.dp-visit-no  { border-left: 4px solid var(--dp-pmed-strong, #b26a00); }
.dp-visit-remote { border-left: 4px solid var(--dp-purple); }
.dp-visit-intro { margin: 0 0 var(--dp-s4); color: var(--dp-ink-2); } /* the intro only — a bare `> p` rule was also catching .dp-visit-foot and killing the gap above its rule */

.dp-visit-card h3 {
	display: flex;
	align-items: center;
	gap: var(--dp-s3);
	margin: 0 0 var(--dp-s4);
	font-size: var(--dp-t-h4);
}

.dp-visit-ico {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: var(--dp-r-pill);
}

.dp-visit-ico svg { width: 16px; height: 16px; }
.dp-visit-yes .dp-visit-ico { background: var(--dp-green-100); color: var(--dp-green-700); }
.dp-visit-no .dp-visit-ico  { background: var(--dp-pmed-bg); color: var(--dp-pmed-strong, #b26a00); }
.dp-visit-remote .dp-visit-ico { background: var(--dp-purple-50); color: var(--dp-purple-700); }

.dp-visit-card ul {
	margin: 0;
	padding-left: var(--dp-s5);
	line-height: var(--dp-lh-loose);
}

.dp-visit-card li + li { margin-top: var(--dp-s2); }

.dp-visit-foot {
	margin: var(--dp-s4) 0 0;
	padding-top: var(--dp-s4);
	border-top: 1px solid var(--dp-line-soft);
	font-size: var(--dp-t-sm);
	color: var(--dp-ink-3);
	line-height: var(--dp-lh-base);
}

.dp-visit-instead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-s5);
	flex-wrap: wrap;
	margin-top: var(--dp-s5);
	padding: var(--dp-s6);
	border-radius: var(--dp-r-lg);
	background: var(--dp-purple-50);
	border: 1px solid var(--dp-purple-200);
}

.dp-visit-instead h3 { margin: 0 0 var(--dp-s2); font-size: var(--dp-t-h4); }
.dp-visit-instead p  { margin: 0; max-width: 62ch; color: var(--dp-ink-2); line-height: var(--dp-lh-base); }
.dp-visit-instead .dp-btn { flex: none; }

/* --- Find us ------------------------------------------------------------ */

/* align-items: stretch (the default) so the map matches the detail column's
   height exactly. Kept side by side rather than given its own full-width row:
   the page is already long, and a full-width map would push the opening hours
   away from the address they belong with. */
.dp-find-grid {
	display: grid;
	gap: var(--dp-s7);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.dp-find-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.dp-find-detail h2 { margin: 0 0 var(--dp-s5); }

.dp-find-block {
	display: flex;
	gap: var(--dp-s4);
	padding-block: var(--dp-s4);
	border-top: 1px solid var(--dp-line-soft);
}

.dp-find-block:first-of-type { border-top: 0; padding-top: 0; }

.dp-find-ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: var(--dp-r);
	background: var(--dp-surface-3);
	color: var(--dp-purple-700);
}

.dp-find-ico svg { width: 18px; height: 18px; }

.dp-find-block h3 {
	margin: 0 0 var(--dp-s1);
	font-size: var(--dp-t-xs);
	font-weight: 700;
	letter-spacing: var(--dp-ls-wide);
	text-transform: uppercase;
	color: var(--dp-ink-3);
}

.dp-find-block address,
.dp-find-block p {
	margin: 0;
	font-style: normal;
	line-height: var(--dp-lh-base);
}

.dp-find-hours-wrap { width: 100%; }

.dp-hours { width: 100%; border-collapse: collapse; }

.dp-hours th,
.dp-hours td {
	padding: var(--dp-s2) 0;
	text-align: left;
	font-weight: 400;
	line-height: var(--dp-lh-snug);
	border-bottom: 1px solid var(--dp-line-soft);
}

.dp-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.dp-hours tr:last-child th, .dp-hours tr:last-child td { border-bottom: 0; }
.dp-hours .is-closed { color: var(--dp-ink-4); }

.dp-hours .is-today th,
.dp-hours .is-today td { font-weight: 700; color: var(--dp-purple-800); }

.dp-hours-today {
	display: inline-block;
	margin-left: var(--dp-s2);
	padding: 1px 8px;
	border-radius: var(--dp-r-pill);
	background: var(--dp-purple-100);
	color: var(--dp-purple-800);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--dp-ls-wide);
	text-transform: uppercase;
	vertical-align: 1px;
}

.dp-hours-note {
	margin: var(--dp-s4) 0 0;
	font-size: var(--dp-t-sm);
	color: var(--dp-ink-3);
	line-height: var(--dp-lh-base);
}

/* --- Map ---------------------------------------------------------------- */

.dp-map {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 420px;
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-r-lg);
	background: var(--dp-surface-3);
}









.dp-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* --- Urgent notice ------------------------------------------------------ */

.dp-urgent {
	margin-top: var(--dp-s6);
	padding: var(--dp-s5);
	border: 1px solid var(--dp-danger);
	border-left-width: 4px;
	border-radius: var(--dp-r-lg);
	background: var(--dp-danger-bg);
}

.dp-urgent h3 {
	display: flex;
	align-items: center;
	gap: var(--dp-s3);
	margin: 0 0 var(--dp-s2);
	font-size: var(--dp-t-h4);
	color: var(--dp-danger);
}

.dp-urgent .dp-visit-ico { background: transparent; color: var(--dp-danger); }
.dp-urgent p { margin: 0; line-height: var(--dp-lh-base); }

/* ==========================================================================
   BeWell
   ========================================================================== */

/*
 * The inline booker is a web component. It exposes --bw-* custom properties
 * for the broad strokes and ::part() for anything finer, so it can be dressed
 * in the site's own tokens rather than sitting in the page as a foreign object.
 */
.dp-booker {
	margin-top: var(--dp-s6);
}

bewell-booker-inline {
	display: block;

	--bw-font-family: var(--dp-font-body);
	--bw-container-background-color: var(--dp-surface-2);
	--bw-container-border-radius: var(--dp-r-lg);
	--bw-container-box-shadow: none;

	--bw-title-color: var(--dp-ink);
	--bw-title-font-family: var(--dp-font-head);
	--bw-title-font-size: var(--dp-t-h3);
	--bw-title-font-weight: 700;
	--bw-title-text-transform: none;

	--bw-btn-background-color: var(--dp-purple);
	--bw-btn-border-radius: var(--dp-r-pill);
	--bw-btn-color: #fff;
	--bw-btn-font-family: var(--dp-font-head);
	--bw-btn-font-size: var(--dp-t-base);
	--bw-btn-font-weight: 700;
	--bw-btn-text-transform: none;

	--bw-form-background-color: var(--dp-surface);
	--bw-form-border-radius: var(--dp-r);
	--bw-form-max-width: none;

	--bw-tag-background-color: var(--dp-surface);
	--bw-tag-color: var(--dp-ink-2);
	--bw-tag-border-radius: var(--dp-r-pill);
	--bw-tag-font-size: var(--dp-t-sm);
	--bw-tag-font-weight: 600;
	--bw-tag-text-transform: none;
	--bw-tag-icon-color: var(--dp-purple-700);

	--bw-input-icon-color: var(--dp-purple-700);
}

/*
 * The popup hosts are hidden until someone asks for a widget.
 *
 * On load the ordering widget renders its panel and plays an open-then-close
 * animation before settling — a ~1100x1250px flash lasting about 280ms, on
 * every page that carries the script. Hiding the host until first use removes
 * it. assets/js/bewell.js adds .dp-bewell-live on the first trigger click.
 *
 * visibility (not display) because the widgets measure themselves during
 * init; display:none would give them a zero-sized box to lay out against.
 */
bewell-widget,
bewell-booker-modal {
	visibility: hidden;
}

.dp-bewell-live bewell-widget,
.dp-bewell-live bewell-booker-modal {
	visibility: visible;
}

/*
 * Their modal is position:fixed at z-index 16/17 while the site header is 60,
 * so the header painted over the popup. Giving the host its own stacking
 * context above the header lifts the whole shadow tree with it — the inner
 * z-indexes then resolve inside this context rather than against our chrome.
 *
 * Above the off-canvas (100) and our own modals (120), below the skip link.
 */
bewell-widget,
bewell-booker-modal {
	position: relative;
	z-index: 150;
}

/* Admin-only nudge when a service page has no BeWell service set. */
.dp-bewell-hint {
	margin: 0 0 var(--dp-s5);
	padding: var(--dp-s4);
	border: 1px dashed var(--dp-line);
	border-radius: var(--dp-r-md);
	background: var(--dp-surface-2);
	color: var(--dp-ink-2);
	font-size: var(--dp-t-sm);
	line-height: var(--dp-lh-base);
}

.dp-rx-order-note {
	margin: var(--dp-s3) 0 0;
	color: var(--dp-ink-3);
	font-size: var(--dp-t-sm);
	line-height: var(--dp-lh-base);
	max-width: 52ch;
}

/* Hero booking panel: three steps in place of the old embed slot. */
.dp-hero-steps {
	margin: 0 0 var(--dp-s5);
	padding: 0;
	list-style: none;
	counter-reset: dp-step;
}

.dp-hero-steps li {
	position: relative;
	counter-increment: dp-step;
	padding: var(--dp-s2) 0 var(--dp-s2) var(--dp-s6);
	line-height: var(--dp-lh-snug);
	color: var(--dp-ink-2);
}

.dp-hero-steps li::before {
	content: counter(dp-step);
	position: absolute;
	left: 0;
	top: var(--dp-s2);
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--dp-r-pill);
	background: var(--dp-purple-100);
	color: var(--dp-purple-800);
	font-size: var(--dp-t-xs);
	font-weight: 700;
}

/*
 * BeWell injects a <style> into our head containing
 *     :root { font-family: 'Inter'; }
 * plus its own @font-face for "Inter" pointing at bewellweb.co.uk.
 *
 * Our body font WAS also called Inter, so the browser had two faces for one
 * family and re-rendered every piece of body text on the page when theirs
 * arrived — a full-page flicker roughly 500ms after load, on every page
 * carrying the widget. The theme's faces are now named "Doorstep Body" and
 * "Doorstep Head" so nothing third-party can claim them.
 *
 * This re-asserts the root font as well. :root from their injected style is
 * (0,1,0) and lands after ours in the cascade, so html:root — (0,1,1) — is
 * what takes it back.
 */
html:root {
	font-family: var(--dp-font-body);
}

/*
 * Distance selling notice on NHS service pages.
 *
 * Informational rather than a warning: the message is "you do not need to
 * travel", which is good news. Purple-tinted like the other guidance panels
 * rather than amber, which would read as a problem.
 */
.dp-remote {
	display: flex;
	gap: var(--dp-s4);
	align-items: flex-start;
	margin-bottom: var(--dp-s6);
	padding: var(--dp-s5);
	border: 1px solid var(--dp-purple-200);
	border-left: 4px solid var(--dp-purple);
	border-radius: var(--dp-r-lg);
	background: var(--dp-purple-50);
}

.dp-remote-ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: var(--dp-r-pill);
	background: var(--dp-purple-100);
	color: var(--dp-purple-700);
}

.dp-remote-ico svg { width: 18px; height: 18px; }

/* Fill the panel. Without this the flex item shrinks to its widest child. */
.dp-remote > div {
	flex: 1;
	min-width: 0;
}

.dp-remote h2 {
	margin: 0 0 var(--dp-s2);
	font-size: var(--dp-t-h4);
	line-height: var(--dp-lh-snug);
}

/*
 * No reading measure here on purpose. 68ch is right for long-form prose, but
 * this is two sentences inside a full-width panel — capping it left 40% of the
 * panel empty and read as a mistake. Short blocks tolerate a longer line.
 */
.dp-remote p {
	margin: 0;
	color: var(--dp-ink-2);
	line-height: var(--dp-lh-base);
}

@media (max-width: 600px) {
	.dp-remote { padding: var(--dp-s4); gap: var(--dp-s3); }
	.dp-remote-ico { width: 30px; height: 30px; }
	.dp-remote-ico svg { width: 15px; height: 15px; }
}

/* =============================================================
   SUB-SERVICES
   The travel clinic is one page with a vaccine beneath it for each thing
   it offers. The parent lists the children as a price table; a child has
   a facts panel, a photograph and a row of chips to its siblings.
   ============================================================= */

.dp-hero-figure { margin: 0; }
.dp-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dp-r-lg);
  box-shadow: var(--dp-shadow-lg);
}

.dp-price-course {
  display: block;
  font-size: var(--dp-t-sm);
  font-weight: 600;
  color: var(--dp-purple-700);
}
.dp-price-jump {
  display: inline-block;
  margin-top: var(--dp-s3);
  font-size: var(--dp-t-sm);
  color: var(--dp-ink-3);
}

.dp-service-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--dp-s8);
  align-items: start;
}
.dp-service-aside {
  position: sticky;
  top: calc(var(--dp-header-h) + var(--dp-s5));
  display: flex;
  flex-direction: column;
  gap: var(--dp-s4);
}
.dp-service-figure { margin: 0; }
.dp-service-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dp-r-md);
}

.dp-facts {
  margin: 0;
  padding: var(--dp-s2) var(--dp-s5);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-md);
  background: var(--dp-surface-2);
}
.dp-facts > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--dp-s3);
  padding: var(--dp-s3) 0;
  border-bottom: 1px solid var(--dp-line-soft);
}
.dp-facts > div:last-child { border-bottom: 0; }
.dp-facts dt { font-size: var(--dp-t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--dp-ls-wide); color: var(--dp-ink-3); padding-top: 3px; }
.dp-facts dd { margin: 0; font-size: var(--dp-t-sm); color: var(--dp-ink); line-height: var(--dp-lh-base); }

.dp-aside-book {
  padding: var(--dp-s5);
  border-radius: var(--dp-r-md);
  background: var(--dp-purple-50);
  border: 1px solid var(--dp-purple-100);
}
.dp-aside-book .dp-fine { margin: var(--dp-s3) 0 0; line-height: var(--dp-lh-loose); }

/* Price table */
.dp-subservices, .dp-siblings { margin-top: var(--dp-s8); }
.dp-rows {
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-md);
  background: #fff;
  overflow: hidden;
}
.dp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dp-s3) var(--dp-s6);
  padding: var(--dp-s4) var(--dp-s5);
  border-bottom: 1px solid var(--dp-line-soft);
  color: inherit;
  text-decoration: none;
  transition: background var(--dp-fast) var(--dp-ease);
}
.dp-row:last-child { border-bottom: 0; }
.dp-row:hover { background: var(--dp-purple-50); text-decoration: none; }
.dp-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-row-title { font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-lg); color: var(--dp-ink); }
.dp-row:hover .dp-row-title { color: var(--dp-purple-700); }
.dp-row-sub { font-size: var(--dp-t-sm); color: var(--dp-ink-3); }
.dp-row-meta { font-size: var(--dp-t-xs); color: var(--dp-ink-4); }
.dp-row-price {
  display: grid;
  grid-template-columns: auto 16px;
  align-items: center;
  column-gap: var(--dp-s3);
  text-align: right;
}
.dp-row-price b { font-family: var(--dp-font-head); font-size: var(--dp-t-h4); font-weight: 800; color: var(--dp-ink); grid-column: 1; }
.dp-row-price small { display: block; font-size: var(--dp-t-xs); color: var(--dp-ink-3); grid-column: 1; }
.dp-row-price svg { grid-column: 2; grid-row: 1 / span 2; color: var(--dp-purple-500); }
.dp-rows-note {
  margin: var(--dp-s4) 0 0;
  padding: var(--dp-s4) var(--dp-s5);
  font-size: var(--dp-t-sm);
  color: var(--dp-ink-2);
  line-height: var(--dp-lh-loose);
  border-left: 4px solid var(--dp-green-500);
  background: var(--dp-green-50);
  border-radius: 0 var(--dp-r) var(--dp-r) 0;
}
.dp-rows-note strong { color: var(--dp-ink); }

/* Sibling chips */
.dp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--dp-s3); }
.dp-chips a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-pill);
  background: #fff;
  color: var(--dp-ink);
  font-size: var(--dp-t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dp-fast) var(--dp-ease), background var(--dp-fast) var(--dp-ease);
}
.dp-chips a span { color: var(--dp-ink-3); font-weight: 500; }
.dp-chips a:hover { border-color: var(--dp-purple-300); background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }
.dp-chips .dp-chip-all { background: var(--dp-purple-50); border-color: var(--dp-purple-100); color: var(--dp-purple-700); }

@media (max-width: 1024px) {
  .dp-service-layout { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s6); } /* minmax(0): a wide table must scroll inside its figure, not widen the page */
  /* One column: the photograph goes above the text, the facts and booking
     panel below it. The aside dissolves so its children can be reordered
     against the prose. */
  .dp-service-aside { display: contents; }
  .dp-service-figure { order: -1; }
  .dp-facts, .dp-aside-book { margin-top: 0; }
}
@media (max-width: 640px) {
  .dp-row { grid-template-columns: 1fr; gap: var(--dp-s2); padding: var(--dp-s4); }
  .dp-row-price { text-align: left; grid-template-columns: auto 16px; justify-content: start; }
  .dp-row-price b { font-size: var(--dp-t-lg); }
  .dp-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Tables in long-form content — styled as the same row list the vaccine
   prices use, so a price table in the copy and the generated one match. */
.dp-prose .wp-block-table { margin: var(--dp-s5) 0; overflow-x: auto; border: 1px solid var(--dp-line); border-radius: var(--dp-r-md); background: #fff; }
.dp-prose table { width: 100%; border-collapse: collapse; font-size: var(--dp-t-base); }
/* Core's block styles draw a full grid (border on every cell) and split the
   columns evenly; both are overridden at higher specificity. The price
   column shrinks to its content so the name gets the width. */
.dp-prose .wp-block-table th, .dp-prose .wp-block-table td { padding: var(--dp-s4) var(--dp-s5); text-align: left; border: 0; border-bottom: 1px solid var(--dp-line-soft); vertical-align: middle; }
.dp-prose .wp-block-table tr:last-child td { border-bottom: 0; }
.dp-prose .wp-block-table thead { border-bottom: 1px solid var(--dp-line); } /* core draws this 3px */
.dp-prose .wp-block-table table { table-layout: auto; }
/* The name column claims all spare width; the others shrink to their
   (non-wrapping) content. Only applied to two-column tables — the malaria
   table has four columns that share the width evenly. */
.dp-prose .wp-block-table td:first-child:nth-last-child(2) { width: 100%; }
.dp-prose th { font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-xs); text-transform: uppercase; letter-spacing: var(--dp-ls-wide); color: var(--dp-ink-3); background: var(--dp-surface-2); padding-block: var(--dp-s3); }
.dp-prose td:first-child { font-weight: 600; color: var(--dp-ink); }
.dp-prose td:not(:first-child) { white-space: nowrap; color: var(--dp-ink-2); }
.dp-prose td:last-child, .dp-prose th:last-child { text-align: right; }
.dp-prose td:last-child { font-family: var(--dp-font-head); font-weight: 800; font-size: var(--dp-t-lg); color: var(--dp-ink); }
.dp-prose-after { margin-top: var(--dp-s8); }
.dp-prose-after > h2:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .dp-prose th, .dp-prose td { padding: var(--dp-s3) var(--dp-s4); }
  .dp-prose td:last-child { font-size: var(--dp-t-base); }
}

/* =============================================================
   SPECIALIST BLOCKS
   A named clinician with a video and their own booking button, written
   into the page copy as a Custom HTML block (hair loss, private GP).
   ============================================================= */

.dp-specialist {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--dp-s6);
  align-items: start;
  margin: var(--dp-s6) 0;
  padding: var(--dp-s6);
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-md);
  background: var(--dp-surface-2);
}
.dp-specialist--wide { grid-template-columns: 1fr; }
.dp-specialist--wide .dp-embed { max-width: none; }
.dp-specialist-body > h3 { margin: 0; font-size: var(--dp-t-h3); }
.dp-specialist-body > * + * { margin-top: var(--dp-s3); }
.dp-specialist-role { font-size: var(--dp-t-sm); font-weight: 600; color: var(--dp-purple-700); margin-top: 2px !important; }
.dp-specialist-actions { display: flex; flex-wrap: wrap; gap: var(--dp-s3); margin-top: var(--dp-s5) !important; }

.dp-video-portrait { margin: 0; }
.dp-video-portrait video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--dp-r);
  background: #000;
}
.dp-embed { margin: 0; aspect-ratio: 16 / 9; }
.dp-embed iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--dp-r); background: #000; }

/* Blood-test panels: what each one measures, folded away until asked for */
.dp-analytes details {
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r);
  background: #fff;
  padding: 0 var(--dp-s5);
}
.dp-analytes details + details { margin-top: var(--dp-s3); }
.dp-analytes summary {
  cursor: pointer;
  list-style: none;
  padding: var(--dp-s4) 0;
  font-family: var(--dp-font-head);
  font-weight: 700;
  color: var(--dp-ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--dp-s3);
}
.dp-analytes summary::-webkit-details-marker { display: none; }
.dp-analytes summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--dp-purple-500); }
.dp-analytes details[open] summary::after { content: '–'; }
.dp-analytes summary small { font-weight: 500; color: var(--dp-ink-3); font-family: var(--dp-font-body); margin-left: auto; }
.dp-analytes details > div { padding: 0 0 var(--dp-s4); border-top: 1px solid var(--dp-line-soft); }
.dp-analytes details > div > p { margin: var(--dp-s3) 0 var(--dp-s2); font-weight: 600; font-size: var(--dp-t-sm); }
.dp-analytes details ul { margin: 0; padding-left: 1.2em; font-size: var(--dp-t-sm); color: var(--dp-ink-2); columns: 2; column-gap: var(--dp-s5); }
.dp-analytes details li { break-inside: avoid; margin: 0 0 3px; }

.dp-prose s { color: var(--dp-ink-4); font-weight: 500; font-size: .8em; margin-right: 4px; }

@media (max-width: 767px) {
  .dp-specialist { grid-template-columns: 1fr; padding: var(--dp-s5); }
  .dp-video-portrait { max-width: 260px; }
  .dp-analytes details ul { columns: 1; }
}

/* =============================================================
   WEIGHT LOSS LANDING PAGE  (single-dp_service-weight-loss.php)
   ============================================================= */

/* The trust line is a list; the browser's default left padding was
   indenting it under the rule above, and the third item wrapped ragged. */
.dp-wl-trust { list-style: none; margin: 0; padding: var(--dp-s5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-s3) var(--dp-s5); }
/* Inline text, same as the other trust lines: as a flex row the text after
   the <b> became its own item and picked up the gap (Will, 21 Sep). */
.dp-wl-trust li { display: block; line-height: 1.5; }
.dp-wl-trust li svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
@media (max-width: 640px) { .dp-wl-trust { grid-template-columns: 1fr; } }

/* Eligibility: copy left, checker right */
.dp-wl-elig {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: var(--dp-s8);
  align-items: start;
}
.dp-wl-elig h2 { margin-bottom: var(--dp-s3); }
.dp-wl-elig .dp-lead { margin-bottom: var(--dp-s4); }
.dp-wl-checks { list-style: none; margin: 0 0 var(--dp-s4); padding: 0; }
.dp-wl-checks li { display: flex; gap: var(--dp-s3); align-items: flex-start; margin-bottom: var(--dp-s3); color: var(--dp-ink-2); }
.dp-wl-checks svg { flex: 0 0 auto; margin-top: 4px; color: var(--dp-green-600); }

.dp-bmi {
  background: #fff;
  border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-lg);
  padding: var(--dp-s6);
  box-shadow: var(--dp-shadow);
}
.dp-bmi h3 { margin: 0 0 var(--dp-s4); }
.dp-bmi-units { display: flex; gap: var(--dp-s2); margin-bottom: var(--dp-s4); }
.dp-bmi-units label {
  flex: 1; text-align: center; padding: 8px 12px;
  border: 1px solid var(--dp-line); border-radius: var(--dp-r-pill);
  font-size: var(--dp-t-sm); font-weight: 600; cursor: pointer;
}
.dp-bmi-units label:has(:checked) { background: var(--dp-purple); color: #fff; border-color: var(--dp-purple); }
.dp-bmi-units input { position: absolute; opacity: 0; pointer-events: none; }
.dp-bmi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-s3); }
.dp-bmi-fields[hidden] { display: none; } /* display:grid would otherwise beat the hidden attribute */
.dp-bmi-fields label span { display: block; font-size: var(--dp-t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--dp-ls-wide); color: var(--dp-ink-3); margin-bottom: 4px; }
.dp-bmi-fields input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--dp-line); border-radius: var(--dp-r);
  font: inherit; font-size: var(--dp-t-lg); color: var(--dp-ink); background: var(--dp-surface-2);
}
.dp-bmi-fields input:focus { outline: none; border-color: var(--dp-purple); box-shadow: var(--dp-ring); background: #fff; }
.dp-bmi-result {
  display: grid; grid-template-columns: auto 1fr; gap: var(--dp-s4); align-items: center;
  margin-top: var(--dp-s5); padding: var(--dp-s4) var(--dp-s5);
  border-radius: var(--dp-r-md); background: var(--dp-surface-2);
}
.dp-bmi-n { font-family: var(--dp-font-head); font-size: var(--dp-t-h1); font-weight: 800; line-height: 1; color: var(--dp-ink-3); min-width: 2.2em; }
.dp-bmi-msg { font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: var(--dp-lh-base); }
.dp-bmi-result.is-yes   { background: var(--dp-green-50); }   .dp-bmi-result.is-yes .dp-bmi-n   { color: var(--dp-green-700); }
.dp-bmi-result.is-maybe { background: var(--dp-purple-50); }  .dp-bmi-result.is-maybe .dp-bmi-n { color: var(--dp-purple-700); }
.dp-bmi-result.is-no    { background: var(--dp-surface-3); }  .dp-bmi-result.is-no .dp-bmi-n    { color: var(--dp-ink); }
.dp-bmi-cta { margin-top: var(--dp-s4); }
.dp-bmi > .dp-fine { margin: var(--dp-s3) 0 0; text-align: center; }

/* What is included + price card */
.dp-wl-included {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: var(--dp-s8);
  align-items: start;
}
.dp-wl-included h2 { margin-bottom: var(--dp-s6); }
.dp-wl-promises { gap: var(--dp-s6) var(--dp-s7); }
.dp-wl-price {
  position: sticky; top: calc(var(--dp-header-h) + var(--dp-s5));
  padding: var(--dp-s6);
  border-radius: var(--dp-r-lg);
  background: var(--dp-purple-50);
  border: 1px solid var(--dp-purple-100);
  text-align: center;
}
.dp-wl-price .dp-price-big { color: var(--dp-purple-800); }
.dp-wl-price ul { list-style: none; margin: var(--dp-s5) 0; padding: 0; text-align: left; }
.dp-wl-price li { position: relative; padding-left: 22px; margin-bottom: var(--dp-s3); font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: var(--dp-lh-base); }
.dp-wl-price li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--dp-purple-400); }

/* Editorial + FAQs */
.dp-wl-prose { margin-inline: auto; }
.dp-wl-prose details {
  border: 1px solid var(--dp-line); border-radius: var(--dp-r); background: #fff; padding: 0 var(--dp-s5);
}
.dp-wl-prose details + details { margin-top: var(--dp-s3); }
.dp-wl-prose summary {
  cursor: pointer; list-style: none; padding: var(--dp-s4) 0;
  font-family: var(--dp-font-head); font-weight: 700; color: var(--dp-ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--dp-s3);
}
.dp-wl-prose summary::-webkit-details-marker { display: none; }
.dp-wl-prose summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--dp-purple-500); }
.dp-wl-prose details[open] summary::after { content: '–'; }
/* Core's flow-layout rules zero the margins of a Details block's children,
   so the breathing room below the answer is padding on the panel itself. */
.dp-wl-prose details[open] { padding-bottom: var(--dp-s5); }
.dp-wl-prose details > :not(summary) { font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: var(--dp-lh-loose); }
.dp-wl-prose details > :not(summary):first-of-type { padding-top: var(--dp-s4); border-top: 1px solid var(--dp-line-soft); }
.dp-wl-prose details > :not(summary) + :not(summary) { margin-top: var(--dp-s3); }
/* A click should not leave a focus ring on the question; keyboard focus keeps one. */
.dp-wl-prose summary:focus, .dp-analytes summary:focus { outline: none; }
.dp-wl-prose summary:focus-visible, .dp-analytes summary:focus-visible { outline: 2px solid var(--dp-purple-400); outline-offset: 6px; border-radius: 4px; }
.dp-analytes details[open] { padding-bottom: var(--dp-s3); }

/* Eyebrow on the deep purple band, as in the hero */
.dp-band-deep .dp-eyebrow { color: var(--dp-green-400); }
.dp-band-deep .dp-eyebrow::before { background: var(--dp-green-400); }

/* Existing patients */
.dp-wl-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--dp-s7); align-items: center; }
.dp-wl-review-grid h2 { margin: var(--dp-s2) 0 var(--dp-s3); }
.dp-wl-review-grid p { margin: 0; max-width: 52ch; }
.dp-wl-review .dp-hero-cta { margin: 0; }

@media (max-width: 1024px) {
  .dp-wl-elig, .dp-wl-included { grid-template-columns: 1fr; gap: var(--dp-s6); }
  .dp-wl-price { position: static; }
}
@media (max-width: 767px) {
  .dp-wl-review-grid { grid-template-columns: 1fr; gap: var(--dp-s5); }
  .dp-wl-review .dp-btn { width: 100%; }
  .dp-bmi { padding: var(--dp-s5); }
  .dp-bmi-fields { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   SHOP MEGA MENU
   Three equal columns of categories, and a footer row with the two shop
   links. The "Pharmacy medicines, delivered" aside went on 18 Sep 2026.
   ============================================================= */

.dp-mega--shop .dp-mega-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-mega-foot {
  grid-column: 1 / -1;
  display: flex; gap: var(--dp-s6); flex-wrap: wrap;
  padding-top: var(--dp-s4); margin-top: var(--dp-s2);
  border-top: 1px solid var(--dp-line);
}
.dp-mega-foot .dp-mega-all { margin-top: 0; }

.dp-mega-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dp-s3); }
.dp-mega-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin-inline: -8px;
  border-radius: var(--dp-r-sm);
  font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-sm);
  color: var(--dp-ink);
  transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-mega-cat:hover { background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }
.dp-mega-cat-ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--dp-green-50); color: var(--dp-green-700);
}
.dp-mega-cat small { margin-left: auto; font-size: var(--dp-t-xs); font-weight: 600; color: var(--dp-ink-4); }
.dp-mega-subs {
  display: flex; flex-wrap: wrap; gap: 2px 6px;
  padding-left: 40px; margin-top: -2px;
  font-size: var(--dp-t-xs); color: var(--dp-ink-4); line-height: 1.6;
}
.dp-mega-subs a { color: var(--dp-ink-3); }
.dp-mega-subs a:hover { color: var(--dp-purple-700); }

/* =============================================================
   SEARCH SUGGESTIONS
   A panel under the header box, grouped products / categories /
   services / advice, keyboard-navigable. Products show thumbnail,
   brand, name, pack and price so most searches end without a page load.
   ============================================================= */
.dp-search { position: relative; }
/* The box keeps its pill shape while suggesting; the panel floats beneath with its own corners. */
.dp-search.is-loading button::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: dp-spin .7s linear infinite;
}
.dp-search.is-loading button { position: relative; color: transparent; }
@keyframes dp-spin { to { transform: rotate(360deg); } }

.dp-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80;
  max-height: min(70vh, 640px); overflow: auto;
  background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-r-md);
  box-shadow: 0 24px 48px -16px rgba(26,21,35,.3);
  padding: var(--dp-s2);
  text-align: left;
}
.dp-suggest-group + .dp-suggest-group { border-top: 1px solid var(--dp-line-soft); margin-top: var(--dp-s2); padding-top: var(--dp-s2); }
.dp-suggest-group h4 {
  margin: 0; padding: var(--dp-s2) var(--dp-s3) 4px;
  font-size: var(--dp-t-xs); font-weight: 800; letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: var(--dp-ink-4);
}
.dp-suggest-item {
  display: flex; align-items: center; gap: var(--dp-s3);
  padding: 8px var(--dp-s3); border-radius: var(--dp-r);
  color: var(--dp-ink); text-decoration: none; line-height: 1.3;
}
.dp-suggest-item:hover { text-decoration: none; }
.dp-suggest-item.is-active { background: var(--dp-purple-50); }
.dp-suggest-media {
  flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--dp-surface-3); border-radius: var(--dp-r-sm); overflow: hidden;
}
.dp-suggest-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.dp-suggest-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dp-suggest-brand { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dp-ink-4); }
.dp-suggest-name { font-family: var(--dp-font-head); font-weight: 700; font-size: var(--dp-t-sm); color: var(--dp-ink); }
.dp-suggest-name mark { background: none; color: var(--dp-purple-700); }
.dp-suggest-meta { font-size: var(--dp-t-xs); color: var(--dp-ink-3); }
.dp-suggest-flag {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--dp-pmed-strong); background: var(--dp-pmed-bg); border-radius: var(--dp-r-pill); padding: 1px 7px; margin-left: 4px;
  white-space: nowrap; display: inline-block;
}
.dp-suggest-flag--oos { color: var(--dp-ink-3); background: var(--dp-surface-3); }
.dp-suggest-price { flex: 0 0 auto; font-family: var(--dp-font-head); font-weight: 800; font-size: var(--dp-t-base); color: var(--dp-ink); white-space: nowrap; }
.dp-suggest-price s { font-weight: 500; font-size: var(--dp-t-xs); color: var(--dp-ink-4); margin-left: 4px; }
.dp-suggest-links { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.dp-suggest-link { padding: 6px 12px; border: 1px solid var(--dp-line); border-radius: var(--dp-r-pill); gap: 8px; }
.dp-suggest-link .dp-suggest-name { font-size: var(--dp-t-xs); }
.dp-suggest-link.is-active { border-color: var(--dp-purple-300); }
.dp-suggest-all { margin-top: var(--dp-s2); justify-content: center; background: var(--dp-purple-50); }
.dp-suggest-all .dp-suggest-name { color: var(--dp-purple-700); }
.dp-suggest-all.is-active { background: var(--dp-purple-100); }
.dp-suggest-empty { margin: 0; padding: var(--dp-s3); font-size: var(--dp-t-sm); color: var(--dp-ink-3); }

/* Results page extras */
.dp-search-also { display: grid; gap: var(--dp-s4); margin: 0 0 var(--dp-s6); padding: var(--dp-s4) var(--dp-s5); background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: var(--dp-r-md); }
.dp-search-also-group h2 { margin: 0 0 var(--dp-s2); font-size: var(--dp-t-xs); font-weight: 800; letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: var(--dp-ink-3); }
.dp-search-also .dp-chips a { padding: 7px 12px; font-size: var(--dp-t-xs); background: #fff; }
.dp-search-browse { margin-top: var(--dp-s6); }

@media (max-width: 767px) {
  .dp-suggest { max-height: 60vh; }
  .dp-suggest-price { font-size: var(--dp-t-sm); }
}

/* =============================================================
   TRAVEL CLINIC LANDING PAGE  (single-dp_service-travel-clinic.php)
   ============================================================= */

/* Destination tabs */
.dp-tabs-list { display: flex; flex-wrap: wrap; gap: var(--dp-s2); margin-bottom: var(--dp-s5); }
.dp-tabs-list [role="tab"] {
  padding: 10px 18px; border: 1px solid var(--dp-line); border-radius: var(--dp-r-pill);
  background: #fff; color: var(--dp-ink); font: inherit; font-size: var(--dp-t-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dp-fast), border-color var(--dp-fast), color var(--dp-fast);
}
.dp-tabs-list [role="tab"]:hover { border-color: var(--dp-purple-300); background: var(--dp-purple-50); }
.dp-tabs-list [role="tab"][aria-selected="true"] { background: var(--dp-purple); border-color: var(--dp-purple); color: #fff; }
.dp-tabs-list [role="tab"]:focus-visible { outline: 2px solid var(--dp-purple-400); outline-offset: 3px; }
.dp-tabs-panel { border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); background: #fff; padding: var(--dp-s6); }
.dp-tc-dest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: var(--dp-s6); align-items: start; }
.dp-tc-dest-col h3 { margin: 0 0 var(--dp-s3); font-size: var(--dp-t-xs); font-weight: 800; letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: var(--dp-ink-3); }
.dp-tc-vax { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dp-tc-vax a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s3);
  padding: 10px 14px; border-radius: var(--dp-r); background: var(--dp-green-50); border: 1px solid var(--dp-green-200);
  color: var(--dp-ink); font-weight: 600; font-size: var(--dp-t-sm); text-decoration: none;
}
.dp-tc-vax a span { display: inline-flex; align-items: center; gap: 8px; }
.dp-tc-vax a span svg { color: var(--dp-green-700); }
.dp-tc-vax a b { font-family: var(--dp-font-head); font-weight: 800; color: var(--dp-ink); white-space: nowrap; }
.dp-tc-vax a:hover { border-color: var(--dp-purple-300); background: var(--dp-purple-50); color: var(--dp-purple-700); text-decoration: none; }
.dp-tc-vax--soft a { background: var(--dp-surface-2); border-color: var(--dp-line); }
.dp-tc-vax--soft a span svg { color: var(--dp-ink-4); }
.dp-tc-dest-note { display: flex; flex-direction: column; gap: var(--dp-s3); padding: var(--dp-s5); border-radius: var(--dp-r-md); background: var(--dp-purple-50); border: 1px solid var(--dp-purple-100); }
.dp-tc-dest-note p { display: flex; gap: 8px; margin: 0; font-size: var(--dp-t-sm); color: var(--dp-ink-2); line-height: var(--dp-lh-base); }
.dp-tc-dest-note p svg { flex: 0 0 auto; margin-top: 3px; color: var(--dp-purple-600); }
.dp-tc-dest-note .dp-btn { margin-top: var(--dp-s2); }
.dp-tc-dest-foot { margin-top: var(--dp-s4); }

/* Timeline */
.dp-tc-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s4); counter-reset: none; }
.dp-tc-timeline li { position: relative; padding: var(--dp-s5) var(--dp-s5) var(--dp-s5) var(--dp-s6); background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-r-md); }
.dp-tc-timeline li::before { content: ''; position: absolute; left: 0; top: var(--dp-s5); bottom: var(--dp-s5); width: 4px; border-radius: 4px; background: var(--dp-green-500); }
.dp-tc-timeline li:nth-child(2)::before { background: var(--dp-purple-400); }
.dp-tc-timeline li:nth-child(3)::before { background: var(--dp-ink-4); }
.dp-tc-when { display: block; font-size: var(--dp-t-xs); font-weight: 800; letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: var(--dp-ink-3); }
.dp-tc-timeline strong { display: block; font-family: var(--dp-font-head); font-size: var(--dp-t-h4); margin: 4px 0 var(--dp-s2); }
.dp-tc-timeline p { margin: 0; font-size: var(--dp-t-sm); color: var(--dp-ink-3); line-height: var(--dp-lh-base); }

/* Callouts */
.dp-tc-callout { padding: var(--dp-s6); border-radius: var(--dp-r-lg); border: 1px solid var(--dp-line); }
.dp-tc-callout h3 { margin: var(--dp-s2) 0 var(--dp-s3); }
.dp-tc-callout p { color: var(--dp-ink-2); line-height: var(--dp-lh-loose); margin: 0 0 var(--dp-s4); }
.dp-tc-callout--yf { background: #fff9e6; border-color: #f2e2a8; }
.dp-tc-callout--yf .dp-eyebrow { color: #9a6b00; } .dp-tc-callout--yf .dp-eyebrow::before { background: #e0b400; }
.dp-tc-callout--malaria { background: var(--dp-green-50); border-color: var(--dp-green-200); }
.dp-tc-callout--malaria .dp-eyebrow { color: var(--dp-green-700); } .dp-tc-callout--malaria .dp-eyebrow::before { background: var(--dp-green-600); }

.dp-tc-prices .dp-subservices { margin-top: 0; }

@media (max-width: 1024px) {
  .dp-tc-dest-grid { grid-template-columns: 1fr 1fr; }
  .dp-tc-dest-note { grid-column: 1 / -1; }
  .dp-tc-timeline { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dp-tc-dest-grid { grid-template-columns: 1fr; gap: var(--dp-s5); }
  .dp-tabs-panel { padding: var(--dp-s4); }
  .dp-tabs-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--dp-gutter)); padding-inline: var(--dp-gutter); }
  .dp-tabs-list::-webkit-scrollbar { display: none; }
  .dp-tabs-list [role="tab"] { flex: 0 0 auto; white-space: nowrap; }
  .dp-tc-callouts { grid-template-columns: 1fr; }
}

/* =============================================================
   PRESCRIPTIONS — hub cards, NHS landing, app band
   ============================================================= */
.dp-rx-route-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dp-rx-route-points li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--dp-t-sm); color: var(--dp-ink-2); }
.dp-rx-route-points svg { flex: 0 0 auto; margin-top: 3px; color: var(--dp-green-600); }
.dp-rx-route-actions { display: flex; flex-wrap: wrap; gap: var(--dp-s3); margin-top: auto; padding-top: var(--dp-s3); }
.dp-rx-route .dp-rx-route-actions .dp-btn { margin-top: 0; }

.dp-rx-hero .dp-badge { margin-bottom: var(--dp-s3); }

/* Two ways to order */
.dp-rx-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-s5); }
.dp-rx-way {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--dp-s3);
  padding: var(--dp-s6); border-radius: var(--dp-r-lg); border: 1px solid var(--dp-line); background: #fff;
}
.dp-rx-way--online { background: var(--dp-nhs-bg); border-color: #cfe0f2; }
.dp-rx-way--app { background: var(--dp-surface-2); }
.dp-rx-way-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--dp-purple); border: 1px solid var(--dp-line); }
.dp-rx-way h3 { margin: 0; font-size: var(--dp-t-h3); }
.dp-rx-way > p { margin: 0; color: var(--dp-ink-2); line-height: var(--dp-lh-loose); }
.dp-rx-way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dp-rx-way li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--dp-t-sm); color: var(--dp-ink-2); }
.dp-rx-way li svg { flex: 0 0 auto; margin-top: 3px; color: var(--dp-green-600); }
.dp-rx-way .dp-btn { margin-top: auto; }
.dp-rx-way .dp-rx-order-todo { margin-top: auto; }

/* Nominate */
.dp-rx-nominate { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--dp-s8); align-items: start; }
.dp-rx-nominate h2 { margin: var(--dp-s2) 0 var(--dp-s3); }
.dp-rx-nominate > div > p { color: var(--dp-ink-2); line-height: var(--dp-lh-loose); margin: 0; }
.dp-rx-nominate-how { padding: var(--dp-s6); border-radius: var(--dp-r-lg); background: var(--dp-purple-50); border: 1px solid var(--dp-purple-100); }
.dp-rx-nominate-how h3 { margin: 0 0 var(--dp-s4); font-size: var(--dp-t-h4); }
.dp-rx-nominate-how ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--dp-s3); color: var(--dp-ink-2); line-height: var(--dp-lh-base); }
.dp-rx-nominate-how strong { color: var(--dp-ink); }

/* Urgent note */
.dp-rx-urgent-wrap { padding-top: 0; } /* continues the grey FAQ band; that band's bottom padding is the gap above the notice */
.dp-rx-urgent { display: flex; gap: var(--dp-s3); align-items: flex-start; padding: var(--dp-s4) var(--dp-s5); border-radius: var(--dp-r-md); background: var(--dp-danger-bg); border: 1px solid #f6d5d5; }
.dp-rx-urgent svg { flex: 0 0 auto; color: var(--dp-danger); margin-top: 2px; }
.dp-rx-urgent p { margin: 0; color: var(--dp-ink-2); line-height: var(--dp-lh-base); }

/* App band */
.dp-app-band {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: var(--dp-s8); align-items: center;
  padding: var(--dp-s8); border-radius: var(--dp-r-xl);
  background: linear-gradient(135deg, var(--dp-purple-900), var(--dp-purple-700)); color: rgba(255,255,255,.85);
}
.dp-app-band .dp-eyebrow { color: var(--dp-green-400); } .dp-app-band .dp-eyebrow::before { background: var(--dp-green-400); }
.dp-app-band h2 { color: #fff; margin: var(--dp-s2) 0 var(--dp-s3); }
.dp-app-band .dp-lead { color: rgba(255,255,255,.85); margin-bottom: var(--dp-s5); }
.dp-app-points { list-style: none; margin: 0 0 var(--dp-s6); padding: 0; display: grid; gap: var(--dp-s2); }
.dp-app-points li { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.dp-app-points svg { flex: 0 0 auto; margin-top: 4px; color: var(--dp-green-400); }
.dp-app-stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s4); }
.dp-app-badge img { display: block; height: 52px; width: auto; border-radius: 8px; }
.dp-app-badge:hover img { transform: translateY(-1px); }
.dp-app-qr { display: flex; align-items: center; gap: var(--dp-s3); padding: 6px; background: #fff; border-radius: var(--dp-r); color: var(--dp-ink-3); font-size: var(--dp-t-xs); }
.dp-app-qr-code { display: block; width: 72px; height: 72px; overflow: hidden; }
.dp-app-qr-code img, .dp-app-qr-code canvas { width: 72px !important; height: 72px !important; display: block; }
.dp-app-qr-code canvas + img { display: none; } /* qrcodejs draws a canvas and an img; one is enough */
.dp-app-qr span { max-width: 6em; line-height: 1.3; }
.dp-app-band .dp-fine { color: rgba(255,255,255,.6); margin: var(--dp-s4) 0 0; }
.dp-app-phone { margin: 0; text-align: center; }
.dp-app-phone img { max-width: 320px; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }

@media (max-width: 1024px) {
  .dp-rx-nominate { grid-template-columns: 1fr; gap: var(--dp-s6); }
  .dp-app-band { grid-template-columns: 1fr; padding: var(--dp-s6); }
  .dp-app-phone img { max-width: 240px; }
}
@media (max-width: 767px) {
  .dp-rx-ways { grid-template-columns: 1fr; gap: var(--dp-s4); }
  .dp-rx-way { padding: var(--dp-s5); }
  .dp-rx-route-actions .dp-btn { width: 100%; }
}

/* =============================================================
   HOMEPAGE REFRESH (18 Sep 2026)
   ============================================================= */

/* Hero: photo with the booking panel over its lower edge */
.dp-home-hero .dp-hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: clamp(52px, 6vw, 80px) clamp(80px, 8vw, 120px); }
.dp-home-hero-visual { position: relative; }
.dp-home-hero-photo { margin: 0 0 0 auto; width: 88%; }
.dp-home-hero-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: var(--dp-r-xl); box-shadow: 0 40px 60px -30px rgba(0,0,0,.6);
}
.has-photo .dp-hero-panel {
  position: absolute; left: 0; bottom: -36px; width: 62%; max-width: 380px;
  padding: var(--dp-s5);
}
.has-photo .dp-hero-panel h3 { font-size: var(--dp-t-h4); }
.has-photo .dp-hero-steps { margin-bottom: var(--dp-s4); }
.dp-hero-trust .dp-trust-item { white-space: nowrap; }

/* Intent tiles pulled up over the hero's bottom edge */
.dp-intent-band { position: relative; z-index: 2; margin-top: -40px; padding-bottom: var(--dp-s6); }
.dp-intent-band .dp-intent { background: #fff; box-shadow: var(--dp-shadow-md); border-color: transparent; }
.dp-intent-band .dp-intent:hover { box-shadow: var(--dp-shadow-lg); }

/* Service card with a photo */
.dp-service.has-photo { padding: 0; }
.dp-service-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dp-surface-3); }
.dp-service-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dp-mid) var(--dp-ease); }
.dp-service:hover .dp-service-media img { transform: scale(1.04); }
.dp-service-media-ico {
  position: absolute; left: var(--dp-s4); bottom: calc(-1 * var(--dp-s3)); z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: #fff; color: var(--dp-purple); border-radius: 10px; box-shadow: var(--dp-shadow);
}
.dp-service.has-photo .dp-service-body { display: flex; flex-direction: column; flex: 1; padding: var(--dp-s6) var(--dp-s5) var(--dp-s5); }
.dp-service.has-photo .dp-badge { position: absolute; top: var(--dp-s3); left: var(--dp-s3); z-index: 2; margin: 0; }
.dp-service.has-photo h3 { margin-top: var(--dp-s2); }
.dp-service.has-photo .dp-service-foot { margin-top: auto; }

/* Category scroller */
.dp-home-cats .dp-sechead-row { align-items: flex-end; margin-bottom: var(--dp-s5); }
.dp-home-cats .dp-sechead-row h2 { margin-bottom: var(--dp-s2); }
.dp-scroller-nav { display: flex; align-items: center; gap: var(--dp-s2); flex: 0 0 auto; }
.dp-scroller-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dp-line); background: #fff; color: var(--dp-ink);
  display: grid; place-items: center; cursor: pointer; transition: background var(--dp-fast), border-color var(--dp-fast), opacity var(--dp-fast);
}
.dp-scroller-btn:hover { background: var(--dp-purple-50); border-color: var(--dp-purple-300); color: var(--dp-purple-700); }
.dp-scroller-btn:disabled { opacity: .35; cursor: default; }
.dp-scroller-nav .dp-btn { margin-left: var(--dp-s2); }
.dp-scroller { overflow: hidden; }
.dp-scroller-track {
  display: flex; gap: var(--dp-s4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--dp-s2);
  /* the last tile can scroll to the container edge, not stop short of it */
  margin-inline: calc(-1 * var(--dp-gutter)); padding-inline: var(--dp-gutter); scroll-padding-inline: var(--dp-gutter);
}
.dp-scroller-track::-webkit-scrollbar { display: none; }
.dp-scroller-track > .dp-tile { flex: 0 0 218px; scroll-snap-align: start; } /* not .dp-tiles: that class is a grid and would beat the flex row */
.dp-tiles--compact .dp-tile-media { aspect-ratio: 1 / 1; }
.dp-tiles--compact .dp-tile-desc { display: none; }
.dp-tiles--compact .dp-tile-body { padding: var(--dp-s3) var(--dp-s4) var(--dp-s4); }
.dp-tiles--compact .dp-tile-body strong { font-size: var(--dp-t-sm); }
.dp-tiles--compact .dp-tile-cta { display: none; }

/* Offers: four tiles, the shop's own */
.dp-home-offers .woocommerce ul.products, .dp-home-offers ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dp-home-offers .dp-sechead-row { margin-bottom: var(--dp-s5); }

@media (max-width: 1024px) {
  .dp-home-hero .dp-hero-grid { grid-template-columns: 1fr; padding-bottom: var(--dp-s7); }
  .dp-home-hero-photo { width: 100%; }
  .has-photo .dp-hero-panel { position: static; width: auto; max-width: none; margin-top: var(--dp-s4); }
  .dp-intent-band { margin-top: 0; padding-top: var(--dp-s6); }
  .dp-home-offers .woocommerce ul.products, .dp-home-offers ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-scroller-track > .dp-tile { flex-basis: 180px; }
}
@media (max-width: 640px) {
  .dp-home-cats .dp-sechead-row { flex-direction: column; align-items: flex-start; gap: var(--dp-s3); }
  .dp-scroller-btn { display: none; }
  .dp-scroller-track > .dp-tile { flex-basis: 150px; }
  .dp-home-hero-photo img { aspect-ratio: 4 / 3; }
}

/* ---- The homepage on a phone (≤767px) ----
   Checked at 375px on 18 Sep 2026. The desktop layout stacked into one
   column was a screen and a half of hero, three "Book an appointment"
   buttons before any content, six full-height service cards in a row,
   and a QR code on the one device that cannot scan it. */
@media (max-width: 767px) {
  /* Hero: copy, two full-width buttons, the trust line as a short list,
     then the photo. The booking panel repeats the hero button and the
     first intent tile, so on a phone it goes. */
  .dp-home-hero.has-photo .dp-hero-panel { display: none; }
  .dp-home-hero .dp-hero-grid { gap: var(--dp-s6); padding-block: var(--dp-s7) var(--dp-s8); }
  .dp-home-hero .dp-hero-cta { margin-bottom: var(--dp-s5); }
  .dp-hero-cta .dp-btn { width: 100%; } /* every purple hero, not just the homepage: full-width buttons on a phone (Will, 21 Sep) */
  .dp-home-hero .dp-hero-trust { display: grid; gap: var(--dp-s2); padding-top: var(--dp-s4); }
  .dp-home-hero-photo img { aspect-ratio: 16 / 10; border-radius: var(--dp-r-lg); box-shadow: 0 20px 30px -20px rgba(0,0,0,.6); }

  /* Intent tiles: two by two, pulled over the hero's edge like on desktop */
  .dp-intent-band { margin-top: -28px; padding-top: 0; }
  .dp-intent-band .dp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s3); }
  .dp-intent-band .dp-intent { flex-direction: column; align-items: flex-start; gap: var(--dp-s3); padding: var(--dp-s4); }
  .dp-intent-band .dp-intent-ico { width: 40px; height: 40px; }
  .dp-intent-band .dp-intent strong { font-size: var(--dp-t-sm); }
  .dp-intent-band .dp-intent span { font-size: var(--dp-t-xs); }

  /* Services: one row you swipe through, the next card peeking in, rather
     than six photo cards stacked three screens deep */
  .dp-home-services .dp-sechead-row { margin-bottom: var(--dp-s4); }
  .dp-home-services .dp-g3 {
    display: flex; gap: var(--dp-s3);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--dp-gutter)); padding: 0 var(--dp-gutter) var(--dp-s3); scroll-padding-inline: var(--dp-gutter);
  }
  .dp-home-services .dp-g3::-webkit-scrollbar { display: none; }
  .dp-home-services .dp-service { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
  .dp-home-services .dp-service p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* App band: the phone up top as the hook, shown whole on the gradient
     (no tinted box, no crop — Will, 21 Sep 2026), the two store badges
     side by side, and no QR code — you cannot scan your own screen */
  .dp-app-band { display: flex; flex-direction: column; gap: 0; padding: var(--dp-s5); border-radius: var(--dp-r-lg); overflow: hidden; }
  .dp-app-phone { order: -1; margin: 0 0 var(--dp-s5); } /* 24px above and below the phone */
  .dp-app-phone img { max-width: 200px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
  .dp-app-qr { display: none; }
  .dp-app-stores { gap: var(--dp-s3); }
  .dp-app-badge img { height: 40px; } /* two abreast inside a 303px band */
  .dp-app-points li { font-size: var(--dp-t-sm); }
  .dp-app-band .dp-fine { font-size: var(--dp-t-xs); }

  /* About: the four stats two by two, not one long column */
  .dp-grid.dp-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-about-stats .dp-stat { padding: var(--dp-s4); }
}

/* ---- Sticky header on a phone ----
   The header plus the search row is a fifth of the screen. Once you scroll
   down the search row folds away; scrolling up brings it back
   (assets/js/header.js adds .is-compact). */
@media (max-width: 767px) {
  /* The header's HEIGHT never changes. Collapsing the row made the sticky
     header shorter, the browser re-anchored the scroll position, the
     scroll event read as "scrolling up", the row came back, and so on —
     a visible flicker at some scroll positions. Instead the row fades out
     in place and the white background stops at the brand row, so the page
     scrolls past underneath the now-empty band. */
  .dp-header { --dp-hdr-top: 68px; } /* brand row height; header.js measures it */
  .dp-header.is-compact { background: transparent; box-shadow: none; pointer-events: none; }
  .dp-header.is-compact::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
    height: var(--dp-hdr-top); background: #fff; box-shadow: 0 1px 0 var(--dp-line);
  }
  .dp-header.is-compact .dp-header-main .dp-wrap > :not(.dp-search) { pointer-events: auto; }
  .dp-search { transition: opacity .18s ease, visibility .18s; }
  .dp-header.is-compact .dp-search { opacity: 0; visibility: hidden; }
}

/* ---- Prescriptions hub (18 Sep 2026) ----
   The purple hero used to run straight into the purple app band. The two
   route cards now sit over the hero's lower edge, the way the intent tiles
   do on the homepage, so the hero is followed by white cards; the intro
   and the app band come after. */
.dp-rx-hub-hero .dp-hero-compact-grid { padding-bottom: calc(clamp(40px, 5vw, 72px) + 64px); }
.dp-rx-routes-band { position: relative; z-index: 2; margin-top: -64px; }
.dp-rx-routes-band .dp-rx-route { background: #fff; border-color: transparent; box-shadow: var(--dp-shadow-md); }
.dp-rx-routes-band .dp-rx-route.is-nhs { background: #fff; border-top: 4px solid var(--dp-nhs); }
.dp-rx-routes-band .dp-rx-route.is-private { border-top: 4px solid var(--dp-green-500); }
.dp-rx-intro { max-width: 68ch; margin: var(--dp-s7) 0 0; }
.dp-rx-intro + .dp-app { padding-top: var(--dp-s7); }
@media (max-width: 767px) {
  .dp-rx-hub-hero .dp-hero-compact-grid { padding-bottom: calc(clamp(40px, 5vw, 72px) + 40px); }
  .dp-rx-routes-band { margin-top: -40px; }
  .dp-rx-intro { margin-top: var(--dp-s6); }
}

/* =============================================================
   ABOUT PAGE (21 Sep 2026)
   ============================================================= */
.dp-about-hero .dp-hero-trust { margin-top: var(--dp-s5); }
.dp-about-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: var(--dp-s8); align-items: start; }
.dp-about-layout--single { grid-template-columns: minmax(0, 880px); justify-content: center; text-align: center; }
.dp-about-layout--single .dp-about-story { max-width: none; } /* .dp-prose caps itself narrower */ /* facts panel dropped 21 Sep; story centred on desktop */
@media (max-width: 767px) { .dp-about-layout--single { text-align: left; } }
.dp-about-story > p:first-child { font-size: var(--dp-t-lg); color: var(--dp-ink-2); line-height: var(--dp-lh-loose); }
.dp-about-panel { position: sticky; top: calc(var(--dp-header-h) + var(--dp-s5)); background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); padding: var(--dp-s6); }
.dp-about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s3); margin-bottom: var(--dp-s5); }
.dp-about-stat { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-r-md); padding: var(--dp-s4) var(--dp-s3); text-align: center; }
.dp-about-stat strong { display: block; font-family: var(--dp-font-head); font-size: var(--dp-t-h3); font-weight: 800; color: var(--dp-purple); line-height: 1; }
.dp-about-stat span { display: block; margin-top: 6px; font-size: var(--dp-t-xs); color: var(--dp-ink-3); line-height: 1.3; }
.dp-about-facts { margin: 0 0 var(--dp-s5); padding: 0; display: grid; gap: var(--dp-s3); }
.dp-about-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--dp-s3); padding-bottom: var(--dp-s3); border-bottom: 1px solid var(--dp-line); }
.dp-about-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dp-about-facts dt { font-size: var(--dp-t-xs); font-weight: 700; letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: var(--dp-ink-3); padding-top: 3px; }
.dp-about-facts dd { margin: 0; font-size: var(--dp-t-sm); color: var(--dp-ink); }
.dp-about-how .dp-card { padding: var(--dp-s6); }
.dp-about-how-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--dp-r-sm); background: var(--dp-green-100); color: var(--dp-green-700); margin-bottom: var(--dp-s4); }
.dp-about-how h3 { font-size: var(--dp-t-h4); margin-bottom: var(--dp-s2); }
.dp-about-how p { margin: 0; color: var(--dp-ink-2); }

/* Shopfront photo in the hero (moved from beside the story, 21 Sep) */
.dp-about-hero-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1024px) { .dp-about-hero-figure { max-width: 520px; } }

/* Team */
.dp-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dp-s5); }
.dp-team-card { display: flex; flex-direction: column; gap: var(--dp-s3); }
.dp-team-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--dp-r-lg); background: var(--dp-purple-50); }
.dp-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dp-mid) var(--dp-ease); }
.dp-team-card:hover .dp-team-photo img { transform: scale(1.03); }
.dp-team-initials { display: grid; place-items: center; height: 100%; font-family: var(--dp-font-head); font-size: var(--dp-t-h1); font-weight: 800; color: var(--dp-purple-300); }
.dp-team-body strong { display: block; font-family: var(--dp-font-head); font-size: var(--dp-t-base); color: var(--dp-ink); }
.dp-team-body > span { display: block; font-size: var(--dp-t-sm); color: var(--dp-ink-3); margin-top: 2px; }
.dp-team-body small { display: inline-block; margin-top: 6px; font-size: var(--dp-t-xs); font-weight: 700; color: var(--dp-purple-700); background: var(--dp-purple-50); border-radius: var(--dp-r-pill); padding: 2px 9px; }

/* Registrations on the deep band */
.dp-about-regs-band .dp-eyebrow { color: var(--dp-green-400); } .dp-about-regs-band .dp-eyebrow::before { background: var(--dp-green-400); }
.dp-about-regs-band h2 { color: #fff; }
.dp-about-regs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dp-s4); }
.dp-about-reg {
  display: flex; flex-direction: column; min-height: 100%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--dp-r-md); padding: var(--dp-s5);
  color: inherit; transition: background var(--dp-fast), border-color var(--dp-fast), transform var(--dp-fast);
}
a.dp-about-reg:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); text-decoration: none; transform: translateY(-2px); }
.dp-about-reg span { display: block; font-size: var(--dp-t-xs); letter-spacing: var(--dp-ls-wide); text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--dp-s3); }
.dp-about-reg strong { display: block; font-family: var(--dp-font-head); font-size: var(--dp-t-h4); font-weight: 700; color: #fff; line-height: 1.25; }
.dp-about-reg em { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--dp-s3); font-style: normal; font-size: var(--dp-t-sm); color: rgba(255,255,255,.7); }
a.dp-about-reg em { color: var(--dp-green-400); }
.dp-about-reg em svg { transition: transform var(--dp-fast); }
a.dp-about-reg:hover em svg { transform: translateX(3px); }
@media (max-width: 1024px) { .dp-about-regs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dp-about-regs { grid-template-columns: 1fr; } }

/* CTA */
.dp-about-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s6); flex-wrap: wrap; padding-block: var(--dp-s6); border-top: 1px solid var(--dp-line); }
.dp-about-cta h2 { margin-bottom: var(--dp-s2); }
.dp-about-cta p { margin: 0; }
.dp-about-cta-actions { display: flex; gap: var(--dp-s3); flex-wrap: wrap; }

@media (max-width: 1024px) {
  .dp-about-layout { grid-template-columns: 1fr; gap: var(--dp-s6); }
  .dp-about-panel { position: static; }
  .dp-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dp-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-s4); }
  .dp-about-stats { gap: var(--dp-s2); }
  .dp-about-facts > div { grid-template-columns: 1fr; gap: 2px; } /* label above value: "Superintendent" does not fit a column */
  .dp-about-cta > div, .dp-about-cta-actions { flex: 1 1 100%; width: 100%; }
  .dp-about-cta-actions .dp-btn { width: 100%; }
  .dp-about-hero .dp-hero-trust { display: grid; gap: var(--dp-s2); }
}

/* =============================================================
   HEALTH A-Z (21 Sep 2026)
   ============================================================= */
.dp-az-intro { max-width: 68ch; margin-bottom: var(--dp-s6); }
.dp-az-embed iframe { width: 100%; min-height: 720px; border: 0; border-radius: var(--dp-r-lg); background: #fff; }
.dp-az-index { background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: var(--dp-r-lg); padding: var(--dp-s6); }
.dp-az-head h2 { margin-bottom: var(--dp-s2); }
.dp-az-head p { margin: 0 0 var(--dp-s5); }
.dp-az-letters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: var(--dp-s2); }
.dp-az-letters a {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--dp-r-md);
  background: #fff; border: 1px solid var(--dp-line); font-family: var(--dp-font-head); font-weight: 800; font-size: var(--dp-t-h4); color: var(--dp-purple);
  transition: background var(--dp-fast), border-color var(--dp-fast), color var(--dp-fast), transform var(--dp-fast);
}
.dp-az-letters a:hover { background: var(--dp-purple); border-color: var(--dp-purple); color: #fff; text-decoration: none; transform: translateY(-2px); }
.dp-az-index .dp-fine { margin: var(--dp-s4) 0 0; color: var(--dp-ink-4); }
.dp-az-help { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s6); flex-wrap: wrap; margin-top: var(--dp-s7); padding-top: var(--dp-s6); border-top: 1px solid var(--dp-line); }
.dp-az-help h2 { font-size: var(--dp-t-h3); margin-bottom: var(--dp-s2); }
.dp-az-help p { margin: 0; max-width: 56ch; }
.dp-az-help-actions { display: flex; gap: var(--dp-s3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .dp-az-letters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dp-az-index { padding: var(--dp-s4); }
  .dp-az-help > div, .dp-az-help-actions { flex: 1 1 100%; width: 100%; } /* the actions box was shrink-wrapping inside the flex row */
  .dp-az-help-actions .dp-btn { width: 100%; }
}

/* Service pages: the section padding left ~80px of white between the hero
   and the "you will not need to come in" notice (Will, 21 Sep). */
.single-dp_service .dp-wrap.dp-section:first-of-type { padding-top: var(--dp-s6); }