/*
 * Apothecary: an old pharmacy's labels and the engraved plates of a herbal. The frame (header, phone menu, footer,
 * announcement, breadcrumbs, the page not found), the blocks the theme draws itself (the split opening, the full-width
 * opening and its video twin, the article body, the divider), and how the stock blocks the Theme Kit draws are composed
 * here (section ornaments, numbered cards, plates). Everything the kit draws inside a block is in kit-theme.css.
 *
 * The look, in four parts:
 * - The label: paper under a square ruled frame with a finer rule just inside it whose corners are cut across, the
 *   inner frame of a printed pharmacy label. Cards, the openings' words, the footer's name plate, the invitation and the
 *   page not found are labels. Buttons are small labels with their corners cut.
 * - The plate: a picture inside two rules with paper between, like an engraving's plate mark.
 * - The ornament: a diamond between two rules under every section heading of the stock blocks, a crest of two leaves at
 *   the head of an opening's label. Drawn as masks in the accent's readable shade (data pictures, allowed here and
 *   never in kit-theme.css).
 * - Numbered remedies: the cards of a list of services or pages are numbered, a question is numbered in small roman
 *   figures, the phone menu's pages likewise. Small labels are spaced capitals.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --apothecary-heading-weight and --apothecary-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. Italic is asked for
 * only under html.apothecary-italic, which the layout writes when the font palette loads the heading face's italic.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --apothecary-width: 74rem;
  --apothecary-gutter: clamp(1rem, 4.5vw, 2.5rem);
  --apothecary-bar: 4.5rem;
  --apothecary-radius: 0px;
  --apothecary-button-radius: 0px;
  /* The corner cut of a label's inner rule, and of a button (kit-theme.css repeats both for the kit's parts). */
  --apothecary-cut: 14px;
  --apothecary-button-cut: 6px;
  /* A rule of 1 px round a box with its corners cut: one gradient for each edge and each corner's diagonal, used as a
     mask, so the line is the same in every browser; a dot stands in each corner outside the cut. */
  --apothecary-frame:
    linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--apothecary-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(100% - 2 * var(--apothecary-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 0 50% / 1px calc(100% - 2 * var(--apothecary-cut)) no-repeat,
    linear-gradient(#000 0 0) 100% 50% / 1px calc(100% - 2 * var(--apothecary-cut)) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 0 / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 0 / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 100% / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 100% / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    radial-gradient(circle at 4px 4px, #000 1.6px, transparent 2.2px) 0 0 / 9px 9px no-repeat,
    radial-gradient(circle at 5px 4px, #000 1.6px, transparent 2.2px) 100% 0 / 9px 9px no-repeat,
    radial-gradient(circle at 4px 5px, #000 1.6px, transparent 2.2px) 0 100% / 9px 9px no-repeat,
    radial-gradient(circle at 5px 5px, #000 1.6px, transparent 2.2px) 100% 100% / 9px 9px no-repeat;
  --apothecary-button-frame:
    linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--apothecary-button-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(100% - 2 * var(--apothecary-button-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 0 50% / 1px calc(100% - 2 * var(--apothecary-button-cut)) no-repeat,
    linear-gradient(#000 0 0) 100% 50% / 1px calc(100% - 2 * var(--apothecary-button-cut)) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 0 / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 0 / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 100% / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 100% / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat;
  /* An octagon: a box with its four corners cut. */
  --apothecary-button-shape: polygon(var(--apothecary-button-cut) 0, calc(100% - var(--apothecary-button-cut)) 0, 100% var(--apothecary-button-cut), 100% calc(100% - var(--apothecary-button-cut)), calc(100% - var(--apothecary-button-cut)) 100%, var(--apothecary-button-cut) 100%, 0 calc(100% - var(--apothecary-button-cut)), 0 var(--apothecary-button-cut));
  --apothecary-heading-weight: 600;
  --apothecary-body-strong: 600;
  --apothecary-speed: 180ms;
  --apothecary-line: var(--border, #dacdb6);
  /* The label's rules, from the words' colour: the outer one firmer, the inner one finer. */
  --apothecary-rule: color-mix(in srgb, var(--text-primary, #2a1d14) 44%, transparent);
  --apothecary-rule-fine: color-mix(in srgb, var(--text-primary, #2a1d14) 24%, transparent);
  /* A diamond between two rules, with a dot either side. */
  --apothecary-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'%3E%3Cpath d='M0 7h55M85 7h55' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M70 1.5 75.5 7 70 12.5 64.5 7z'/%3E%3Ccircle cx='59.5' cy='7' r='1.7'/%3E%3Ccircle cx='80.5' cy='7' r='1.7'/%3E%3C/svg%3E");
  /* A sprig of three leaves either side of a diamond, for the head of a label. */
  --apothecary-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M0 12h18M102 12h18M26 12h29M65 12h29' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M52 12Q48 5 40 4.5Q44 11.5 52 12zM46 12Q38 12.5 34 19.5Q42 19 46 12zM39 12Q35.5 6.4 29 6Q32.5 11.6 39 12zM68 12Q76 11.5 80 4.5Q72 5 68 12zM74 12Q78 19 86 19.5Q82 12.5 74 12zM81 12Q87.5 11.6 91 6Q84.5 6.4 81 12z'/%3E%3Cpath d='M60 6.5 65.5 12 60 17.5 54.5 12z'/%3E%3Ccircle cx='22' cy='12' r='1.5'/%3E%3Ccircle cx='98' cy='12' r='1.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--apothecary-head, var(--apothecary-bar)) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f4eee2);
  color: var(--text-primary, #2a1d14);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #45603f);
  outline-offset: 3px;
}

.apothecary-main {
  display: block;
  min-height: 40vh;
}

.apothecary-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--apothecary-button-radius);
  background: var(--primary, #5a3218);
  color: var(--on-primary, #f7f0e2);
  font-weight: var(--apothecary-body-strong);
  text-decoration: none;
}

.apothecary-skip-link:focus {
  top: 1rem;
}

.apothecary-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Small spaced capitals: menus, labels, the footer's titles. */
.apothecary-caps {
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: a small label with its corners cut, in spaced capitals, with a
   fine rule just inside its edge. kit-theme.css gives the kit's buttons the same shape and case, and the line of this
   theme in resilience.css (--chrome-button-clip, --chrome-button-case) gives them to the cookie notice and the phone
   action bar: theme-chrome.test.mjs holds the three together. A label may take two lines; it never runs out of the
   button. The cut hides an outline drawn outside, so focus is drawn inside, in the button's own words' colour. */
.apothecary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--apothecary-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: break-word;
  position: relative;
  clip-path: var(--apothecary-button-shape);
  transition: background-color var(--apothecary-speed) ease, border-color var(--apothecary-speed) ease, box-shadow var(--apothecary-speed) ease;
}

.apothecary-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -7px;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.apothecary-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.apothecary-button--primary {
  background: var(--primary, #5a3218);
  box-shadow: inset 0 0 0 4px var(--primary, #5a3218), inset 0 0 0 5px color-mix(in srgb, var(--on-primary, #f7f0e2) 45%, transparent);
  color: var(--on-primary, #f7f0e2);
}

.apothecary-button--primary:hover {
  background: var(--primary-alt, #6c3f21);
  box-shadow: inset 0 0 0 4px var(--primary-alt, #6c3f21), inset 0 0 0 5px color-mix(in srgb, var(--on-primary, #f7f0e2) 70%, transparent);
}

.apothecary-button--accent {
  background: var(--accent, #4c6845);
  box-shadow: inset 0 0 0 4px var(--accent, #4c6845), inset 0 0 0 5px color-mix(in srgb, var(--on-accent, #f8f4ea) 45%, transparent);
  color: var(--on-accent, #f8f4ea);
}

/* The hover brings the inner rule up to the words' full colour, not a lighter fill: a lighter fill would bring the
   words' contrast under what the colour contract promises for this pair. */
.apothecary-button--accent:hover {
  box-shadow: inset 0 0 0 4px var(--accent, #4c6845), inset 0 0 0 5px var(--on-accent, #f8f4ea);
}

/* The outline button: its edge is the cut frame, drawn as a mask; a finer rule stands inside it. */
.apothecary-button--secondary {
  background: transparent;
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--apothecary-rule-fine);
  color: var(--text-primary, #2a1d14);
}

.apothecary-button--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apothecary-rule);
  -webkit-mask: var(--apothecary-button-frame);
  mask: var(--apothecary-button-frame);
  pointer-events: none;
}

.apothecary-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #2a1d14) 6%, transparent);
}

.apothecary-button--secondary:hover::before {
  background: var(--text-primary, #2a1d14);
}

.apothecary-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.75rem;
}

.apothecary-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ The label, the plate, the ornaments */

/* A label: paper under a square ruled frame and a finer rule four pixels inside it with its corners cut across. Used by
   the openings, the footer's name plate, the invitation and the page not found; kit-theme.css draws the kit's cards
   the same way. */
.apothecary-label {
  position: relative;
  border: 1px solid var(--apothecary-rule);
  border-radius: var(--apothecary-radius);
  background: var(--surface, #fbf8f1);
  color: var(--text-primary, #2a1d14);
}

.apothecary-label::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--apothecary-rule-fine);
  -webkit-mask: var(--apothecary-frame);
  mask: var(--apothecary-frame);
  pointer-events: none;
}

/* The crest of two leaves at the head of a label. */
.apothecary-crest {
  display: block;
  width: 8.75rem;
  height: 1.6rem;
  background-color: var(--accent-ink, #45603f);
  -webkit-mask: var(--apothecary-crest) center / contain no-repeat;
  mask: var(--apothecary-crest) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Announcement */

.apothecary-announcement {
  background: var(--primary, #5a3218);
  color: var(--on-primary, #f7f0e2);
  font-size: 0.875rem;
}

.apothecary-announcement[hidden] {
  display: none;
}

.apothecary-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--apothecary-gutter);
  text-align: center;
}

.apothecary-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.apothecary-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.apothecary-announcement a {
  font-weight: var(--apothecary-body-strong);
  text-underline-offset: 0.25em;
}

.apothecary-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.apothecary-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* A bar of the page's paper that stays at the top, closed by a double rule like the head of a printed label. The bar
   has one height for every kind; the centred kind adds a row for the menu. */
.apothecary-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 4px double var(--apothecary-rule);
  background: var(--background, #f4eee2);
  color: var(--text-primary, #2a1d14);
}

.apothecary-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--apothecary-bar);
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--apothecary-gutter);
}

.apothecary-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them;
   the phone number in the left one. */
.apothecary-header--centered .apothecary-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  min-height: calc(var(--apothecary-bar) + 0.75rem);
}

.apothecary-header--centered .apothecary-header__lead {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}

.apothecary-header--centered .apothecary-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.apothecary-header--centered .apothecary-header__actions {
  grid-column: 3;
  justify-self: end;
}

.apothecary-header--centered .apothecary-brand {
  flex-direction: column;
  gap: 0.35rem;
}

.apothecary-header--centered .apothecary-brand__name {
  font-size: 1.75rem;
  text-align: center;
}

/* The menu's own row under the centred name, between a fine rule and the header's double one. */
.apothecary-header__rail {
  border-top: 1px solid var(--apothecary-line);
}

.apothecary-header__rail-inner {
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: 0.2rem var(--apothecary-gutter);
}

.apothecary-header__rail .apothecary-nav {
  justify-content: center;
}

.apothecary-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.apothecary-header__phone {
  color: inherit;
  font-size: 0.875rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.apothecary-header__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.apothecary-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name. Its line height and the small padding leave room for what letters carry above and below (the
   caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.apothecary-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.apothecary-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.5rem;
  font-weight: var(--apothecary-heading-weight);
  letter-spacing: 0.005em;
  line-height: 1.25;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.apothecary-header .apothecary-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .apothecary-header .apothecary-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.3125rem;
  }

  .apothecary-header--centered .apothecary-brand__name {
    font-size: 1.3125rem;
  }
}

.apothecary-brand:has(.apothecary-brand__logo, .brand-logo-original, .logo-mask) .apothecary-brand__name {
  font-size: 1.25rem;
}

.apothecary-header .apothecary-brand__logo,
.apothecary-header .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.apothecary-header .logo-mask {
  background-color: var(--text-primary, #2a1d14) !important;
}

/* ------------------------------------------------------------------ Topbar */

/* A slim line in the bottle's colour above the bar: the phone, the email and the social links in spaced capitals. */
.apothecary-topbar {
  background: var(--primary, #5a3218);
  color: var(--on-primary, #f7f0e2);
}

.apothecary-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--apothecary-gutter);
}

.apothecary-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.1em;
}

.apothecary-topbar a {
  color: inherit;
  text-decoration: none;
}

.apothecary-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.apothecary-topbar__social,
.apothecary-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.apothecary-topbar__social svg,
.apothecary-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .apothecary-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

.apothecary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  min-width: 0;
}

.apothecary-header--simple .apothecary-nav,
.apothecary-header--topbar .apothecary-nav {
  margin-left: auto;
}

.apothecary-nav__item {
  position: relative;
}

/* Page names in small spaced capitals, like the headings of a price card. */
.apothecary-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  color: inherit;
  font-size: 0.78125rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.apothecary-nav__item {
  min-width: 0;
}

.apothecary-nav__item > a:hover,
.apothecary-nav__item--parent:focus-within > a {
  color: var(--accent-ink, #45603f);
}

/* The page being shown: a double rule under its name. */
.apothecary-nav__item.is-current > a > span {
  text-decoration: underline double;
  text-decoration-color: var(--accent-ink, #45603f);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}

.apothecary-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.apothecary-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem;
  border: 1px solid var(--apothecary-rule);
  border-radius: var(--apothecary-radius);
  background: var(--surface, #fbf8f1);
  color: var(--text-primary, #2a1d14);
  box-shadow: inset 0 0 0 3px var(--surface, #fbf8f1), inset 0 0 0 4px var(--apothecary-rule-fine), 0 14px 32px -18px color-mix(in srgb, var(--text-primary, #2a1d14) 40%, transparent);
  visibility: hidden;
  opacity: 0;
}

.apothecary-nav__item--parent:is(:hover, :focus-within) > .apothecary-nav__children {
  visibility: visible;
  opacity: 1;
}

.apothecary-nav__children a {
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  text-decoration: none;
}

.apothecary-nav__children a:hover {
  background: var(--surface-alt, #ebe2d0);
  color: var(--text-primary, #2a1d14);
}

/* The menu button: three lines that turn into a cross, in a small label. Hidden on a wide screen unless resilience.js
   folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.apothecary-menu-button {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--apothecary-rule-fine);
  clip-path: var(--apothecary-button-shape);
  color: inherit;
  cursor: pointer;
}

.apothecary-menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apothecary-rule);
  -webkit-mask: var(--apothecary-button-frame);
  mask: var(--apothecary-button-frame);
  pointer-events: none;
}

.apothecary-menu-button:hover::before {
  background: currentColor;
}

.apothecary-menu-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -7px;
}

.apothecary-menu-button__lines {
  display: grid;
  gap: 0.28rem;
  width: 1.05rem;
}

.apothecary-menu-button__lines i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--apothecary-speed) ease, opacity var(--apothecary-speed) ease;
}

.apothecary-menu-button[aria-expanded="true"] .apothecary-menu-button__lines i:nth-child(1) {
  transform: translateY(0.37rem) rotate(45deg);
}

.apothecary-menu-button[aria-expanded="true"] .apothecary-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

.apothecary-menu-button[aria-expanded="true"] .apothecary-menu-button__lines i:nth-child(3) {
  transform: translateY(-0.37rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A panel of paper under the bar with every page, numbered in small roman figures like the plates of a herbal. It
   scrolls inside itself when the pages are many, so the last one is always reachable. */
.apothecary-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--apothecary-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--apothecary-head, var(--apothecary-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 4px;
  border-bottom: 4px double var(--apothecary-rule);
  background: var(--background, #f4eee2);
  color: var(--text-primary, #2a1d14);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #2a1d14) 45%, transparent);
}

.apothecary-drawer[hidden] {
  display: none;
}

.apothecary-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem var(--apothecary-gutter) 1.75rem;
}

.apothecary-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.apothecary-drawer__nav {
  counter-reset: apothecary-drawer;
}

.apothecary-drawer__item {
  border-bottom: 1px solid var(--apothecary-line);
  counter-increment: apothecary-drawer;
}

/* A page name in the heading face, after its number. data-fit-text (includes/chrome.php) lets the shared script set a
   long single word smaller instead of breaking it. */
.apothecary-drawer__row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.apothecary-drawer__row::before {
  content: counter(apothecary-drawer, lower-roman) ".";
  flex: none;
  min-width: 2.1rem;
  color: var(--accent-ink, #45603f);
  font-family: var(--font-heading, serif);
  font-size: 0.9375rem;
  font-synthesis: none;
}

html.apothecary-italic .apothecary-drawer__row::before {
  font-style: italic;
}

.apothecary-drawer__link {
  display: block;
  min-width: 0;
  padding: 0.8rem 0;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.apothecary-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 2.95rem;
}

.apothecary-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #5f4e40);
  text-decoration: none;
}

.apothecary-drawer__footer {
  display: grid;
  gap: 0.6rem;
}

.apothecary-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #5f4e40);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .apothecary-nav,
  .apothecary-header__rail,
  .apothecary-header__phone,
  .apothecary-header__lead,
  .apothecary-header__cta,
  .apothecary-header__slot {
    display: none;
  }

  .apothecary-menu-button {
    display: inline-flex;
  }

  .apothecary-header--centered .apothecary-header__inner {
    display: flex;
    min-height: var(--apothecary-bar);
  }

  .apothecary-header--centered .apothecary-brand {
    flex-direction: row;
  }

  .apothecary-header--centered .apothecary-header__brand {
    text-align: start;
  }

  .apothecary-header--centered .apothecary-brand__name {
    font-size: 1.375rem;
    text-align: start;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .apothecary-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .apothecary-header--simple .apothecary-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

.apothecary-breadcrumbs {
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--apothecary-gutter) 0;
}

.apothecary-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.65rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #5f4e40);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.12em;
  list-style: none;
  text-transform: uppercase;
}

.apothecary-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* A small diamond between the steps. */
.apothecary-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--accent-ink, #45603f);
  transform: rotate(45deg);
}

.apothecary-breadcrumbs a {
  text-decoration: none;
}

.apothecary-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.apothecary-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #2a1d14);
}

/* ------------------------------------------------------------------ The split opening (hero_image_split) */

/* A label with the page's heading beside a picture mounted as a plate. Without a picture the label stands alone in the
   middle of the parchment. */
.apothecary-hero {
  padding: clamp(2rem, 5vw, 4.5rem) var(--apothecary-gutter) clamp(2.75rem, 6vw, 5rem);
}

.apothecary-hero--words {
  background: var(--surface-alt, #ebe2d0);
}

.apothecary-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--apothecary-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .apothecary-hero:not(.apothecary-hero--words) .apothecary-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.apothecary-hero__label {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  min-width: 0;
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.25rem);
  text-align: center;
}

.apothecary-hero--words .apothecary-hero__label {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it (the label's padding included). */
.apothecary-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

.apothecary-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5f4e40);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  font-synthesis: none;
  line-height: 1.45;
}

html.apothecary-italic .apothecary-hero__lead {
  font-style: italic;
}

/* The selling points: a small list in the middle of the label, its lines at the left. */
.apothecary-hero__points {
  display: grid;
  gap: 0.45rem;
  max-width: 30rem;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--apothecary-line);
  list-style: none;
  text-align: left;
}

.apothecary-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.apothecary-hero__icon {
  margin-top: 0.22em;
  color: var(--accent-ink, #45603f);
}

.apothecary-hero__actions,
.apothecary-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 0.9rem;
}

.apothecary-hero__actions {
  margin-top: 0.4rem;
}

.apothecary-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #5f4e40);
  font-size: 0.9375rem;
}

.apothecary-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.apothecary-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #2a1d14) 20%, transparent);
}

.apothecary-stars svg.is-full {
  fill: var(--accent-ink, #45603f);
}

.apothecary-hero__trustpilot {
  color: var(--accent-ink, #45603f);
  font-weight: var(--apothecary-body-strong);
}

/* The plate: the picture inside a fine rule with a margin of paper, the whole inside a firmer rule, like the impressed
   edge of an engraved plate. */
.apothecary-plate {
  margin: 0;
  padding: clamp(0.65rem, 1.4vw, 0.9rem);
  border: 1px solid var(--apothecary-rule);
  background: var(--surface, #fbf8f1);
}

.apothecary-plate img {
  display: block;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--surface, #fbf8f1), 0 0 0 5px var(--apothecary-rule-fine);
}

.apothecary-hero__image {
  aspect-ratio: 4 / 5;
}

@media (max-width: 55.99rem) {
  .apothecary-hero__image {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------------ The full-width opening (hero_fullwidth_image, hero_video) */

/* The photograph is the bottle and the words are its label: a label of the page's paper laps over the picture's foot,
   in the middle, half on the picture and half on the page, so the heading reads on any photograph, light or dark, with
   no shade over it, and the picture's middle (where a product photograph has its subject) stays in sight. The picture takes what is left of the first
   screen: the screen less where the opening starts on the page. --apothecary-opening-top is that place; theme.js
   measures it (an announcement, the header, the breadcrumb above it), and the values here stand in until it has
   (cms/THEME_DEVELOPMENT.md, rule 19; opening-first-screen.test.mjs). */
.apothecary-opening {
  --apothecary-opening-top: var(--apothecary-bar);
  /* An opening further down a page is three quarters of a screen. */
  --apothecary-opening-height: 74svh;
}

.apothecary-main > .apothecary-opening:first-child,
.apothecary-main > .apothecary-breadcrumbs:first-child + .apothecary-opening {
  --apothecary-opening-height: calc(100svh - var(--apothecary-opening-top));
}

.apothecary-main > .apothecary-breadcrumbs:first-child + .apothecary-opening {
  --apothecary-opening-top: calc(var(--apothecary-bar) + 3.5rem);
  margin-top: 1rem;
}

.apothecary-opening__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(28rem, var(--apothecary-opening-height));
}

.apothecary-opening__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 13rem;
  overflow: hidden;
  background: var(--surface-alt, #ebe2d0);
}

.apothecary-opening__image,
.apothecary-opening__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.apothecary-opening__label {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 0.95rem;
  margin: -3.25rem var(--apothecary-gutter) 0;
  padding: 1.75rem clamp(1.15rem, 4vw, 2.5rem) 2rem;
  text-align: center;
}

.apothecary-opening__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.25rem + 3vw, 3.75rem);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

.apothecary-opening__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5f4e40);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  font-synthesis: none;
  line-height: 1.45;
}

html.apothecary-italic .apothecary-opening__lead {
  font-style: italic;
}

.apothecary-opening__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 0.9rem;
  margin-top: 0.35rem;
}

/* From a tablet up the label is wider and laps further over the picture, with a soft shadow where it lies on it. */
@media (min-width: 48rem) {
  .apothecary-opening--picture .apothecary-opening__label {
    align-self: center;
    width: min(46rem, calc(100% - 2 * var(--apothecary-gutter)));
    margin: -7.5rem 0 0;
    padding: clamp(2rem, 3.5vw, 2.75rem) clamp(2rem, 4.5vw, 3.75rem) clamp(2.1rem, 3.6vw, 2.9rem);
    box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, 0.45);
  }
}

/* Room under the label before the next section. */
.apothecary-opening--picture {
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* A picture with no words: only the picture, a little lower. */
.apothecary-opening.apothecary-opening--wordless {
  --apothecary-opening-height: 62svh;
}

/* No picture: the label opens the page on the parchment. */
.apothecary-opening--bare {
  padding: clamp(2.5rem, 6vw, 5rem) var(--apothecary-gutter);
  background: var(--surface-alt, #ebe2d0);
}

.apothecary-opening--bare .apothecary-opening__stage {
  justify-content: center;
  min-height: 0;
}

.apothecary-opening--bare .apothecary-opening__label {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 4.5vw, 3.5rem);
}

/* ------------------------------------------------------------------ Article body */

.apothecary-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--apothecary-gutter);
}

.apothecary-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

/* A post's head: the date in spaced capitals, the title, and a double rule under them. */
.apothecary-article__header {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 4px double var(--apothecary-rule);
  text-align: center;
}

.apothecary-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--accent-ink, #45603f);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.apothecary-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.12;
  text-wrap: balance;
}

.apothecary-prose > :first-child {
  margin-top: 0;
}

.apothecary-prose > :last-child {
  margin-bottom: 0;
}

.apothecary-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.25em;
}

.apothecary-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, serif);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.22;
}

.apothecary-prose h2 {
  font-size: 1.85rem;
}

.apothecary-prose h3 {
  font-size: 1.45rem;
}

.apothecary-prose h4 {
  font-size: 1.2rem;
}

/* A post opens with a large initial in the heading face, as a herbal opens a chapter. */
.apothecary-article--post .apothecary-prose > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--accent-ink, #45603f);
  font-family: var(--font-heading, serif);
  font-size: 3.6em;
  font-weight: var(--apothecary-heading-weight);
  line-height: 0.9;
}

.apothecary-prose a {
  color: var(--accent-ink, #45603f);
  text-underline-offset: 0.2em;
}

.apothecary-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.35rem;
  border-left: 4px double var(--apothecary-rule);
  color: var(--text-secondary, #5f4e40);
  font-family: var(--font-heading, serif);
  font-size: 1.2em;
  line-height: 1.5;
}

html.apothecary-italic .apothecary-prose blockquote {
  font-style: italic;
}

.apothecary-prose img {
  display: block;
  border-radius: 2px;
}

.apothecary-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #5f4e40);
  font-size: 0.875rem;
}

.apothecary-prose :where(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--apothecary-line);
  text-align: left;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.apothecary-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.apothecary-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 4px;
  background: var(--surface-alt, #ebe2d0);
}

.apothecary-prose hr {
  height: 0.875rem;
  margin: 2.25em auto;
  border: 0;
  width: 8.75rem;
  background-color: var(--accent-ink, #45603f);
  -webkit-mask: var(--apothecary-ornament) center / contain no-repeat;
  mask: var(--apothecary-ornament) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Divider block */

.apothecary-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--apothecary-gutter);
}

/* line: a double rule with the diamond in its middle. */
.apothecary-divider__line {
  flex: 1 1 0;
  border-top: 4px double var(--apothecary-rule);
}

.apothecary-divider__mark {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent-ink, #45603f);
  transform: rotate(45deg);
}

.apothecary-divider--dashed .apothecary-divider__line {
  border-top: 1px dashed var(--apothecary-rule);
}

/* dotted: three small diamonds. */
.apothecary-divider--dotted span {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--apothecary-rule);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ The stock blocks, composed */

/* includes/bind.php writes each block's type on its section (data-block). The rules below compose the stock blocks;
   a module's section (a type that starts with x_) keeps what its module asked for. */

/* A section heading of the stock blocks closes with the ornament: a diamond between two rules, centred under a centred
   heading, at the left under a heading at the left. It stands under the heading, never across it. */
.apothecary-main [data-block]:not([data-block^="x_"]) .kit-section__inner > .kit-stack > .kit-heading-group:has(> .kit-heading--2)::after {
  content: "";
  display: block;
  width: 8.75rem;
  max-width: 100%;
  height: 0.875rem;
  margin: 0.9rem auto 0;
  background-color: var(--kit-accent-text, var(--accent-ink, #45603f));
  -webkit-mask: var(--apothecary-ornament) center / contain no-repeat;
  mask: var(--apothecary-ornament) center / contain no-repeat;
}

.apothecary-main [data-block]:not([data-block^="x_"]) .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--left:has(> .kit-heading--2)::after {
  margin-inline: 0;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.apothecary-main [data-block]:not([data-block^="x_"]) .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--right:has(> .kit-heading--2)::after {
  margin-inline: auto 0;
  -webkit-mask-position: right center;
  mask-position: right center;
}

/* A small label above a centred heading stands between two short rules. */
.apothecary-main [data-block]:not([data-block^="x_"]) .kit-heading-group.kit-text--center > .kit-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.apothecary-main [data-block]:not([data-block^="x_"]) .kit-heading-group.kit-text--center > .kit-eyebrow::before,
.apothecary-main [data-block]:not([data-block^="x_"]) .kit-heading-group.kit-text--center > .kit-eyebrow::after {
  content: "";
  flex: 0 1 1.75rem;
  min-width: 0.75rem;
  border-top: 1px solid currentColor;
}

/* Numbered remedies: the cards of a list of services, pages or places are numbered in order, a small label above each
   title, and the card's words stand in the middle like the words of a label. */
.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid {
  counter-reset: apothecary-card;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card {
  counter-increment: apothecary-card;
  text-align: center;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card > .kit-card__content::before {
  content: counter(apothecary-card, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
  color: var(--kit-accent-text);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.2em;
  line-height: 1.5;
}

/* A card's icon is its emblem: above the number, at the head of the label. */
.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card > .kit-card__content > .kit-card__body {
  display: contents;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card > .kit-card__content > .kit-card__body > .kit-icon:first-child {
  order: -2;
  margin-bottom: 0.4rem;
  color: var(--kit-accent-text);
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card > .kit-card__content::before {
  order: -1;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card :is(.kit-text-block, .kit-heading-group) {
  text-align: center;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card :is(.kit-card__body, .kit-card__content) {
  align-items: center;
}

.apothecary-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-grid > .kit-card .kit-row {
  justify-content: center;
}

/* Features: each one under a fine rule, its icon in the accent's shade. */
.apothecary-main [data-block="feature_list"] .kit-features > .kit-stack {
  padding-top: 1.1rem;
  border-top: 1px solid var(--apothecary-rule-fine);
}

.apothecary-main [data-block="feature_list"] .kit-features > .kit-stack > .kit-icon {
  color: var(--kit-accent-text);
}

/* Questions are numbered in small roman figures, in the heading face's italic where the palette has one. */
.apothecary-main [data-block="faq"] .kit-accordion {
  counter-reset: apothecary-question;
}

.apothecary-main [data-block="faq"] .kit-accordion__item {
  counter-increment: apothecary-question;
}

.apothecary-main [data-block="faq"] .kit-accordion__title {
  justify-content: flex-start;
}

.apothecary-main [data-block="faq"] .kit-accordion__title > svg {
  margin-inline-start: auto;
}

.apothecary-main [data-block="faq"] .kit-accordion__title::before {
  content: counter(apothecary-question, lower-roman) ".";
  flex: none;
  min-width: 2.25rem;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 1rem;
  font-synthesis: none;
  font-weight: var(--apothecary-heading-weight);
}

html.apothecary-italic .apothecary-main [data-block="faq"] .kit-accordion__title::before {
  font-style: italic;
}

/* Statistics: figures between fine upright rules, like the columns of a dispensing book. */
.apothecary-main [data-block="stats_counter"] .kit-grid > .kit-stack {
  padding-inline: 0.5rem;
}

@media (min-width: 40rem) {
  .apothecary-main [data-block="stats_counter"] .kit-grid > .kit-stack + .kit-stack {
    border-inline-start: 1px solid var(--apothecary-rule-fine);
  }
}

.apothecary-main [data-block="stats_counter"] .kit-icon {
  color: var(--kit-accent-text);
}

/* Pictures beside words, in a gallery and in a team are plates: two rules with paper between. */
.apothecary-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture {
  overflow: visible;
  padding: clamp(0.6rem, 1.3vw, 0.85rem);
  border: 1px solid var(--apothecary-rule);
  border-radius: 0;
  background: var(--kit-surface);
}

.apothecary-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture img {
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--kit-surface), 0 0 0 5px var(--apothecary-rule-fine);
}

.apothecary-main [data-block="image_gallery"] .kit-grid > .kit-picture {
  padding: 0.45rem;
  border: 1px solid var(--apothecary-rule);
  border-radius: 0;
  background: var(--kit-surface);
}

.apothecary-main [data-block="image_gallery"] .kit-grid > .kit-picture img {
  border-radius: 0;
}

/* A call to action band: its heading in the heading face between rules of the band's own colour. */
.apothecary-main [data-block="cta_banner"] .kit-section__inner > .kit-row {
  padding-block: 1rem;
  border-block: 1px solid color-mix(in srgb, var(--kit-text) 35%, transparent);
}

/* An invitation without a picture is a label in the middle of the parchment, its crest at its head. */
.apothecary-main [data-block="cta_section"]:not(.kit-section--image) > .kit-section__inner > .kit-stack {
  position: relative;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4.5vw, 3.25rem);
  border: 1px solid var(--apothecary-rule);
  border-radius: var(--apothecary-radius);
  background: var(--kit-surface);
}

.apothecary-main [data-block="cta_section"]:not(.kit-section--image) > .kit-section__inner > .kit-stack::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--apothecary-rule-fine);
  -webkit-mask: var(--apothecary-frame);
  mask: var(--apothecary-frame);
  pointer-events: none;
}

.apothecary-main [data-block="cta_section"]:not(.kit-section--image) > .kit-section__inner > .kit-stack::after {
  content: "";
  order: -1;
  width: 8.75rem;
  height: 1.6rem;
  margin-bottom: -0.5rem;
  background-color: var(--kit-accent-text, var(--accent-ink, #45603f));
  -webkit-mask: var(--apothecary-crest) center / contain no-repeat;
  mask: var(--apothecary-crest) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Footer */

/* The footer is the bottle: a band of the brand colour, the name on a label of paper in its middle, the pages and the
   contact details around it in the bottle's own light words. Text on the band is only ever --on-primary, on the label
   only the page's own text colours: the pairs the colour contract keeps readable for every palette and a website's own
   colours. */
.apothecary-footer {
  background: var(--primary, #5a3218);
  color: var(--on-primary, #f7f0e2);
}

.apothecary-footer__inner {
  max-width: calc(var(--apothecary-width) + 2 * var(--apothecary-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--apothecary-gutter) 1.75rem;
}

.apothecary-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.apothecary-footer .apothecary-brand__name {
  max-width: 100%;
}

.apothecary-footer .apothecary-brand__logo,
.apothecary-footer .brand-logo-original {
  max-height: 3rem;
  width: auto;
}

.apothecary-footer .logo-mask {
  background-color: var(--text-primary, #2a1d14) !important;
}

/* The name plate: a label of paper with the name, the tagline and the social links. */
.apothecary-footer__plate {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  width: min(34rem, 100%);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}

.apothecary-footer__plate .apothecary-brand {
  flex-direction: column;
  gap: 0.6rem;
}

.apothecary-footer__plate .apothecary-brand__name {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.2;
  text-align: center;
}

.apothecary-footer__tagline {
  max-width: 28rem;
  margin: 0;
  color: var(--text-secondary, #5f4e40);
  font-family: var(--font-heading, serif);
  font-size: 1.1rem;
  font-synthesis: none;
  line-height: 1.45;
}

html.apothecary-italic .apothecary-footer__tagline {
  font-style: italic;
}

.apothecary-footer__plate .apothecary-footer__social a {
  border-color: var(--apothecary-rule-fine);
  color: var(--text-primary, #2a1d14);
}

.apothecary-footer__plate .apothecary-footer__social a:hover {
  border-color: var(--text-primary, #2a1d14);
}

/* The invitation of the mega footer: a heading and the header's button above the plate. */
.apothecary-footer__closing {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.apothecary-footer__invite {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.apothecary-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 17rem));
  justify-content: center;
  gap: 2rem 3rem;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f7f0e2) 30%, transparent);
}

.apothecary-footer__grid:not(:has(> *)) {
  display: none;
}

@media (max-width: 39.99rem) {
  .apothecary-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.apothecary-footer__title {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.apothecary-footer__links,
.apothecary-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  font-style: normal;
}

.apothecary-footer__contact p:not(.apothecary-footer__title),
.apothecary-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
}

.apothecary-footer__links a,
.apothecary-footer__contact a,
.apothecary-footer__legal a,
.apothecary-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.apothecary-footer__links a:hover,
.apothecary-footer__contact a:hover,
.apothecary-footer__legal a:hover,
.apothecary-footer__inline a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.apothecary-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  color: inherit;
}

.apothecary-footer__social a:hover {
  border-color: currentColor;
}

.apothecary-footer__bottom,
.apothecary-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.apothecary-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 4px double color-mix(in srgb, var(--on-primary, #f7f0e2) 40%, transparent);
}

.apothecary-footer__legal,
.apothecary-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.apothecary-footer__legal a {
  font-size: 0.875rem;
}

/* The minimal footer: one line on the page's own paper under a double rule. */
.apothecary-footer--minimal {
  border-top: 4px double var(--apothecary-rule);
  background: var(--background, #f4eee2);
  color: var(--text-primary, #2a1d14);
}

.apothecary-footer--minimal .apothecary-footer__inner {
  padding-block: 1.75rem;
}

.apothecary-footer--minimal .apothecary-brand__name {
  font-size: 1.375rem;
}

.apothecary-footer--minimal .apothecary-footer__copyright {
  color: var(--text-secondary, #5f4e40);
}

.apothecary-footer--minimal .apothecary-footer__legal {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ Page not found */

.apothecary-not-found {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--apothecary-gutter);
  background: var(--surface-alt, #ebe2d0);
}

.apothecary-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.apothecary-not-found__number {
  margin: 0;
  color: var(--accent-ink, #45603f);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong);
  letter-spacing: 0.24em;
}

.apothecary-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.12;
  text-wrap: balance;
}

.apothecary-not-found p {
  margin: 0;
  color: var(--text-secondary, #5f4e40);
}

/* ------------------------------------------------------------------ Form thanks */

.apothecary-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.apothecary-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.6rem;
  font-weight: var(--apothecary-heading-weight);
  line-height: 1.25;
}

.apothecary-form-success p {
  margin: 0;
  color: var(--text-secondary, #5f4e40);
}

/* ------------------------------------------------------------------ The phone action bar and the cookie notice */

/* The shared bar (resilience.css) on the theme's paper under a double rule, with its button. */
body .theme-action-bar {
  border-top: 4px double var(--apothecary-rule);
  background: var(--background, #f4eee2);
}

/* Their buttons are cut like the theme's (the theme's line in resilience.css, --chrome-button-clip). */

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .apothecary-menu-button {
    display: none !important;
  }

  .apothecary-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .apothecary-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}