/*
Theme Name: Durrell
Theme URI: https://durrell.org
Author: Durrell Wildlife Conservation Trust
Description: Block theme for Durrell's standalone fundraising site — animal adoptions and seasonal appeals. Brand-locked palette and typography; editors change content, not structure.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
Version: 1.4.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: durrell
*/

/*
 * Almost all styling lives in theme.json. Only put rules here that theme.json
 * genuinely cannot express: pseudo-element decoration, media queries for grid
 * spans, motion preferences, and focus rings.
 *
 * Reference values come from README.md — do not invent new ones.
 */

:root {
  --durrell-header-h: 70px;
  --durrell-admin-bar-h: 0px;
  /* Default species colour, so shared components (buttons, headings) still
     render on pages that are not about a particular animal — the donation
     and confirmation pages. Animal pages override it on their wrapper. */
  --durrell-species: var(--wp--preset--color--adoption-orange);
}

/* The logged-in admin bar is also position:fixed, so our fixed header has to
   start below it or the two overlap. WP pins the bar at 32px, 46px on medium
   screens, and lets it scroll away entirely under 600px. */
body.admin-bar { --durrell-admin-bar-h: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar { --durrell-admin-bar-h: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar { --durrell-admin-bar-h: 0px; }
}

html {
  scroll-behavior: smooth;
  /* Same offset as the fixed header, so the #choose anchor doesn't land
     underneath it. Tied to the one variable for the same reason. */
  scroll-padding-top: var(--durrell-header-h);
}

html:has(body.admin-bar) {
  scroll-padding-top: calc(var(--durrell-header-h) + 32px);
}

/* The header is fixed, so content must be pushed clear of it. Driven by one
   custom property so the offset cannot desynchronise from the header height. */
body { padding-top: var(--durrell-header-h); }

/* Core's flow layout would otherwise put a block gap above the first section
   and below the last, opening a strip of body background between the header
   and the page, and again between the page and the footer. */
/* Core spaces the root children — header, main, footer — with
   :where(.wp-site-blocks) > * { margin-block-start: <block gap> }. Note the
   footer that receives it is the OUTER .wp-block-template-part wrapper, not
   our own .durrell-footer inside it, so targeting the inner one does nothing.
   Every section here owns its padding, so the root gap is removed outright. */
.wp-site-blocks > * { margin-block-start: 0; }
.site-main { margin-block-start: 0; margin-block-end: 0; }
.site-main > :first-child { margin-block-start: 0; }
.site-main > :last-child { margin-block-end: 0; }

/* ----------------------------------------------------------- box sizing */
/* Core sets border-box on .wp-block-group and lists only, so block-rendered
   sections got it while PHP-rendered ones and every form control did not —
   which made inputs 26px wider than their grid cell (width:100% plus padding
   plus border) and overlap the field beside them. The prototype set this
   globally; so do we. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ image reset */
/* The theme owns this rather than relying on core's. Since we load block CSS
   per-block, a page built from one custom block never pulls in core's
   img{height:auto} — and without it the width/height ATTRIBUTES win, so
   aspect-ratio is ignored and photos render at their intrinsic height. */
img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- focus */
/* Accessibility duty, not a nicety. Orange is invisible on dark
   photography, so cards get a yellow ring instead. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wp--preset--color--adoption-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.durrell-animal-card:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-yellow);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- icons */
/* Decorative icons only, so they live in CSS rather than markup. That keeps
   every section built from blocks an Editor can actually see — inline SVG
   would force core/html, which the lockdown restricts to developers. Do NOT
   ship the Material Symbols font; it is 200KB+ for a handful of glyphs and
   flashes literal words ("volunteer_activism") before it loads. */
:root {
  --durrell-icon-heart-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F25116' d='M12 20.7 4.6 13.3a4.8 4.8 0 1 1 6.8-6.8l.6.6.6-.6a4.8 4.8 0 1 1 6.8 6.8Z'/%3E%3C/svg%3E");
  --durrell-icon-heart-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2303A65A' d='M12 20.7 4.6 13.3a4.8 4.8 0 1 1 6.8-6.8l.6.6.6-.6a4.8 4.8 0 1 1 6.8 6.8Z'/%3E%3C/svg%3E");
  --durrell-icon-globe-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303A65A' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z'/%3E%3C/svg%3E");
  --durrell-icon-school-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303A65A' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 4 1.8 9.3 12 14.6l10.2-5.3Z'/%3E%3Cpath d='M5.6 11.6v4.6c0 1.2 2.9 2.4 6.4 2.4s6.4-1.2 6.4-2.4v-4.6'/%3E%3C/svg%3E");
  --durrell-icon-box-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F25116' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3.6 7.6h16.8v11a1.5 1.5 0 0 1-1.5 1.5H5.1a1.5 1.5 0 0 1-1.5-1.5Z'/%3E%3Crect x='2.5' y='4' width='19' height='3.6' rx='.8'/%3E%3Cpath d='M10 11.6h4' stroke-linecap='round'/%3E%3C/svg%3E");
  --durrell-icon-photos-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='7.5' y='3.5' width='13' height='13' rx='2'/%3E%3Cpath d='M4 7.5v11A2 2 0 0 0 6 20.5h11' stroke-linecap='round'/%3E%3Cpath d='m10 13 2.5-2.5 3 3 1.8-1.5 2.2 2.2' /%3E%3C/svg%3E");
  --durrell-icon-award-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F25116' stroke-width='1.7' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='m8.6 13.8-1.4 7 4.8-2.5 4.8 2.5-1.4-7'/%3E%3C/svg%3E");
  --durrell-icon-groups-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303A65A' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Ccircle cx='17' cy='9.5' r='2.6'/%3E%3Cpath d='M3 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 14.6a5 5 0 0 1 5 4.4'/%3E%3C/svg%3E");
  --durrell-icon-timer-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23265DA6' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.6v4.2l2.8 1.8'/%3E%3Cpath d='M9.5 2.6h5'/%3E%3C/svg%3E");
  --durrell-icon-shield-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F25116' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.5 6v6c0 4.4 3.1 7.9 7.5 9.2 4.4-1.3 7.5-4.8 7.5-9.2V6Z'/%3E%3Cpath d='M12 9v6M9 12h6' stroke-linecap='round'/%3E%3C/svg%3E");
  --durrell-icon-check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303A65A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ eyebrows */
.durrell-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--wp--preset--color--ink-faint);
}

/* Brand Yellow banner with species-colour text — the brand system's
   signature eyebrow treatment. */
.durrell-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  width: fit-content;
  padding: 6px 16px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--adoption-orange);
}

.durrell-eyebrow--pill::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--durrell-icon-heart-orange) center / contain no-repeat;
}

.durrell-eyebrow--wide { letter-spacing: .14em; }

/* ---------------------------------------------------------------- hero */
.durrell-hero {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--cream);
}

/* The decorative leaf panel. Purely ornamental, so it is a pseudo-element:
   invisible to assistive technology, and an editor cannot delete it. */
.durrell-hero::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -70px;
  z-index: 0;
  width: min(400px, 55vw);
  height: 520px;
  background: url("assets/patterns/pattern-orange.webp") 0 0 / 300px;
  border-radius: 0 0 0 140px;
  transform: rotate(4deg);
  opacity: .14;
  pointer-events: none;
}

.durrell-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--wp--custom--gap--column);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.durrell-hero__copy > * + * { margin-block-start: 0; }
.durrell-hero__lede { max-width: 30rem; }

.durrell-hero__price {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.durrell-hero__price > * + * { margin-block-start: 0; }
.durrell-hero__price-figure > * + * { margin-block-start: 0; }

.durrell-hero__amount {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 32px;
  color: var(--wp--preset--color--ink);
}

.durrell-hero__footnote {
  font-size: 12px;
  font-style: italic;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-hero__aside { position: relative; }

.durrell-hero__pack {
  overflow: hidden;
  border: 1px solid rgba(226, 191, 180, .4);
  border-radius: var(--wp--custom--radius--hero);
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--hero);
}

.durrell-hero__pack > * + * { margin-block-start: 0; }

.durrell-hero__pack-photo { margin: 0; }

.durrell-hero__pack-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.durrell-hero__pack-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* Extra bottom padding so the floating badge hangs clear of this text
     rather than across it — README §2 asks for "clear of the card content",
     and the badge is centred exactly where the caption sits. */
  padding: 26px 30px 52px;
  background: var(--wp--preset--color--cream-deep);
}

.durrell-hero__pack-bar::after {
  content: "";
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--durrell-icon-box-orange) center / contain no-repeat;
}

.durrell-hero__pack-text > * + * { margin-block-start: 4px; }

/* Was an <h3>, which jumped the outline from the <h1> above it. It is a card
   caption rather than a section heading, so it keeps the look and drops the
   heading semantics. */
.durrell-hero__pack-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xxl);
  line-height: 1.25;
  color: var(--wp--preset--color--ink);
}

/* Centred on the pack card and hanging below it, clear of the card content. */
.durrell-hero__badge {
  position: absolute;
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--overlay);
  white-space: nowrap;
}

.durrell-hero__badge::before {
  content: "";
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-yellow) var(--durrell-icon-heart-orange) center / 24px 24px no-repeat;
}

.durrell-hero__badge-text > * + * { margin-block-start: 0; }
.durrell-hero__badge-title { font-weight: 600; font-size: 13px; }
.durrell-hero__badge-sub { font-size: 12px; color: var(--wp--preset--color--ink-muted); }

/* ------------------------------------------------------- pack contents */
.durrell-section--pack { max-width: none; }
.durrell-section__inner { max-width: 1280px; margin-inline: auto; }

.durrell-pack-tile {
  border-radius: var(--wp--custom--radius--card);
  padding: 32px;
}

.durrell-pack-tile > * + * { margin-block-start: 8px; }

.durrell-pack-tile--plush {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--white);
  box-shadow: 0 12px 30px -14px rgba(3, 166, 90, .16);
}

.durrell-pack-tile--plush .durrell-pack-tile__photo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
}

.durrell-pack-tile--plush .durrell-pack-tile__photo img {
  width: 66%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .2));
}

.durrell-pack-tile__eyebrow {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  /* 14px orange on white is 3.52:1. Darkened orange clears AA. */
  color: var(--wp--custom--link--default);
}

.durrell-pack-tile--book {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  background: var(--wp--preset--color--adoption-blue);
  color: var(--wp--preset--color--white);
}

.durrell-pack-tile--book > * + * { margin-block-start: 0; }
.durrell-pack-tile--book .durrell-pack-tile__photo { width: 33%; flex: none; margin: 0; }

.durrell-pack-tile--book .durrell-pack-tile__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}

.durrell-pack-tile--book h3 { color: var(--wp--preset--color--white); }
.durrell-pack-tile--book p { opacity: .92; }
.durrell-pack-tile__body > * + * { margin-block-start: 8px; }

.durrell-pack-tile--postcards,
.durrell-pack-tile--certificate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 180px;
}

.durrell-pack-tile--postcards::before,
.durrell-pack-tile--certificate::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: auto;
}

.durrell-pack-tile--postcards {
  background: var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--white);
}

.durrell-pack-tile--postcards h3 { color: var(--wp--preset--color--white); }
.durrell-pack-tile--postcards p { opacity: .9; }
.durrell-pack-tile--postcards::before { background: var(--durrell-icon-photos-white) center / contain no-repeat; }

.durrell-pack-tile--certificate {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border-warm);
}

.durrell-pack-tile--certificate::before { background: var(--durrell-icon-award-orange) center / contain no-repeat; }

/* ---------------------------------------------------- how it helps */
.durrell-helps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--wp--custom--gap--column);
  align-items: center;
}

.durrell-helps__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--frame);
}

.durrell-helps__photo { margin: 0; }

.durrell-helps__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.durrell-helps__panel {
  position: absolute;
  inset: auto 26px 26px;
  padding: 24px;
  border-radius: var(--wp--custom--radius--panel);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--wp--preset--shadow--overlay);
}

.durrell-helps__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.durrell-helps__copy > * + * { margin-block-start: 0; }

/* Icon roundels: Brand Yellow circles with species-colour glyphs. */
.durrell-helps__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  width: 100%;
}

.durrell-helps__item > * + * { margin-block-start: 0; }

/* These are h3s for a correct outline, but sit at the h4 size in the design. */
.durrell-helps__item h3 {
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.3;
}

.durrell-helps__item::before {
  content: "";
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--brand-yellow);
  background-position: center;
  background-size: 22px 22px;
  background-repeat: no-repeat;
}

.durrell-helps__item--care::before { background-image: var(--durrell-icon-heart-green); }
.durrell-helps__item--wild::before { background-image: var(--durrell-icon-globe-green); }
.durrell-helps__item--learn::before { background-image: var(--durrell-icon-school-green); }

/* ==================================================== APPEALS PAGE ==== */

/* --------------------------------------------------------- appeal hero */
.durrell-appeal-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: min(640px, 88vh);
  /* Inline padding belongs to the inner container, not the section, so the
     copy lands on exactly the same left edge as the Adopt page's hero grid. */
  padding: var(--wp--custom--section--padding-block) 0;
}

.durrell-appeal-hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.durrell-appeal-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The reference over-scales slightly so no edge shows behind the wash. */
  transform: scale(1.05);
}

/* The cream wash that carries the copy. Left-to-right so the photograph
   stays legible on the right of the frame. */
.durrell-appeal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--wp--preset--color--cream-soft) 8%, rgba(247, 250, 245, .65) 45%, transparent);
  pointer-events: none;
}

/* The left-to-right wash only protects the copy while the copy sits on the
   left. Once the hero stacks, the text spans the full width and runs over
   the bare photograph, so the veil becomes vertical and near-opaque. */
@media (max-width: 900px) {
  .durrell-appeal-hero::after {
    background: linear-gradient(to bottom, rgba(253, 247, 236, .94), rgba(253, 247, 236, .82));
  }
}

/* The photograph is full-bleed, but the copy aligns to the same 1280px
   content column as every other section — without this it sits hard against
   the viewport padding on wide screens while the Adopt page's hero does not. */
.durrell-appeal-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--wp--custom--section--padding-inline);
}

.durrell-appeal-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 620px;
}

.durrell-appeal-hero__copy > * + * { margin-block-start: 0; }

.durrell-appeal-hero__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(32px, 5.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--ink);
}

/* "gentle giants" — the orange gradient lettering from the reference. */
.durrell-gradient-text {
  background: linear-gradient(135deg, var(--wp--preset--color--adoption-orange), #D8420F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.durrell-appeal-hero__lede { max-width: 34rem; }

/* Urgency pill, with the pulsing dot from the reference. The dot is
   decorative, so it is a pseudo-element and the pulse is disabled by the
   global reduced-motion block. */
.durrell-urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid rgba(242, 81, 22, .2);
  border-radius: var(--wp--custom--radius--pill);
  background: rgba(242, 81, 22, .1);
  color: var(--wp--preset--color--adoption-orange);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
}

.durrell-urgent::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--wp--preset--color--adoption-orange);
  box-shadow: 0 0 0 0 rgba(242, 81, 22, .6);
  animation: durrell-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes durrell-ping {
  75%, 100% { box-shadow: 0 0 0 8px rgba(242, 81, 22, 0); }
}

.durrell-appeal-hero__actions { gap: 16px; }

/* Pill-shaped CTA variants used across the appeal page. */
.durrell-pill-button .wp-block-button__link {
  border-radius: var(--wp--custom--radius--pill);
  font-size: 15px;
  letter-spacing: .03em;
  padding: 15px 34px;
}

.durrell-pill-button.is-large .wp-block-button__link {
  padding: 16px 40px;
  font-size: 18px;
}

.durrell-pill-button.is-style-outline-green .wp-block-button__link {
  background: var(--wp--preset--color--cream-soft);
  border: 2px solid var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--rich-green);
  box-shadow: none;
}

/* ------------------------------------------------- appeal progress card */
/* Lifted so it straddles the hero's lower edge. */
.durrell-appeal-progress-wrap {
  position: relative;
  z-index: 20;
  margin-top: -64px;
  padding: 0 var(--wp--custom--section--padding-inline);
}

.durrell-appeal-progress-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(226, 191, 180, .4);
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .25);
}

.durrell-appeal-progress-card > * + * { margin-block-start: 0; }
.durrell-appeal-progress-card__main > * + * { margin-block-start: 18px; }

.durrell-appeal-progress-card__main h3 {
  font-size: 24px;
  font-weight: 600;
}

.durrell-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.durrell-stats > * + * { margin-block-start: 0; }

.durrell-stat {
  padding: 18px;
  border-radius: 12px;
  text-align: center;
}

.durrell-stat > * + * { margin-block-start: 0; }

/* The icon sits above the figure, tinted to match the tile. */
.durrell-stat::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 6px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.durrell-stat--supporters { background: rgba(244, 224, 71, .34); }
.durrell-stat--supporters::before { background-image: var(--durrell-icon-groups-green); }
.durrell-stat--days { background: rgba(38, 93, 166, .14); }
.durrell-stat--days::before { background-image: var(--durrell-icon-timer-blue); }

/* Money and percentage statistics carry no icon — the figure is the point. */
.durrell-stat--plain { background: var(--wp--preset--color--cream-deep); }
.durrell-stat--plain::before { display: none; }

.durrell-stat__figure {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 24px;
}

.durrell-stat__label {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--wp--preset--color--ink-muted);
}

/* ---------------------------------------------------------- impact bento */
.durrell-impact__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: -.02em;
  color: var(--wp--preset--color--ink);
  margin-bottom: 52px;
}

.durrell-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wp--custom--gap--grid);
}

.durrell-bento > * + * { margin-block-start: 0; }
.durrell-bento .is-span-8 { grid-column: span 8; }
.durrell-bento .is-span-4 { grid-column: span 4; }

.durrell-bento__panel {
  border-radius: var(--wp--custom--radius--progress);
  overflow: hidden;
}

.durrell-bento__panel--photo {
  position: relative;
  height: 400px;
  color: var(--wp--preset--color--white);
}

.durrell-bento__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.durrell-bento__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same scrim as the animal cards — it carries the text contrast. */
.durrell-bento__panel--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .1) 55%, transparent);
}

.durrell-bento__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 32px;
}

.durrell-bento__caption > * + * { margin-block-start: 8px; }
.durrell-bento__caption p { font-size: 15px; opacity: .85; max-width: 34rem; }

.durrell-bento__heading {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 30px;
  color: var(--wp--preset--color--white);
}

.durrell-tag-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--white);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}

.durrell-bento__panel--vet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  background: #E6E9E4;
  border: 1px solid rgba(226, 191, 180, .3);
}

.durrell-bento__panel--vet > * + * { margin-block-start: 14px; }

.durrell-bento__panel--vet::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  background: var(--durrell-icon-shield-orange) center / contain no-repeat;
}

.durrell-bento__panel--vet h3,
.durrell-bento__panel--gift h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 24px;
}

/* Tick list, with a rule above it as in the reference. */
.durrell-ticks {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(226, 191, 180, .6);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.durrell-ticks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.durrell-ticks li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--durrell-icon-check-green) center / contain no-repeat;
}

.durrell-bento__panel--gift {
  padding: 32px;
  background: var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--white);
}

.durrell-bento__panel--gift > * + * { margin-block-start: 14px; }
.durrell-bento__panel--gift h3 { color: var(--wp--preset--color--white); }
.durrell-bento__panel--gift p { font-size: 15px; opacity: .85; }

.durrell-bento__strip { margin: 22px 0; }

.durrell-bento__strip img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.durrell-bento__link a {
  color: var(--wp--preset--color--white);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.durrell-bento__link a:hover { color: var(--wp--preset--color--brand-yellow); }
.durrell-bento__panel--gift a:focus-visible { outline-color: var(--wp--preset--color--brand-yellow); }

/* The bento's spans only make sense while there is room for them. */
@media (max-width: 900px) {
  .durrell-bento { grid-template-columns: 1fr; }
  .durrell-bento .is-span-8,
  .durrell-bento .is-span-4 { grid-column: span 1; }
  .durrell-bento__panel--photo { height: auto; min-height: 280px; }
}

/* ------------------------------------------------------------- donate */
.durrell-donate {
  position: relative;
  overflow: hidden;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-donate__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.durrell-donate__inner > * + * { margin-block-start: 16px; }

.durrell-donate__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -.02em;
  color: var(--wp--preset--color--ink);
}

.durrell-amounts {
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.durrell-amount .wp-block-button__link {
  padding: 14px 30px;
  border: 2px solid var(--wp--preset--color--adoption-orange);
  border-radius: 12px;
  background: transparent;
  color: var(--wp--preset--color--adoption-orange);
  font-size: 20px;
  box-shadow: none;
}

.durrell-amount.is-selected .wp-block-button__link {
  background: var(--wp--preset--color--adoption-orange);
  color: var(--wp--preset--color--white);
}

.durrell-donate__cta { justify-content: center; margin-top: 28px; }

/* Soft colour washes in the corners. Decorative only. */
.durrell-donate::before,
.durrell-donate::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.durrell-donate::before { top: -96px; right: -96px; background: rgba(242, 81, 22, .06); }
.durrell-donate::after { bottom: -96px; left: -96px; background: rgba(0, 144, 62, .06); }

/* --------------------------------------------------- appeal progress */
.durrell-progress { width: 100%; }

.durrell-progress__label {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rich-green);
  margin: 0 0 14px;
}

/* Brand Yellow track with the orange fill over it — README note 1 resolved
   the old amber #FFDEA6 to the brand yellow. */
.durrell-progress__track {
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--brand-yellow);
  overflow: hidden;
}

.durrell-progress__fill {
  height: 100%;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--adoption-orange);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.durrell-progress__lines {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.durrell-progress__primary {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--wp--preset--color--ink);
}

.durrell-progress__secondary {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--adoption-orange);
}

.durrell-progress__asat {
  margin: 8px 0 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  color: var(--wp--preset--color--ink-faint);
}

/* ------------------------------------------------------- animal cards */
.durrell-animal-card {
  position: relative;
  display: block;
  /* README specifies only min-height:300px, which at ~588px wide makes a
     1.96:1 letterbox and crops the animals hard top and bottom. Matching the
     card to the 4:3 ratio of the durrell-card image size means object-fit has
     almost nothing left to crop. min-height stays as the floor for the
     single-column layout, where the card is narrow enough to go squarer. */
  aspect-ratio: 4 / 3;
  min-height: 300px;
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--white);
  /* Contain the stacking context so the scrim can never escape the card. */
  isolation: isolate;
}

.durrell-animal-card:hover { color: var(--wp--preset--color--white); }

/* Only the gorilla carries this in the reference — driven by the CPT's
   "featured" toggle, not hardcoded per card. */
.durrell-animal-card.is-featured { box-shadow: var(--wp--preset--shadow--card); }

.durrell-animal-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.durrell-animal-card:hover .durrell-animal-card__photo { transform: scale(1.04); }

/* The scrim carries ALL of the text contrast over photography. Do not omit
   it, lighten it, or move it above the tags. */
.durrell-animal-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--wp--custom--scrim);
}

.durrell-animal-card__tags {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* Durrell's signature device. Fredoka is load-bearing here — the tags read
   wrong in any other face — and the tilt is applied per tag, never to the
   container, so the two lozenges sit at slightly different angles. */
.durrell-name-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
}

/* Padding is deliberately asymmetric. README specifies 2px top and bottom,
   which is right at the top — Fredoka's capitals leave enough room there —
   but its descenders (the p and y in "Capybara") touch the lozenge edge, so
   only the bottom is opened up. Horizontal padding is nudged to match, or
   the tags read lopsided. Do not "tidy" this back to a single value. */
.durrell-name-tag--qualifier {
  font-size: 15px;
  line-height: 1.15;
  padding: 2px 12px 4px;
  border-radius: var(--wp--custom--radius--tag-small);
  transform: rotate(-2deg);
}

.durrell-name-tag--name {
  font-size: var(--wp--preset--font-size--tag);
  line-height: 1.1;
  padding: 2px 16px 6px;
  border-radius: var(--wp--custom--radius--tag);
  transform: rotate(-1.5deg);
}

.durrell-animal-card__footer {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 26px;
}

.durrell-animal-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  /* "Adopt now" breaking across two lines next to a long status label looks
     like a fault. The label is the flexible one — it may wrap, this may not. */
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
}

.durrell-animal-card__status {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--wp--custom--radius--pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  /* The smallest type on the page. Do not go below this. */
  line-height: 1.4;
}

/* The editor wraps the preview in a div; strip its own box so what an editor
   sees matches the front end. */
.durrell-animal-card-preview > .durrell-animal-card { height: 100%; }

.durrell-animal-card-preview.is-placeholder {
  padding: 16px;
  border: 1px dashed var(--wp--preset--color--border-warm);
  border-radius: var(--wp--custom--radius--card);
  font-size: 12px;
  color: var(--wp--preset--color--ink-faint);
}

/* ------------------------------------------------------------ sections */
.durrell-section {
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
  max-width: 1280px;
  margin-inline: auto;
}

.durrell-section__intro {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.durrell-section__intro > * + * { margin-block-start: 12px; }

/* The £39 in the intro copy, and its siblings elsewhere. */
.durrell-emphasis {
  /* Brand orange on cream is 3.3:1 at this size — below AA. README defines
     the darkened orange for exactly this case. */
  color: var(--wp--custom--link--default);
  font-weight: 700;
}

/* --------------------------------------------------------------- grids */
/* The animal grid is a HARD 2-column grid. Do not switch this to
   auto-fit: a third card squeezes in on wide viewports and breaks the
   intended 2x2. */
.durrell-animal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--custom--gap--grid);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* core/post-template wraps each result in an <li>; let the card fill it so
   both cards in a row match height. */
.durrell-animal-grid > li { display: flex; }
.durrell-animal-grid > li > .durrell-animal-card { flex: 1; }

/* Core's flow layout puts margin-block-start on every child but the first.
   Inside a grid that margin counts toward the row: the SECOND card's outer
   height becomes 300 + 24, the row grows to 324, and the first card — which
   has no margin — stretches to fill it and ends up visibly taller than its
   neighbour. Neutralise it on every grid the theme lays out itself. */
.durrell-animal-grid > * + *,
.durrell-hero__grid > * + *,
.durrell-helps > * + * {
  margin-block-start: 0;
}

@media (max-width: 700px) {
  .durrell-animal-grid { grid-template-columns: 1fr; }
}

/* Pack mosaic: 4 -> 2 -> 1, with the featured card dropping its spans. */
.durrell-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--custom--gap--grid);
}

.durrell-pack-grid > * + * { margin-block-start: 0; }

/* The deliberate mosaic: plush toy is 2x2, the fact book 2 wide. */
.durrell-pack-grid .is-featured { grid-column: span 2; grid-row: span 2; }
.durrell-pack-grid .is-wide { grid-column: span 2; }

@media (max-width: 900px) {
  .durrell-pack-grid { grid-template-columns: repeat(2, 1fr); }
  .durrell-pack-grid .is-featured { grid-row: span 1; }
}

@media (max-width: 600px) {
  .durrell-pack-grid { grid-template-columns: 1fr; }
  .durrell-pack-grid .is-featured,
  .durrell-pack-grid .is-wide { grid-column: span 1; }
  .durrell-pack-grid .is-wide { flex-direction: column; align-items: flex-start; }
  .durrell-pack-grid .is-wide .durrell-pack-tile__photo { width: 100%; }
}

/* ------------------------------------------------------------- wordmark */
/* Shared by header and footer; the footer recolours it below. Faked with
   live text until Durrell supply the real logo SVG. */
.durrell-wordmark {
  display: block;
  line-height: 1.05;
  text-decoration: none;
}

.durrell-wordmark__name {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--wp--preset--color--adoption-orange);
}

.durrell-wordmark__sub {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--wp--preset--color--ink-muted);
}

/* -------------------------------------------------------------- header */
.durrell-header {
  position: fixed;
  top: var(--durrell-admin-bar-h);
  left: 0;
  right: 0;
  z-index: 50;
  /* The body is pushed down by exactly --durrell-header-h, so the header must
     actually BE that tall. Left to its content the header comes out a few
     pixels shorter and the body background shows as a stripe beneath it. */
  min-height: var(--durrell-header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--wp--custom--section--padding-inline);
  background: var(--wp--custom--header--background);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--wp--preset--shadow--header);
}

.durrell-header__lead {
  display: flex;
  align-items: center;
  gap: 36px;
}

.durrell-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.durrell-nav__link {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--wp--preset--color--ink-muted);
  text-decoration: none;
}

/* aria-current is set server-side from the request path — see
   durrell_mark_current_nav_item() in functions.php. */
.durrell-nav__link[aria-current="page"] {
  color: var(--wp--preset--color--adoption-orange);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.durrell-cta-pill {
  display: inline-block;
  /* White on brand orange is 3.52:1 at 14px — small text needs 4.5:1. The
     darkened orange is visually near-identical and passes. */
  background: var(--wp--custom--link--default);
  color: var(--wp--preset--color--white);
  padding: 9px 22px;
  border-radius: var(--wp--custom--radius--pill);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  text-decoration: none;
}

.durrell-cta-pill:hover { color: var(--wp--preset--color--white); }

@media (max-width: 760px) {
  :root { --durrell-header-h: 104px; }
  .durrell-header { flex-wrap: wrap; gap: 10px; padding-inline: 20px; }
  .durrell-nav { gap: 18px; }
  /* Without this the wordmark and nav form one unbreakable row whose
     min-content width exceeds a phone screen, pushing the whole page into
     horizontal overflow. */
  .durrell-header__lead { flex-wrap: wrap; gap: 8px 20px; }
}

@media (max-width: 420px) {
  .durrell-header .durrell-cta-pill { display: none; }
}

/* -------------------------------------------------------------- footer */
.durrell-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(48px, 7vw, 72px) var(--wp--custom--section--padding-inline);
  background: var(--wp--preset--color--footer-dark);
}

.durrell-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 24rem;
}

/* These groups use core's flow layout, which spaces children with
   margin-block-start. We lay them out with flex gap instead, so the margin
   would stack on top of the gap and inflate every footer interval. */
.durrell-footer__brand > * + *,
.durrell-footer__links > * + *,
.durrell-footer__col > * + * {
  margin-block-start: 0;
}

.durrell-footer .durrell-wordmark__name {
  font-size: 22px;
  color: var(--wp--preset--color--brand-yellow);
}

/* Two-tone footer wordmark: "JERSEY ZOO" in Adoption Orange, "& DURRELL" in
   Brand Yellow. Orange on the dark footer clears AA at this size and weight
   (22px/900 counts as large text); it would not at body size. */
.durrell-footer .durrell-wordmark__zoo { color: var(--wp--preset--color--adoption-orange); }

.durrell-footer .durrell-wordmark__amp,
.durrell-footer .durrell-wordmark__trust { color: var(--wp--preset--color--brand-yellow); }

.durrell-footer .durrell-wordmark__sub { color: var(--wp--custom--footer--heading); }

.durrell-footer__mission {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--custom--footer--text);
}

.durrell-footer__social {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-footer__social a {
  display: inline-flex;
  color: var(--wp--custom--footer--text);
}

.durrell-footer__social a:hover { color: var(--wp--preset--color--brand-yellow); }

/* README specifies repeat(auto-fit, minmax(140px, auto)) here, but that is
   invalid CSS: auto-fit cannot be combined with an intrinsic max track size
   such as auto. Browsers discard the whole declaration and the three link
   columns collapse into one. Flex gives the same intent — content-width
   columns, 140px floor, wrapping on narrow screens — and actually works. */
.durrell-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px var(--wp--custom--gap--footer);
}

.durrell-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 140px;
}

.durrell-footer__col-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--wp--custom--footer--heading);
}

.durrell-footer__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-footer__list a {
  font-size: 15px;
  color: var(--wp--custom--footer--text);
  text-decoration: none;
}

.durrell-footer__list a:hover { color: var(--wp--preset--color--brand-yellow); }

/* The footer sits on near-black, where the orange focus ring is barely
   visible — use the brand yellow, as the animal cards do. */
.durrell-footer a:focus-visible {
  outline-color: var(--wp--preset--color--brand-yellow);
}

/* -------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================ SPECIES LANDING PAGE ==== */
/* ANIMAL-PAGE.md. Everything below reads --durrell-species and
   --durrell-species-tile, set per post on the wrapper. No rule in this
   section names an animal or quotes a species hex — that is what makes one
   template serve every animal, and a fifth animal need no CSS at all. */

.durrell-species { --durrell-yellow: var(--wp--preset--color--brand-yellow); }

/* Leaf textures. Decorative, always aria-hidden in the markup. */
.durrell-species__leaf {
  position: absolute;
  background-image: var(--durrell-species-tile);
  background-size: 300px;
  pointer-events: none;
}

.durrell-species__leaf--hero {
  top: -40px;
  right: -60px;
  z-index: 0;
  width: min(440px, 58vw);
  height: 560px;
  border-radius: 0 0 0 160px;
  transform: rotate(4deg);
  opacity: .16;
}

.durrell-species__leaf--full { inset: 0; opacity: .22; }
.durrell-species__leaf--card { inset: 0; background-size: 260px; opacity: .22; }

/* ------------------------------------------------------------------ hero */
.durrell-species__hero {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--cream);
}

.durrell-species__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--wp--custom--gap--column);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-species__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

/* The brand's yellow eyebrow banner, species-colour text. */
.durrell-species__eyebrow {
  background: var(--durrell-yellow);
  color: var(--durrell-species);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  padding: 7px 16px;
  border-radius: 4px;
}

/* The name-tag stack is the h1. Tags tilt individually, as on the card. */
.durrell-species__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.durrell-species__tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
}

.durrell-species__tag--qualifier {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.1;
  padding: 3px 14px 5px;
  border-radius: 6px;
  transform: rotate(-2deg);
}

.durrell-species__tag--name {
  font-size: clamp(44px, 7.4vw, 76px);
  line-height: 1;
  padding: 4px 20px 12px;
  border-radius: 10px;
  transform: rotate(-1.5deg);
}

.durrell-species__intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  max-width: 32rem;
  text-wrap: pretty;
}

.durrell-species__price-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.durrell-species__price-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--wp--preset--color--ink-faint);
}

.durrell-species__price-figure {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 34px;
  color: var(--wp--preset--color--ink);
}

.durrell-species__cta {
  background: var(--durrell-species);
  color: var(--wp--preset--color--white);
  padding: 15px 34px;
  border-radius: var(--wp--custom--radius--button);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}

.durrell-species__cta:hover { color: var(--wp--preset--color--white); }

.durrell-species__footnote {
  font-size: 12px;
  font-style: italic;
  color: var(--wp--preset--color--ink-faint);
}

.durrell-species__hero-figure { position: relative; }

.durrell-species__hero-photo {
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  /* Shadow tinted with the species colour. */
  box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--durrell-species) 55%, transparent);
}

.durrell-species__hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.durrell-species__badge {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--overlay);
  white-space: nowrap;
}

.durrell-species__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--durrell-yellow);
  color: var(--durrell-species);
}

.durrell-species__badge-primary { display: block; font-weight: 700; font-size: 13px; }
.durrell-species__badge-secondary { display: block; font-size: 12px; color: var(--wp--preset--color--ink-muted); }

/* The badge overhangs; give the hero room so it clears the fact strip. */
.durrell-species__hero { padding-bottom: 30px; }

/* ------------------------------------------------------------ fact strip */
.durrell-species__facts {
  position: relative;
  overflow: hidden;
  background: var(--durrell-species);
  padding: clamp(46px, 6vw, 64px) var(--wp--custom--section--padding-inline) clamp(52px, 6vw, 70px);
}

.durrell-species__facts-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--durrell-fact-count, 4), 1fr);
  gap: 32px;
  align-items: stretch;
  max-width: 1280px;
  margin-inline: auto;
}

/* space-between so captions bottom-align even when a figure wraps to two
   lines — figures vary in length per species, so this is load-bearing. */
.durrell-species__fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.durrell-species__fact-figure {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.06;
  color: var(--durrell-yellow);
  text-wrap: balance;
}

.durrell-species__fact-caption {
  font-size: 14px;
  color: var(--wp--preset--color--white);
  opacity: .9;
}

/* ----------------------------------------------------------------- funds */
.durrell-species__funds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--wp--custom--gap--column);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-species__funds-photo {
  border-radius: var(--wp--custom--radius--frame);
  overflow: hidden;
}

.durrell-species__funds-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.durrell-species__funds-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.durrell-species__funds-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--huge);
  color: var(--durrell-species);
  margin: 0;
}

.durrell-species__funds-intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  text-wrap: pretty;
}

.durrell-species__fund-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-species__fund {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Brand Yellow roundel, species-colour glyph — reused from the Adopt page. */
.durrell-species__roundel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--durrell-yellow);
  color: var(--durrell-species);
}

.durrell-species__fund-heading {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  margin-bottom: 4px;
}

.durrell-species__fund-body {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
}

/* ------------------------------------------------------------------ pack */
.durrell-species__pack {
  background: var(--wp--preset--color--cream-deep);
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-species__pack-inner { max-width: 1280px; margin-inline: auto; }

.durrell-species__pack-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

/* Stays Rich Green across every species, as on the Adopt page. */
.durrell-species__pack-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--huge);
  color: var(--wp--preset--color--rich-green);
  margin: 0;
}

.durrell-species__pack-intro p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  text-wrap: pretty;
}

.durrell-species__pack-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--custom--gap--grid);
}

.durrell-species__pack-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border-radius: var(--wp--custom--radius--card);
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .5);
  color: var(--durrell-species);
}

/* One card is filled in the species colour with a yellow glyph. */
.durrell-species__pack-card.is-filled {
  background: var(--durrell-species);
  border-color: transparent;
  color: var(--durrell-yellow);
}

.durrell-species__pack-card > *:not(.durrell-species__leaf) { position: relative; z-index: 1; }

.durrell-species__pack-icon { display: block; line-height: 0; }

.durrell-species__pack-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xxl);
  color: var(--wp--preset--color--ink);
  margin: 0;
}

.durrell-species__pack-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-species__pack-card.is-filled .durrell-species__pack-heading { color: var(--wp--preset--color--white); }
.durrell-species__pack-card.is-filled .durrell-species__pack-body { color: var(--wp--preset--color--white); opacity: .92; }

/* -------------------------------------------------------------- CTA band */
.durrell-species__cta-section {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-species__band {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(40px, 5vw, 64px);
  border-radius: 32px;
  background: var(--durrell-species);
}

.durrell-species__band .durrell-species__leaf--full { opacity: .2; }

.durrell-species__band-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 34rem;
}

.durrell-species__band-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.12;
  color: var(--durrell-yellow);
  margin: 0;
}

.durrell-species__band-copy p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--wp--preset--color--white);
  opacity: .94;
}

/* Inverse of the hero CTA: yellow ground, species-colour text. */
.durrell-species__band-cta {
  position: relative;
  z-index: 1;
  background: var(--durrell-yellow);
  color: var(--durrell-species);
  padding: 16px 36px;
  border-radius: var(--wp--custom--radius--button);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.durrell-species__band-cta:hover { color: var(--durrell-species); }
.durrell-species__band a:focus-visible { outline-color: var(--wp--preset--color--brand-yellow); }

/* ---------------------------------------------------------- more animals */
.durrell-species__more {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 var(--wp--custom--section--padding-inline) var(--wp--custom--section--padding-block);
}

.durrell-species__more-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--huge);
  color: var(--wp--preset--color--rich-green);
  margin: 0 0 28px;
}

/* Count comes from the query, not a hardcoded three. */
.durrell-species__more-row {
  display: grid;
  grid-template-columns: repeat(var(--durrell-more-count, 3), 1fr);
  gap: var(--wp--custom--gap--grid);
}

.durrell-species__more-card {
  position: relative;
  display: block;
  min-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}

.durrell-species__more-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.durrell-species__more-card:hover img { transform: scale(1.04); }

.durrell-species__more-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .05) 60%, transparent);
}

.durrell-species__tag--more {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 24px;
  line-height: 1;
  padding: 3px 12px 8px;
  border-radius: 6px;
  transform: rotate(-1.5deg);
}

.durrell-species__more-card:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-yellow);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .durrell-species__facts-grid { grid-template-columns: repeat(2, 1fr); }
  .durrell-species__pack-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .durrell-species__facts-grid,
  .durrell-species__pack-row,
  .durrell-species__more-row { grid-template-columns: 1fr; }
}

/* ======================================================== CHECKOUT ==== */
/* Adoption-Checkout.dc.html. Accents follow --durrell-species, set per
   animal on the wrapper, so the page picks up whichever animal is in the
   basket without a template change. */

.durrell-checkout {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-checkout__intro { margin-bottom: 36px; }

.durrell-checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--ink-muted);
  text-decoration: none;
}


.durrell-checkout__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.02em;
  color: var(--durrell-species);
  margin: 0 0 10px;
}

.durrell-checkout__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  max-width: 40rem;
}

.durrell-checkout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--wp--custom--gap--grid);
  align-items: start;
}

.durrell-checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--gap--grid);
}

/* ------------------------------------------------------------- stepper */
.durrell-steps {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.durrell-steps__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--ink-faint);
  white-space: nowrap;
}

/* The connecting rules are decorative, so they are pseudo-elements rather
   than empty spans in the markup. */
.durrell-steps__step + .durrell-steps__step::before {
  content: "";
  width: clamp(16px, 6vw, 90px);
  height: 1px;
  background: var(--wp--preset--color--border-warm);
}

.durrell-steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
}

.durrell-steps__step.is-done { color: var(--wp--preset--color--rich-green); }
.durrell-steps__step.is-done .durrell-steps__marker { border-color: currentColor; }
.durrell-steps__step.is-current { color: var(--durrell-species); font-weight: 700; }

/* -------------------------------------------------------------- panels */
.durrell-panel {
  padding: 32px;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .4);
  box-shadow: 0 4px 14px -8px rgba(3, 166, 90, .12);
}

.durrell-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 24px;
  /* Species colour, and the icon inherits it via currentColor. */
  color: var(--durrell-species);
  margin: 0 0 22px;
}

.durrell-panel__title--plain { margin: 0; }
.durrell-panel__title--sub { font-size: 22px; margin-bottom: 0; }

/* -------------------------------------------------------------- fields */
.durrell-field { margin: 0 0 16px; }
.durrell-field:last-child { margin-bottom: 0; }

.durrell-field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--wp--preset--color--ink-muted);
  margin-bottom: 8px;
}

.durrell-field__hint {
  display: block;
  font-size: 12px;
  color: var(--wp--preset--color--ink-muted);
  margin: -4px 0 8px;
}

.durrell-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.durrell-field-row .durrell-field { margin-bottom: 0; }

.durrell-checkout input[type="text"],
.durrell-checkout input[type="email"],
.durrell-checkout textarea {
  width: 100%;
  padding: 12px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--border-warm);
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 16px;
  color: var(--wp--preset--color--ink);
}

.durrell-checkout textarea { resize: vertical; }

.durrell-checkout input::placeholder,
.durrell-checkout textarea::placeholder { color: var(--wp--preset--color--ink-faint); }

.durrell-checkout input:focus,
.durrell-checkout textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--rich-green);
  box-shadow: 0 0 0 2px rgba(3, 166, 90, .18);
}

/* ---------------------------------------------------------- gift panel */
/* White like the other panels — a tinted, textured ground behind a dozen
   form fields reads as noise. The species colour carries through the
   heading, the border and the switch instead. Border weight matches the
   other panels exactly, or the fields inside sit 1px off from theirs. */
.durrell-panel--gift {
  background: var(--wp--preset--color--white);
  border: 1px solid color-mix(in srgb, var(--durrell-species) 32%, transparent);
  box-shadow: none;
}


.durrell-gift__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.durrell-gift__head p {
  font-size: 16px;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 4px;
}

/* The real checkbox is visually hidden but still focusable and still in the
   tab order — the switch below is its label. */
.durrell-checkout__gift {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.durrell-switch { flex: none; cursor: pointer; }

.durrell-switch__track {
  position: relative;
  display: block;
  width: 56px;
  height: 32px;
  border-radius: var(--wp--custom--radius--pill);
  background: color-mix(in srgb, var(--durrell-species) 25%, #FFFFFF);
  transition: background .2s;
}

.durrell-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .2s;
}

/* CSS-only state. No JavaScript on this page, so the toggle keeps working
   even where scripts are blocked or fail. */
.durrell-checkout__gift:checked ~ .durrell-panel--gift .durrell-switch__track {
  background: var(--durrell-species);
}

.durrell-checkout__gift:checked ~ .durrell-panel--gift .durrell-switch__knob { left: 28px; }

.durrell-checkout__gift:focus-visible ~ .durrell-panel--gift .durrell-switch__track {
  outline: 2px solid var(--wp--preset--color--adoption-orange);
  outline-offset: 2px;
}

/* Recipient fields, hidden until the toggle is on. */
.durrell-gift__fields { display: none; }

.durrell-checkout__gift:checked ~ .durrell-panel--gift .durrell-gift__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--durrell-species) 20%, transparent);
}

.durrell-gift__fields .durrell-field-row { margin-bottom: 0; }

.durrell-gift__fields input,
.durrell-gift__fields textarea { background: var(--wp--preset--color--white); }

/* The address label swaps between delivery and billing with the same toggle. */
.durrell-when-gift { display: none; }
.durrell-checkout__gift:checked ~ .durrell-panel .durrell-when-personal { display: none; }
.durrell-checkout__gift:checked ~ .durrell-panel .durrell-when-gift { display: inline; }

/* ------------------------------------------------------------ Gift Aid */
.durrell-panel--giftaid {
  padding: 24px;
  border-color: rgba(3, 166, 90, .25);
}

.durrell-giftaid {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.durrell-giftaid input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--wp--preset--color--rich-green);
}

/* Dark green deliberately: this is body-size text on white, where the brand
   green fails contrast. README's one sanctioned exception. */
.durrell-giftaid > span {
  font-size: 13px;
  line-height: 1.5;
  color: #00693A;
}

.durrell-giftaid strong { font-family: var(--wp--preset--font-family--heading); }
.durrell-giftaid__note { color: var(--wp--preset--color--ink-faint); }

/* -------------------------------------------------------------- submit */
.durrell-checkout__continue {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--durrell-species);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
}

/* Disabled until a payment provider exists — say so rather than pretending. */
.durrell-checkout__continue[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.durrell-checkout__reassure {
  text-align: center;
  font-size: 12px;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 12px;
}

/* ------------------------------------------------------------- summary */
.durrell-summary {
  position: sticky;
  top: calc(var(--durrell-header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--gap--grid);
}

.durrell-summary__card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .4);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .25);
}

.durrell-summary__media {
  position: relative;
  /* The reference fixes this at 220px, which against a ~420px card is close
     to 2:1 and crops the animal badly. Matching the 4:3 used by the cards and
     the species hero keeps the subject in frame. */
  aspect-ratio: 4 / 3;
  min-height: 220px;
  background: var(--durrell-species);
}

.durrell-summary__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.durrell-summary__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 55%);
}

.durrell-summary__status {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 12px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--durrell-species);
  color: var(--wp--preset--color--white);
  font-size: 12px;
  font-weight: 700;
}

.durrell-summary__caption {
  position: absolute;
  bottom: 16px;
  left: 24px;
  right: 24px;
  color: var(--wp--preset--color--white);
}

.durrell-summary__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .85;
}

.durrell-summary__animal {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
}

.durrell-summary__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
}

.durrell-summary__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--durrell-species);
  margin: 0;
}

.durrell-summary__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-summary__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-summary__tick {
  display: flex;
  flex: none;
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--durrell-species) 12%, transparent);
  color: var(--durrell-species);
}

.durrell-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--border-warm);
}

.durrell-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-summary__free { color: var(--wp--preset--color--rich-green); font-weight: 700; }

.durrell-summary__line--total {
  padding-top: 8px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--durrell-species);
}

.durrell-summary__note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--durrell-species) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--durrell-species) 22%, transparent);
  font-size: 14px;
  font-weight: 600;
  color: var(--durrell-species);
}

.durrell-summary__note svg { flex: none; }

.durrell-summary__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px;
  opacity: .7;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-summary__trust span:first-child {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0;
}

.durrell-summary__rule {
  width: 1px;
  height: 24px;
  background: var(--wp--preset--color--border-warm);
}

/* Sticky is wrong once the summary stacks beneath the form. */
@media (max-width: 900px) {
  .durrell-summary { position: static; }
}

/* ================================================ DONATE & CONFIRM ==== */
/* Both are narrow, single-purpose pages: one job, centred, nothing to
   distract from finishing it. */

.durrell-donate-page {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 24px);
}

.durrell-donate-page__intro { text-align: center; margin-bottom: 36px; }

.durrell-donate-page__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  border-radius: var(--wp--custom--radius--pill);
  background: rgba(3, 166, 90, .16);
  color: #00693A;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
}

.durrell-donate-page__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.02em;
  color: var(--wp--preset--color--adoption-orange);
  margin: 0 0 12px;
}

.durrell-donate-page__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-donate-page__progress {
  padding: 24px;
  margin-bottom: 32px;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--cream-deep);
}

.durrell-donate-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 32px;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .4);
  box-shadow: 0 4px 14px -8px rgba(3, 166, 90, .12);
}

/* --------------------------------------------------- segmented choices */
/* Radios rather than JavaScript buttons: correct semantics, arrow-key
   navigation, and the choice arrives in the form data for free. */
.durrell-choice { border: 0; margin: 0; padding: 0; }

.durrell-choice legend {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-choice__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr));
  gap: 12px;
}

.durrell-choice__options--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.durrell-choice__option { position: relative; display: block; }

/* The input stays focusable and in the tab order; only its default painting
   is removed. */
.durrell-choice__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.durrell-choice__option span {
  display: block;
  padding: 14px 12px;
  border: 2px solid var(--wp--preset--color--adoption-orange);
  border-radius: 12px;
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--wp--preset--color--adoption-orange);
  background: transparent;
  transition: background .15s, color .15s;
}

.durrell-choice__option input:checked + span {
  background: var(--wp--preset--color--adoption-orange);
  color: var(--wp--preset--color--white);
}

.durrell-choice__option input:focus-visible + span {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.durrell-donate-form__custom { position: relative; margin: 12px 0 0; }

.durrell-donate-form__currency {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-donate-form input[type="number"],
.durrell-donate-form input[type="text"],
.durrell-donate-form input[type="email"] {
  width: 100%;
  padding: 12px;
  background: var(--wp--preset--color--cream-soft);
  border: 1px solid var(--wp--preset--color--border-warm);
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 16px;
  color: var(--wp--preset--color--ink);
}

.durrell-donate-form .durrell-donate-form__custom input { padding-left: 32px; }

.durrell-donate-form input:focus {
  outline: none;
  border-color: var(--wp--preset--color--rich-green);
  box-shadow: 0 0 0 2px rgba(3, 166, 90, .18);
}

.durrell-donate-form__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 191, 180, .5);
}

.durrell-donate-form__details .durrell-field-row { margin-bottom: 0; }

/* ------------------------------------------------------- Gift Aid block */
.durrell-giftaid-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(3, 166, 90, .08);
}

/* Hidden but focusable; the label is the visible control. */
.durrell-giftaid__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.durrell-giftaid__box {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  border: 2px solid var(--wp--preset--color--rich-green);
  border-radius: 4px;
  background: var(--wp--preset--color--white);
}

.durrell-giftaid__toggle:checked + .durrell-giftaid .durrell-giftaid__box {
  background: var(--wp--preset--color--rich-green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}

.durrell-giftaid__toggle:focus-visible + .durrell-giftaid .durrell-giftaid__box {
  outline: 2px solid var(--wp--preset--color--adoption-orange);
  outline-offset: 2px;
}

/* HMRC needs an address to claim against the declaration, so the fields
   follow the checkbox rather than being asked of everyone. */
.durrell-giftaid__address { display: none; }
.durrell-giftaid__toggle:checked ~ .durrell-giftaid__address { display: grid; margin-bottom: 0; }
.durrell-giftaid__address input { background: var(--wp--preset--color--white); }

.durrell-donate-page__charity {
  text-align: center;
  font-size: 12px;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 32px;
}

/* ------------------------------------------------------- confirmation */
.durrell-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 24px);
}

.durrell-confirm__inner { max-width: 620px; width: 100%; text-align: center; }

.durrell-confirm__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--rich-green);
  animation: durrell-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

/* Neutralised by the global prefers-reduced-motion block. */
@keyframes durrell-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.durrell-confirm__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.02em;
  color: var(--wp--preset--color--adoption-orange);
  margin: 0 0 16px;
}

.durrell-confirm__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  margin-bottom: 32px;
}

/* Shown only until a payment provider passes a real reference. */
.durrell-confirm__preview {
  margin: -18px 0 32px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--ink);
  font-size: 13px;
  font-weight: 600;
}

.durrell-confirm__card {
  padding: 28px;
  margin-bottom: 28px;
  text-align: left;
  border-radius: var(--wp--custom--radius--progress);
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .4);
  box-shadow: 0 4px 14px -8px rgba(3, 166, 90, .12);
}

.durrell-confirm__ref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(226, 191, 180, .5);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-confirm__ref-value {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--wp--preset--color--ink);
}

.durrell-confirm__subtitle {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--rich-green);
  margin: 0 0 16px;
}

.durrell-confirm__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-confirm__list li { display: flex; gap: 14px; align-items: flex-start; }

.durrell-confirm__icon {
  display: flex;
  flex: none;
  padding: 8px;
  border-radius: 50%;
  background: rgba(3, 166, 90, .1);
  color: var(--wp--preset--color--rich-green);
}

.durrell-confirm__item-title {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 16px;
}

.durrell-confirm__item-body {
  display: block;
  font-size: 14px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-confirm__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.durrell-confirm__cta {
  padding: 14px 30px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--adoption-orange);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.durrell-confirm__cta:hover { color: var(--wp--preset--color--white); }

.durrell-confirm__cta--ghost {
  background: var(--wp--preset--color--cream-soft);
  border: 2px solid var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--rich-green);
}

.durrell-confirm__cta--ghost:hover { color: var(--wp--preset--color--rich-green); }

/* ==========================================================================
   Build your zoo — the multi-animal builder
   Spec: BUILD-YOUR-ZOO.md. The only page carrying client-side state.
   ========================================================================== */

/* The block itself is full width so the sticky tray can span the viewport;
   the measure sits on the inner wrapper. Same 1280px as the checkout and
   appeal pages — without it the price line touches the viewport edge and the
   card grid loses its margins entirely. */
.durrell-zoo__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

/* The script hides and reveals with the `hidden` attribute, which the UA
   stylesheet implements as a plain `display: none` — so ANY author rule that
   sets display beats it, and .durrell-zoo-row and .durrell-zoo-empty both do.
   Without this the zoo rows stay on screen with their quantities while the
   panel insists nothing is selected. Restated here, once, for the subtree. */
.durrell-zoo [hidden] { display: none !important; }

/* Until the script runs, nothing that needs it is shown. The pills and the
   panel would otherwise render as controls that do nothing at all. */
.durrell-zoo.is-nojs .durrell-zoo-card__pill,
.durrell-zoo.is-nojs .durrell-zoo-card__tick,
.durrell-zoo.is-nojs .durrell-zoo-panel,
.durrell-zoo.is-nojs .durrell-zoo-tray { display: none; }

/* The "About the …" link shows in BOTH modes. Without JS it replaces the dead
   pill; with JS it is the only remaining route to the species page, since the
   card itself now selects rather than navigating. */
.durrell-zoo-card__link { display: inline-flex; }

/* With the pill present the link drops to its own line, so the action row
   stays "control on the left, price on the right" as designed. */
.durrell-zoo:not(.is-nojs) .durrell-zoo-card__link {
  order: 3;
  flex-basis: 100%;
  font-weight: 600;
  font-size: 13px;
}

/* The whole card is the control once the script is running. */
.durrell-zoo:not(.is-nojs) .durrell-zoo-card { cursor: pointer; }

/* --------------------------------------------------------------- hero */
.durrell-zoo-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) var(--wp--custom--section--padding-inline) clamp(36px, 5vw, 56px);
  background: var(--wp--preset--color--cream);
  border-radius: var(--wp--custom--radius--hero);
}

.durrell-zoo-hero__leaf {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: min(46%, 420px);
  height: 78%;
  background-size: 300px;
  opacity: .15;
  border-radius: 0 0 0 150px;
  transform: rotate(4deg);
  pointer-events: none;
}

.durrell-zoo-hero__inner { position: relative; max-width: 60rem; }

/* Rich Green leads this page: the grid below carries all four species
   colours, so a single species colour here would imply the page is about
   that one animal. */
.durrell-eyebrow-banner {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 16px 8px;
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--rich-green);
  border-radius: var(--wp--custom--radius--tag-small);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.durrell-zoo-hero__title {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  line-height: 1;
}

.durrell-zoo-hero__tag-small {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.15;
  padding: 3px 14px 5px;
  border-radius: var(--wp--custom--radius--tag-small);
  transform: rotate(-2deg);
  background: var(--wp--preset--color--rich-green);
  color: var(--wp--preset--color--brand-yellow);
}

.durrell-zoo-hero__tag-large {
  font-size: clamp(44px, 7.4vw, 76px);
  line-height: 1.05;
  padding: 4px 20px 12px;
  border-radius: 10px;
  transform: rotate(-1.5deg);
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--rich-green);
}

.durrell-zoo-hero__lede {
  max-width: 34rem;
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-muted);
  text-wrap: pretty;
}

.durrell-zoo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.durrell-zoo-step { margin: 0; }

.durrell-zoo-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--rich-green);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: 17px;
}

.durrell-zoo-step__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

.durrell-zoo-step__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
}

/* --------------------------------------------------------- choose grid */
.durrell-zoo-choose { margin-block-start: clamp(40px, 6vw, 64px); }

.durrell-zoo-choose__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.durrell-zoo-choose__title {
  margin: 0;
  color: var(--wp--preset--color--rich-green);
}

.durrell-zoo-choose__price {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--ink-faint);
}

/* An explicit 2-column grid, not auto-fit: auto-fit wrongly allows a third
   card at wide viewports, which breaks the 2×2 rhythm the design relies on. */
.durrell-zoo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* core/post-template-style flow margins would inflate a grid row. */
.durrell-zoo-grid > li { margin: 0; display: flex; }

/* ------------------------------------------------------------ the card */
.durrell-zoo-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .55);
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
}

/* A ring rather than a border on the card: a border would change the box on
   every toggle and shift the whole grid by a pixel. */
.durrell-zoo-card__ring {
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-radius: var(--wp--custom--radius--card);
  pointer-events: none;
  z-index: 2;
  transition: border-color .18s ease;
}

.durrell-zoo-card.is-picked .durrell-zoo-card__ring { border-color: var(--durrell-species); }

.durrell-zoo-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
}

.durrell-zoo-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.durrell-zoo-card__media:hover .durrell-zoo-card__photo { transform: scale(1.04); }

/* Lighter than the Adopt page's scrim: only the tags sit over this one, not
   body copy. */
.durrell-zoo-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .02) 58%, transparent);
}

.durrell-zoo-card__tags {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.durrell-zoo-card__status {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  padding: 5px 12px;
  border-radius: var(--wp--custom--radius--pill);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(4px);
  color: var(--wp--preset--color--white);
  font-size: 12px;
  font-weight: 700;
}

.durrell-zoo-card__tick {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--wp--preset--color--white);
  pointer-events: none;
}

.durrell-zoo-card.is-picked .durrell-zoo-card__tick {
  background: var(--wp--preset--color--brand-yellow);
  border-color: var(--wp--preset--color--brand-yellow);
  color: var(--durrell-species);
}

/* One glyph and one label are shown at a time; both ship so the script never
   has to write text. */
.durrell-zoo-card__tick-on,
.durrell-zoo-card__pill-on { display: none; }

.durrell-zoo-card.is-picked .durrell-zoo-card__tick-add,
.durrell-zoo-card.is-picked .durrell-zoo-card__pill-off { display: none; }

.durrell-zoo-card.is-picked .durrell-zoo-card__tick-on,
.durrell-zoo-card.is-picked .durrell-zoo-card__pill-on { display: inline; }

.durrell-zoo-card__tick svg { display: block; }

.durrell-zoo-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
}

.durrell-zoo-card__blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-muted);
  text-wrap: pretty;
}

.durrell-zoo-card__facts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-zoo-card__facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-zoo-card__facts svg {
  flex: none;
  margin-block-start: 1px;
  color: var(--durrell-species);
}

.durrell-zoo-card__facts strong { color: var(--wp--preset--color--ink); }

.durrell-zoo-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(226, 191, 180, .5);
}

.durrell-zoo-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--brand-yellow);
  color: var(--durrell-species);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
}

.durrell-zoo-card.is-picked .durrell-zoo-card__pill {
  background: var(--durrell-species);
  color: var(--wp--preset--color--brand-yellow);
}

.durrell-zoo-card__pill-icon { display: inline-flex; }
.durrell-zoo-card__pill-icon svg { display: block; }

.durrell-zoo-card__link {
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--durrell-species);
}

.durrell-zoo-card__price {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--wp--preset--color--ink);
}

/* Orange is invisible against dark photography, so cards take yellow. */
.durrell-zoo-card__media:focus-visible,
.durrell-zoo-card__pill:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-yellow);
  outline-offset: 3px;
}

/* --------------------------------------------------------- "Your zoo" */
.durrell-zoo-panel {
  margin-block-start: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(226, 191, 180, .55);
  border-radius: var(--wp--custom--radius--card);
}

.durrell-zoo-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}

.durrell-zoo-panel__title { margin: 0; color: var(--wp--preset--color--rich-green); }

.durrell-zoo-panel__count {
  margin: 0;
  font-size: 15px;
  color: var(--wp--preset--color--ink-faint);
}

/* Required, not optional: an empty white card reads as broken. */
.durrell-zoo-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--wp--preset--color--cream);
  border-radius: var(--wp--custom--radius--panel);
}

.durrell-zoo-empty__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--rich-green);
}

.durrell-zoo-empty p {
  margin: 0;
  font-size: 15px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-zoo-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-zoo-rows:has(> li:not([hidden])) { margin-block-end: 4px; }

.durrell-zoo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  padding: 14px 16px;
  background: var(--wp--preset--color--cream-soft);
  border-radius: 16px;
}

.durrell-zoo-row__tag {
  font-size: 19px;
  line-height: 1.15;
  padding: 3px 12px 5px;
  border-radius: var(--wp--custom--radius--tag);
  transform: rotate(-1.5deg);
}

.durrell-zoo-row__status {
  font-size: 14px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-zoo-row__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
}

.durrell-zoo-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.durrell-zoo-stepper button,
.durrell-zoo-row__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: background-color .15s ease;
}

.durrell-zoo-stepper button:hover { background: var(--wp--preset--color--brand-yellow); }

.durrell-zoo-stepper__qty {
  min-width: 18px;
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 16px;
}

.durrell-zoo-row__line {
  min-width: 66px;
  text-align: end;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 16px;
}

.durrell-zoo-row__remove {
  background: transparent;
  opacity: .65;
}

.durrell-zoo-row__remove:hover { opacity: 1; background: var(--wp--preset--color--cream); }

.durrell-zoo-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-block-start: 22px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(226, 191, 180, .55);
}

.durrell-zoo-total__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
}

.durrell-zoo-total__label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-faint);
}

.durrell-zoo-total__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Its own styles rather than .durrell-pill-button: that class only dresses a
   descendant .wp-block-button__link, so an element carrying it directly gets
   no styling at all. */
.durrell-zoo-total__button {
  display: inline-block;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--adoption-orange);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.durrell-zoo-total__button:hover,
.durrell-zoo-total__button:focus { color: var(--wp--preset--color--white); }

.durrell-zoo-panel__note {
  font-size: 12px;
  font-style: italic;
  color: var(--wp--preset--color--ink-faint);
}

.durrell-zoo-panel__note { margin: 14px 0 0; }

/* -------------------------------------------------------- sticky tray */
/* Sticky rather than fixed — see render.php. It pins to the bottom of the
   viewport while the builder is on screen and comes to rest at the top of the
   footer, so no page-end clearance (and no gap under the footer) is needed. */
.durrell-zoo-tray {
  position: sticky;
  inset-block-end: 0;
  z-index: 40;
  padding: 14px clamp(20px, 4vw, 40px);
  background: rgba(45, 49, 46, .97);
  backdrop-filter: blur(8px);
  /* Once it parks on the footer the two dark bands touch and read as one
     block; the hairline keeps the tray legible as its own bar. */
  border-block-end: 1px solid rgba(255, 255, 255, .14);
}

.durrell-zoo-tray__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  /* Matches .durrell-zoo so the tray's contents line up with the page above. */
  max-width: 1280px;
  margin-inline: auto;
}

.durrell-zoo-tray__label {
  margin: 0;
  color: var(--wp--preset--color--brand-yellow);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.durrell-zoo-tray__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-zoo-tray__tags li { margin: 0; }

.durrell-zoo-tray__tags .durrell-name-tag {
  font-size: 15px;
  line-height: 1.15;
  padding: 2px 10px 4px;
  border-radius: var(--wp--custom--radius--tag-small);
  transform: rotate(-1.5deg);
}

.durrell-zoo-tray__total {
  margin: 0 0 0 auto;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 20px;
}

/* Yellow with dark text — the inverse of the orange CTA in the panel, so the
   two never read as the same button in two places. */
.durrell-zoo-tray__cta {
  display: inline-block;
  padding: 11px 24px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--brand-yellow);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.durrell-zoo-tray__cta:hover,
.durrell-zoo-tray__cta:focus { color: var(--wp--preset--color--ink); }

/* A sticky tray occupies its own space at the end of the block, so it needs no
   page-end clearance: it can never cover the footer or the last CTA. */

/* ------------------------------------------------------------ responsive */
@media (max-width: 820px) {
  .durrell-zoo-grid { grid-template-columns: 1fr; }
  .durrell-zoo-steps { grid-template-columns: 1fr; gap: 20px; }
  .durrell-zoo-hero__leaf { width: 60%; opacity: .12; }
}

@media (max-width: 640px) {
  .durrell-zoo-tray__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .durrell-zoo-tray__tags { justify-content: center; }
  .durrell-zoo-tray__total { margin: 0; }
  .durrell-zoo-row__controls { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .durrell-zoo-total { flex-direction: column; align-items: stretch; }
  .durrell-zoo-total__cta { align-items: stretch; }
}

/* ------------------------------------- checkout: multi-animal line items */
/* The order can hold several species now, so the summary leads with what is
   actually being bought before it lists what arrives in the pack. */
.durrell-summary__title--sub {
  font-size: 17px;
  color: var(--wp--preset--color--ink);
}

.durrell-summary__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.durrell-summary__item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 14px;
  background: var(--wp--preset--color--cream-soft);
  border-radius: 14px;
}

.durrell-summary__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
}

.durrell-summary__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.durrell-summary__item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.durrell-summary__item-tag {
  font-size: 17px;
  line-height: 1.15;
  padding: 2px 11px 4px;
  border-radius: var(--wp--custom--radius--tag);
  transform: rotate(-1.5deg);
}

.durrell-summary__item-meta {
  font-size: 13px;
  color: var(--wp--preset--color--ink-muted);
}

.durrell-summary__item-line {
  margin-inline-start: auto;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

/* With no photograph above it, the summary card needs its own top edge. */
.durrell-checkout.is-multi .durrell-summary__card { padding-block-start: 4px; }

/* ==========================================================================
   Payment processing — TEMPORARY demo page
   Delete with blocks/processing when a real payment provider is connected.
   ========================================================================== */
.durrell-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--wp--custom--section--padding-block) var(--wp--custom--section--padding-inline);
}

.durrell-processing__inner {
  max-width: 34rem;
  text-align: center;
}

.durrell-processing__spinner {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  border: 5px solid var(--wp--preset--color--border-warm);
  border-block-start-color: var(--wp--preset--color--rich-green);
  border-radius: 50%;
  animation: durrell-spin 1s linear infinite;
}

@keyframes durrell-spin {
  to { transform: rotate(360deg); }
}

/* The global prefers-reduced-motion block kills the animation, which would
   leave a ring that reads as a static decoration. Give it a visible gap
   instead so it still says "in progress" without moving. */
@media (prefers-reduced-motion: reduce) {
  .durrell-processing__spinner {
    border-block-start-color: var(--wp--preset--color--rich-green);
    border-inline-end-color: var(--wp--preset--color--rich-green);
  }
}

.durrell-processing__title {
  margin: 0 0 12px;
  color: var(--wp--preset--color--rich-green);
}

.durrell-processing__lede {
  margin: 0 0 24px;
  font-size: 17px;
  color: var(--wp--preset--color--ink-muted);
}

/* Deliberately loud. Nobody should be able to mistake this for a real
   payment step, whether they arrived by demo or by accident. */
.durrell-processing__demo {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--wp--preset--color--brand-yellow);
  border-radius: var(--wp--custom--radius--panel);
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-wrap: pretty;
}

.durrell-processing__manual {
  margin: 0;
  font-size: 14px;
}

/* ------------------------------------------- checkout validation feedback */
/* Added with the payment integration: the form now validates server-side and
   re-renders with the customer's values intact, so errors need somewhere to
   live beside their field. */
.durrell-checkout__notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--wp--preset--color--brand-yellow);
  border-radius: var(--wp--custom--radius--panel);
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-wrap: pretty;
}

.durrell-field__error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  /* The darkened orange used for links — the brand orange fails AA on cream,
     and an error message is the last thing that should be hard to read. */
  color: var(--wp--custom--link--default);
}

.durrell-field.has-error input,
.durrell-field.has-error select,
.durrell-field.has-error textarea {
  border-color: var(--wp--custom--link--default);
}

.durrell-fieldset {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}

.durrell-fieldset legend {
  padding: 0;
  font-weight: 600;
}