/*
 * THE HOUSE STYLE, OVER EVERY WORDPRESS REPLICA.
 *
 * Amir, 2026-09-24: "without changing too much the core structure ... the
 * wording 90% stays the same ... Look at my hero banner how amazing it is.
 * That is the level of quality I want."
 *
 * The replicas (components/WpReplica.tsx) are WordPress's own pages under
 * their own scoped stylesheets. This sheet is loaded AFTER them and moves
 * them into the hero's design language -- Fraunces display headings, one
 * sans (Manrope), warm paper tints instead of WordPress's cold blue, pill
 * buttons, soft-cornered photos -- WITHOUT touching a word or moving a
 * section. Layout stays WordPress's; the finish becomes the hero's.
 *
 * Why !important appears here: every WordPress rule is scoped to its own
 * replica and many are per-element (`.elementor-1279 .elementor-element-xyz
 * .title`), i.e. far more specific than any house rule could be. The
 * !important properties are the ones the house style must own everywhere:
 * the typefaces, the button shape, and the heading colour on light ground.
 *
 * The palette pass (the builder's `house_palette`) is the other half: it
 * rewrites WordPress's six near-identical blues to the one brand blue and
 * justified text to left-aligned, inside the replica sheets themselves.
 */

/* -------------------------------------------------------------- tokens -- */
.wpr {
  --wh-ink: #0a083b;
  --wh-ink-soft: #4b4c61;
  --wh-brand: #1a5ed6;
  --wh-brand-deep: #134aad;
  --wh-paper: #f7f2e9;
  --wh-paper-2: #efe7d8;
  --wh-line: #e3d8c4;
  --wh-teal: #128c85;
  --wh-amber: #ffb71a;
  --wh-display: var(--font-fraunces), Fraunces, Georgia, "Times New Roman", serif;
  --wh-sans: var(--font-manrope), Manrope, ui-sans-serif, system-ui, sans-serif;
  --wh-radius: 20px;
  --wh-shadow: 0 1px 2px rgb(10 8 59 / 0.06), 0 12px 32px -12px rgb(10 8 59 / 0.18);
}

/* WordPress's own global kit, re-pointed. These variables are declared on the
   replica's <body> stand-in, so they are set there, not on .wpr. */
.wpr .wpr-body[class] {
  --e-global-color-secondary: #1a5ed6 !important;
  --e-global-color-accent: #1a5ed6 !important;
  --e-global-color-ed1631c: #4d9cff !important;
  --e-global-color-6ef4afc: #f7f2e9 !important;   /* was #E8F2FF, the cold wash */
  --e-global-color-4437370: #b08a4a14 !important; /* was a 8% blue */
  --e-global-color-1bf83b3: #0d6f69 !important;   /* teal: #128c85 was 4.11:1 on white (axe, 2026-09-25); this is 6.0:1 */
  --e-global-color-33b2a8b: #e3d8c4 !important;   /* hairlines, warm */
  --e-global-color-33ec445: #616276 !important;   /* faint text, AA */
  --e-global-color-text: #4b4c61 !important;
  --ast-global-color-0: #1a5ed6 !important;
  --ast-global-color-1: #134aad !important;
  --swiper-theme-color: #1a5ed6;
  font-family: var(--wh-sans);
  color: var(--wh-ink-soft);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- typography -- */
/* NO COLOUR IS SET HERE ON TEXT THAT CAN INHERIT IT. A rule that colours a
   paragraph or heading directly beats the white it would inherit from a dark
   band, and that is how the vets page got grey copy on blue (2026-09-24).
   Colour belongs to the palette pass in the builder, which rewrites
   WordPress's own colour where WordPress set it. */
/* One sans. WordPress mixed Manrope, Poppins and system fonts page to page. */
.wpr :is(p, li, td, th, dd, dt, blockquote, figcaption, label, input, select, textarea, button,
  .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-image-box-description,
  .elementor-icon-box-description, .elementor-tab-content, .elementor-toggle-content,
  .elementor-accordion .elementor-tab-content, .elementor-price-table__feature-inner,
  .elementor-testimonial-content, .elementor-counter-title, .e-n-tab-title, .e-n-accordion-item-title) {
  font-family: var(--wh-sans) !important;
}

/* Section headings wear the hero's display face. */
.wpr :is(h1, h2, .wpr-h1):not(.elementor-price-table__heading) {
  /* SOFT 30 is its own cut (app/layout.tsx); the SOFT 0 Fraunces stands in while it loads. */
  font-family: var(--font-fraunces-soft), var(--wh-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}
.wpr :is(h3, h4, h5, h6) {
  font-family: var(--wh-sans) !important;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Reading text: a touch more air and a darker, warmer grey. */
.wpr :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) :is(p, li) {
  line-height: 1.75;
  text-wrap: pretty;
}

/* Links inside prose: the brand blue with a soft underline, never bare. */
.wpr :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content)
  a:not(.elementor-button):not(.button):not(:has(img)) {
  color: var(--wh-brand);
  text-decoration: underline;
  text-decoration-color: rgb(26 94 214 / 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.wpr :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content)
  a:not(.elementor-button):not(.button):hover {
  text-decoration-color: currentColor;
}

/* Bullets and numbers in the brand colour. */
.wpr :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) li::marker {
  color: var(--wh-brand);
  font-weight: 700;
}

/* ------------------------------------------------------------- buttons -- */
/* The hero's pill. Every WordPress button family: Elementor, blocks, Woo,
   PowerPack, ElementsKit. */
.wpr :is(.elementor-button, .wp-block-button__link, .button, a.button, button.button,
  .elementor-price-table__button, .pp-button, .ekit-btn, .elementor-post__read-more,
  input[type="submit"], button[type="submit"]) {
  border-radius: 999px !important;
  font-family: var(--wh-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}
.wpr :is(.elementor-button, .wp-block-button__link, .button, .elementor-price-table__button,
  .pp-button, input[type="submit"], button[type="submit"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgb(26 94 214 / 0.55);
}
/* The hero's round arrow chip, on the solid call-to-action buttons. */
.wpr .elementor-button:not(:has(.elementor-button-icon))
  .elementor-button-text::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
  font-size: 0.85em;
  line-height: 1;
  vertical-align: 0.05em;
}

/* --------------------------------------------------------------- media -- */
.wpr :is(.elementor-widget-image, .wp-block-image, .elementor-widget-theme-post-featured-image,
  .elementor-image-box-img, figure.wp-caption, .elementor-widget-image-gallery) img {
  border-radius: var(--wh-radius);
}
.wpr .elementor-widget-video :is(.elementor-wrapper, .elementor-open-inline),
.wpr .elementor-widget-video iframe {
  border-radius: var(--wh-radius);
  overflow: hidden;
}

/* --------------------------------------------------------------- cards -- */
/* Icon boxes and image boxes read as the hero's cards: soft corner, warm
   hairline, a lift on hover. */
.wpr :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container {
  border-radius: var(--wh-radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wpr :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container:hover {
  transform: translateY(-2px);
}
.wpr .elementor-icon-box-title,
.wpr .elementor-image-box-title {
  font-weight: 800;
}
/* Elementor's boxed containers and columns with a card look (shadow or
   background) get the house radius. */
.wpr :is(.e-con, .elementor-column > .elementor-widget-wrap, .elementor-section) {
  border-radius: 0;
}

/* ----------------------------------------------------- tabs, toggles --- */
.wpr :is(.elementor-accordion-item, .elementor-toggle-item, .e-n-accordion-item) {
  border-radius: 16px;
  overflow: hidden;
}
.wpr :is(.elementor-tab-title, .elementor-toggle-title, .e-n-accordion-item-title-text) {
  font-family: var(--wh-sans) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------- price cards -- */
/* EACH CARD IN ITS OWN COLOUR AGAIN (2026-09-30). On 2026-09-24 the four
   boarding bands and the four grooming services were made "one family" -- an
   ink header on every card. Sam, on /pricing/: "it should have different
   colors for the different birds, small, medium, large and extra large ...
   same thing for the groomings ... why is it so plain, they used to be so nice
   before." So the cards wear WordPress's own hues again -- boarding cyan,
   orange, green, purple; grooming green, magenta, brown, indigo -- each a shade
   deeper where WordPress's own failed white text (cyan #00BCFF was 2.2:1, the
   orange 2.8:1), so the header and its small print pass WCAG AA (4.5:1+). The
   price takes the card's colour too, so a band is recognisable from its
   number. Keyed on Elementor's data-id, which the builder keeps across
   rebuilds; an unknown card falls back to ink. */
.wpr .elementor-widget-price-table {
  --bst-card: var(--wh-ink);
  --e-price-table-header-background-color: var(--bst-card) !important;
}
.wpr .elementor-element-7223e41 { --bst-card: #0275b5; } /* small birds    (WordPress #00BCFF) */
.wpr .elementor-element-3362b2f { --bst-card: #b45309; } /* medium birds   (#E1860B) */
.wpr .elementor-element-6aad969 { --bst-card: #3f7a0a; } /* large birds    (#5B9B08) */
.wpr .elementor-element-915b284 { --bst-card: #8d158c; } /* XL birds       (#8D158C) */
.wpr .elementor-element-096e682 { --bst-card: #087a2a; } /* nail clipping  (#098D30) */
.wpr .elementor-element-c3badd0 { --bst-card: #ae05a4; } /* wing clipping  (#AE05A4) */
.wpr .elementor-element-fa32aaa { --bst-card: #964f0a; } /* beak trimming  (#964F0A) */
.wpr .elementor-element-fd2a166 { --bst-card: #0a0d96; } /* DNA sexing     (#0A0D96) */
.wpr .elementor-price-table {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--wh-shadow);
  border: 1px solid var(--wh-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wpr .elementor-price-table:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(10 8 59 / 0.06), 0 22px 44px -16px rgb(10 8 59 / 0.28);
}
.wpr .elementor-price-table__header {
  background: linear-gradient(160deg, var(--bst-card) 0%, color-mix(in srgb, var(--bst-card) 82%, #000) 100%) !important;
}
.wpr .elementor-price-table__heading {
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.wpr .elementor-price-table__subheading {
  color: rgb(255 255 255 / 0.78) !important;
}
.wpr .elementor-price-table__integer-part,
.wpr .elementor-price-table__currency,
.wpr .elementor-price-table__fractional-part {
  font-family: var(--wh-display) !important;
  color: var(--bst-card, var(--wh-ink)) !important;
}
.wpr .elementor-price-table__button {
  background-color: var(--wh-brand) !important;
  color: #fff !important;
}

/* ------------------------------------------------ WooCommerce product -- */
.wpr ul.products li.product {
  border-radius: var(--wh-radius);
  transition: transform 0.25s ease;
}
.wpr ul.products li.product:hover {
  transform: translateY(-3px);
}
.wpr ul.products li.product img {
  border-radius: 16px;
}
.wpr ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wh-sans) !important;
  color: var(--wh-ink);
}
.wpr .onsale {
  border-radius: 999px !important;
  background: var(--wh-amber) !important;
  color: var(--wh-ink) !important;
  font-weight: 800 !important;
}

/* ------------------------------------------ a block-editor page body -- */
/* A page WordPress built in the block editor rather than Elementor (/lovebirds/,
   the legal pages) sits in Astra's container, which here is 3000px wide: on a
   laptop its text ran edge to edge, ~1,350px lines with no margin (2026-10-01).
   It gets a reading column. Elementor bodies are left alone -- their sections
   carry full-width backgrounds of their own. */
.wpr .entry-content:not(:has(.elementor)) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 820px;
  padding-inline: 20px;
}
/* WordPress left nine one-item lists with nothing in them at the foot of
   /lovebirds/: a column of bare bullets. An empty item, and a list of only
   empty items, are not drawn. */
.wpr li:empty,
.wpr :is(ul, ol):not(:has(> li:not(:empty))):has(> li) {
  display: none;
}

/* ------------------------------------------------------------- tables -- */
.wpr .entry-content table,
.wpr .elementor-widget-text-editor table,
.wpr .elementor-widget-theme-post-content table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wh-line);
  border-radius: 16px;
  overflow: hidden;
}
.wpr :is(.entry-content, .elementor-widget-text-editor, .elementor-widget-theme-post-content) th {
  background: var(--wh-paper-2);
  color: var(--wh-ink);
}
/* /how-to-care-for-conures/'s two green section headings (#19bd43, 2.5:1 on
   white -- axe color-contrast, bug #770): the same green, dark enough to read
   (#137a33, 5.4:1). */
.wpr[data-wpr-css="how-to-care-for-conures"] :is(.elementor-element-2fed171, .elementor-element-ef89a70) .elementor-heading-title {
  color: #137a33 !important;
}
/* On a phone a three-column table in a post left one or two words per line
   ("Birds / per / non- / commercial / movement", 2026-10-01): tighter cells
   and a slightly smaller face give each column its words back. */
@media (max-width: 639px) {
  .wpr :is(.entry-content, .elementor-widget-text-editor, .elementor-widget-theme-post-content) :is(th, td) {
    font-size: 0.86rem !important;
    hyphens: auto;
    line-height: 1.45 !important;
    padding: 8px 9px !important;
  }
}

/* ------------------------------------------------------ scroll reveal -- */
/* WpEnhance adds .wh-reveal only to sections that start BELOW the fold, and
   removes it as each one arrives -- so nothing is ever hidden if the script
   does not run, and nothing above the fold ever waits. */
@media (prefers-reduced-motion: no-preference) {
  .wpr .wh-reveal {
    opacity: 0;
    transform: translateY(18px);
  }
  .wpr .wh-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* ---------------------------------------------------- the depth pass -- */
/* 2026-09-28, /about-us/ and /pricing/ ONLY (every selector names its replica,
   so none of this reaches the ~230 others). The cards WordPress laid out in a
   row are DEALT as they come up the screen -- each rises and grows into place,
   one column after the next -- by a scroll-driven animation behind the same two
   gates as app/globals.css §11 (keyframes `bst-dp-deal` there): translate and
   scale only, so a card that is half-way is still a whole card.

   THE IO FADE STANDS DOWN FOR EXACTLY THE SECTIONS THAT ARE DEALT. WpEnhance's
   `.wh-reveal` fades a whole section in on a 0.7s timer; stacked on the deal
   it hid the first frames of it and blurred the column-by-column stagger into
   one fade. Everywhere else, and wherever scroll-driven animation or motion is
   not available, it is untouched. No price moves or counts: the tables arrive,
   the figures on them never change. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* WORDPRESS'S `body { overflow-x: hidden }` IS ON THE REPLICA'S BODY
       STAND-IN (`.wpr-body`), AND IT SILENTLY DISABLED EVERY DEAL BELOW.
       `hidden` makes a scroll container -- overflow-x: hidden forces
       overflow-y: auto -- so each card's view() measured itself against a box
       that never scrolls, and sat at its finished frame for ever: measured
       0px of travel by tools/verify_depth.py on the first run. `clip` clips
       the same without being a scroller; `flow-root` keeps the formatting
       context `hidden` gave it, so no margin collapses through. */
    .wpr:is([data-wp-replica="about-us"], [data-wp-replica="pricing"]) .wpr-body {
      display: flow-root;
      overflow-x: clip;
    }
    .wpr[data-wp-replica="about-us"] .elementor-element-2f5cce29.wh-reveal,
    .wpr[data-wp-replica="pricing"] :is(.elementor-element-7522402, .elementor-element-1ad86f7c, .elementor-element-baaf1c8).wh-reveal {
      opacity: 1;
      transform: none;
    }

    /* /about-us/ "How we look after your bird": six flip boxes, 3 x 2. */
    .wpr[data-wp-replica="about-us"] .elementor-widget-flip-box {
      --dp-rise: 80px;
      --dp-from: 0.9;
      animation: bst-dp-deal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    .wpr[data-wp-replica="about-us"] .elementor-inner-column:nth-child(2) .elementor-widget-flip-box {
      animation-range: entry 8% entry 70%;
    }
    .wpr[data-wp-replica="about-us"] .elementor-inner-column:nth-child(3) .elementor-widget-flip-box {
      animation-range: entry 16% entry 78%;
    }

    /* /pricing/: the four boarding tables and the four grooming tables. */
    .wpr[data-wp-replica="pricing"] .elementor-widget-price-table {
      --dp-rise: 110px;
      --dp-from: 0.9;
      animation: bst-dp-deal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .wpr[data-wp-replica="pricing"] .elementor-top-column:nth-child(2) .elementor-widget-price-table {
      animation-range: entry 6% entry 46%;
    }
    .wpr[data-wp-replica="pricing"] .elementor-top-column:nth-child(3) .elementor-widget-price-table {
      animation-range: entry 12% entry 52%;
    }
    .wpr[data-wp-replica="pricing"] .elementor-top-column:nth-child(4) .elementor-widget-price-table {
      animation-range: entry 18% entry 58%;
    }
    /* ON A PHONE THE TABLES ARE A SWIPE ROW (the "Price cards on a phone"
       rule below) -- a horizontal scroll container, against which a table's
       own view() never moves. So there the ROW is dealt, as one, on its own
       timeline; the card you swipe to is already home. */
    @media (max-width: 767px) {
      .wpr[data-wp-replica="pricing"] .elementor-widget-price-table {
        animation: none;
      }
      .wpr[data-wp-replica="pricing"] .elementor-container:has(> .elementor-col-25 .elementor-widget-price-table) {
        --dp-rise: 110px;
        --dp-from: 0.9;
        animation: bst-dp-deal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
    }

    /* /pricing/: "Can't bring your own cage?" and "Have multiple birds?", one
       after the other. Vertical only: a sideways deal would widen the page
       while it runs -- a transform counts toward scrollable overflow. */
    .wpr[data-wp-replica="pricing"] .elementor-element-1ad86f7c > .elementor-container > .elementor-column {
      --dp-rise: 90px;
      --dp-from: 0.9;
      animation: bst-dp-deal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .wpr[data-wp-replica="pricing"] .elementor-element-1ad86f7c > .elementor-container > .elementor-column:nth-child(2) {
      animation-range: entry 10% entry 80%;
    }
  }
}

/* ---------------------------------------------------------- page fixes -- */
/* /pricing/: below 1024px WordPress swaps the "Pricing List" section's
   background for a full-bleed photo and sets the list straight on top of it
   -- unreadable on a phone. The house puts it on paper instead. */
@media (max-width: 1024px) {
  .wpr[data-wpr-css="pricing"] .elementor-element-daee797:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: var(--wh-paper) !important;
  }
}

/* /services/: the four service cards wore four unrelated badge colours
   (cyan, coral, magenta, brown). One family now, like the price cards. */
.wpr[data-wpr-css="services"] .elementor-widget-icon-list.elementor-icon-list--layout-inline > .elementor-widget-container {
  background: linear-gradient(160deg, #15124f 0%, var(--wh-ink) 70%) !important;
}

/* Price-card feature lines: WordPress set them at line-height 1, so a
   two-line feature read as one cramped block. */
.wpr .elementor-price-table__feature-inner {
  line-height: 1.5 !important;
}
.wpr .elementor-price-table__features-list li {
  padding-block: 2px;
}

/* /services/: the card bullet copy is 22px light on WordPress -- on a phone
   that is four words a line. Reading size, reading weight. */
@media (max-width: 767px) {
  .wpr[data-wpr-css="services"] .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-text {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
}

/* ------------------------------------------------ FAQ and accordions -- */
/* Essential Addons' accordion (/faq/ and ten more) and PowerPack's FAQ drew
   a flat grey list. The house draws each question as its own soft card; an
   open one lifts and its title takes the brand colour. */
.wpr :is(.eael-adv-accordion .eael-accordion-list, .pp-faq-item) {
  margin-bottom: 12px !important;
  border: 1px solid var(--wh-line) !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.wpr :is(.eael-adv-accordion .eael-accordion-list, .pp-faq-item):hover {
  border-color: #d6c7ab !important;
}
.wpr :is(.eael-accordion-header, .pp-accordion-tab-title) {
  background: #fff !important;
  border: 0 !important;
  padding: 18px 22px !important;
  cursor: pointer;
}
.wpr :is(.eael-accordion-tab-title, .pp-accordion-title-text) {
  font-family: var(--wh-sans) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--wh-ink) !important;
}
.wpr :is(.eael-accordion-header.show, .pp-accordion-tab-title.pp-accordion-tab-active) :is(.eael-accordion-tab-title, .pp-accordion-title-text) {
  color: var(--wh-brand) !important;
}
.wpr :is(.eael-adv-accordion .eael-accordion-list, .pp-faq-item):has(.show, .pp-accordion-tab-active) {
  box-shadow: var(--wh-shadow);
}
.wpr :is(.eael-accordion-content, .pp-accordion-tab-content) {
  background: #fff !important;
  border: 0 !important;
  padding: 0 22px 20px !important;
  color: var(--wh-ink-soft);
  line-height: 1.7;
}
.wpr :is(.eael-accordion-header, .pp-accordion-tab-title) i {
  color: var(--wh-brand) !important;
}
/* The chevron keeps its distance from a long title: on a phone "6. Positioning For Bird
   Nail Trimming" ran straight into it, ">" touching the "g" (phone walk, 2026-10-04). */
.wpr .eael-accordion-header > i.fa-toggle {
  flex: none;
  margin-left: 12px;
}

/* Shop cards: WordPress's buttons were amber with blue text (3:1, and a
   colour the house keeps for sale badges). The house's primary pill. */
.wpr ul.products li.product :is(.button, .add_to_cart_button, .added_to_cart) {
  background: var(--wh-brand) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0.7em 1.3em !important;
}

/* ------------------------------------------------ phone reading size -- */
/* WordPress's theme shrinks the whole page on phones (root 15px -> 13.68px),
   so body copy on a phone was 13.7px -- under every reading guideline and
   smaller than the desktop page. The house holds the root at 16px on phones:
   body copy at the standard phone reading size, and everything WordPress
   sized in rem (spacing included) in proportion. */
@media (max-width: 921px) {
  .wpr[data-wpr-css] {
    font-size: 100% !important;
    --wpr-rem: 16px !important;
  }
}
/* About Us's "Meet Samantha" copy is set at 12px by WordPress itself. */
.wpr[data-wpr-css="about-us"] .elementor-element-bae25be :is(p, .elementor-widget-container) {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------- flip boxes -- */
/* WordPress alternated white and saturated-blue flip-box fronts, and the blue
   ones carried dim-blue titles (under 2:1). The house: every front a white
   card in ink, every back the hero's ink in white -- the flip is the reveal. */
.wpr .elementor-flip-box__front {
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid var(--wh-line);
  border-radius: 22px !important;
}
.wpr .elementor-flip-box__front :is(.elementor-flip-box__layer__title) {
  color: var(--wh-ink) !important;
  font-family: var(--wh-sans) !important;
  font-weight: 800 !important;
}
.wpr .elementor-flip-box__front :is(.elementor-flip-box__layer__description, .elementor-flip-box__layer__description *) {
  color: var(--wh-ink-soft) !important;
}
.wpr .elementor-flip-box__front .elementor-icon :is(i, svg) {
  color: var(--wh-brand) !important;
  fill: var(--wh-brand) !important;
}
.wpr .elementor-flip-box__back {
  background-color: #0a083b !important;
  background-image: linear-gradient(160deg, #15124f 0%, #0a083b 70%) !important;
  border-radius: 22px !important;
}
.wpr .elementor-flip-box__back :is(.elementor-flip-box__layer__title, .elementor-flip-box__layer__description, .elementor-flip-box__layer__description *) {
  color: #fff !important;
}
.wpr .elementor-flip-box__back .elementor-flip-box__layer__title {
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
}
.wpr .elementor-flip-box__back .elementor-icon :is(i, svg) {
  color: #ffb71a !important;
  fill: #ffb71a !important;
}
.wpr .elementor-flip-box__back .elementor-flip-box__button {
  background: #ffb71a !important;
  color: #0a083b !important;
  border: 0 !important;
}

/* /cagerentals/: each cage card wore its own header colour (red, amber,
   green, pink...) and its own price colour. One family, like the price cards:
   an ink header band and the price in ink. */
.wpr[data-wpr-css="cagerentals"] .elementor-widget-icon-list.elementor-icon-list--layout-inline > .elementor-widget-container {
  background: linear-gradient(160deg, #15124f 0%, var(--wh-ink) 70%) !important;
}
.wpr[data-wpr-css="cagerentals"] .elementor-widget-heading h3.elementor-heading-title {
  color: var(--wh-ink) !important;
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
}

/* /services/ on a phone: WordPress stacked the sidebar (service list, photo,
   phone button) ABOVE the service cards, so the page opened on a menu of the
   things it was about to show. Cards first, sidebar after -- same content. */
@media (max-width: 767px) {
  .wpr[data-wpr-css="services"] .elementor-element-45e7d08f {
    order: 2;
  }
}

/* ------------------------------------------------------ post grids -- */
/* Elementor's posts widget reserves each thumbnail's aspect ratio with
   padding and relies on a rule in its own widget stylesheet to lay the image
   absolutely inside that box. That rule never reached the replicas, so every
   "Latest News" card had the image AND an empty box of the same height under
   it (~250px of nothing, on 316 grids). The same behaviour, restored. */
.wpr .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail {
  position: relative;
  overflow: hidden;
}
.wpr .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.wpr .elementor-posts--skin-classic .elementor-post__thumbnail__link {
  border-radius: 16px;
  overflow: hidden;
}

/* ------------------------------------------------ access and anchors -- */
/* Keyboard focus is visible and in the brand colour (WordPress's theme
   removed the outline on most of these). */
.wpr :is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wh-brand) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}
/* A table-of-contents link or a #anchor lands below the sticky header, not
   under it. */
.wpr :is([id], a[name]) {
  scroll-margin-top: 96px;
}
.wpr ::selection {
  background: #ffe2a3;
  color: var(--wh-ink);
}

/* Essential Addons' flip boxes (the three booking steps on /pricing/ and two
   more pages) were violet on purple. The hero's ink both sides; the white
   type they already carry stays. */
.wpr :is(.eael-elements-flip-box-front-container, .eael-elements-flip-box-rear-container) {
  background-color: #0a083b !important;
  background-image: linear-gradient(160deg, #15124f 0%, #0a083b 70%) !important;
  border-radius: 22px !important;
}
.wpr :is(.eael-elements-flip-box-front-container, .eael-elements-flip-box-rear-container) :is(h1, h2, h3, h4) {
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------- forms -- */
/* Booking, contact, waitlist: the pages people actually convert on. Every
   Elementor and WPForms field: soft corners, the warm hairline, 48px tall, a
   16px font (anything smaller makes iOS zoom the page on focus), and a brand
   focus ring. */
.wpr :is(.elementor-field-group, .wpforms-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), select, textarea) {
  border-radius: 12px !important;
  border: 1px solid #d9ccb4 !important;
  background-color: #fff !important;
  min-height: 48px;
  padding: 12px 14px !important;
  font-size: 16px !important;
  color: var(--wh-ink) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpr :is(.elementor-field-group, .wpforms-field) :is(input, select, textarea):focus {
  border-color: var(--wh-brand) !important;
  box-shadow: 0 0 0 4px rgb(26 94 214 / 0.14) !important;
  outline: none !important;
}
.wpr :is(.elementor-field-label, .wpforms-field-label) {
  color: var(--wh-ink) !important;
  font-weight: 700 !important;
  font-family: var(--wh-sans) !important;
}
.wpr :is(.elementor-field-group, .wpforms-field) input[type="file"] {
  border: 1px dashed #d9ccb4 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: #fff !important;
}
.wpr :is(.elementor-field-group, .wpforms-field) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--wh-brand);
  width: 18px;
  height: 18px;
}
/* A long checkbox group (the 14 cage rentals on /booking-page/) as a grid of
   options instead of one tall column. */
.wpr .elementor-field-type-checkbox .elementor-field-subgroup:not(.elementor-subgroup-inline) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 18px;
}
.wpr .elementor-field-type-checkbox .elementor-field-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------- species facts -- */
/* The species template's facts, one card per heading (the builder's
   species_layout groups them; the words and their order are WordPress's). */
/* Columns, not a grid: facts run from one line to a long paragraph, and a
   grid row is as tall as its tallest card -- "Budgies as Pets" left a 300px
   hole beside "Sexing". Columns pack them (reading order runs down each
   column, which suits independent facts). */
.wpr .wh-facts {
  columns: 3 300px;
  column-gap: 18px;
  margin-top: 28px;
}
.wpr .wh-fact {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  padding: 22px 24px 20px;
  border: 1px solid var(--wh-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(10 8 59 / 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wpr .wh-fact:hover {
  transform: translateY(-2px);
  box-shadow: var(--wh-shadow);
}
.wpr .wh-fact > :is(h2, h3, h4, h5):first-child {
  margin: 0 0 8px !important;
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: var(--wh-ink) !important;
  letter-spacing: -0.01em;
}
/* the topic's icon, inside the heading (lib/wp-replica.ts iconFacts) */
.wpr .wh-fact .wh-fact-i {
  align-items: center;
  background: #fff3d6;
  border-radius: 12px;
  display: inline-flex;
  font-family: system-ui, sans-serif;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  margin: 0 10px 0 0;
  vertical-align: -6px;
  width: 36px;
}
.wpr .wh-fact > :is(p, ul, ol) {
  margin: 0 0 8px !important;
  font-size: 15.5px;
  line-height: 1.65;
}
.wpr .wh-fact > :is(p, ul, ol):last-child {
  margin-bottom: 0 !important;
}
/* A card holding nothing but its heading ("Housing:", "Species Overview:" on
   /parrotlets/, the lorikeet's Latin name) is a section title, not an empty card:
   full width, no box (phone walk, 2026-10-04 -- it drew an empty bordered card).
   (0,2,1) beats `.wpr .wh-fact`; lib/species-care.ts never puts guests after one. */
.wpr .wh-fact:not(:has(> :not(h1, h2, h3, h4, h5, h6))) {
  background: none;
  border: 0;
  box-shadow: none;
  column-span: all;
  grid-column: 1 / -1;
  margin: 12px 0 6px;
  padding: 0 4px;
}
.wpr .wh-fact:not(:has(> :not(h1, h2, h3, h4, h5, h6))):hover {
  box-shadow: none;
  transform: none;
}

/* The "Our Services" side panels on /about-us/ and /services/: their button
   labels were typed in mixed case ("nail clipping", "DNA SEXING", "WING
   Clipping") and WordPress hid that behind uppercase. The house's
   sentence-case pills would show the mix, so these two lists keep
   WordPress's uppercase -- one consistent list, not a new wording. */
.wpr[data-wpr-css="about-us"] .elementor-element-50e1c205 .elementor-button,
.wpr[data-wpr-css="services"] .elementor-element-1ff27e5 .elementor-button {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 13px !important;
}

/* Product pages: the description ran the full 1140px (~150 characters a
   line); a reading measure. And WordPress's own "Related Products" heading
   was hidden by its own `.woocommerce-page .elementor-heading-title
   {display:none}`, so four cards appeared under nothing -- shown, in the
   house display face. */
.wpr[data-wpr-css="_product-pages"] .elementor-widget-woocommerce-product-content > .elementor-widget-container {
  max-width: 760px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.7;
}
.wpr[data-wpr-css="_product-pages"] .elementor-widget-heading .elementor-heading-title {
  display: block !important;
  font-family: var(--wh-display) !important;
  font-weight: 600 !important;
  color: var(--wh-ink) !important;
  text-align: center;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------ tablets -- */
/* iPad portrait to landscape (768-1024px). WordPress's layouts jump straight
   from four columns to one, so a tablet got four price cards squeezed until
   the prices clipped. Two up. */
@media (min-width: 640px) and (max-width: 1024px) {
  .wpr .elementor-container:has(> .elementor-col-25 .elementor-widget-price-table) {
    flex-wrap: wrap !important;
  }
  .wpr .elementor-col-25:has(.elementor-widget-price-table) {
    width: 50% !important;
    margin-bottom: 20px;
  }
}
/* Shop cards below desktop: price on its own line and the pill under it,
   instead of a pill that wraps to two lines beside the price. */
@media (max-width: 1024px) {
  .wpr ul.products li.product .price {
    display: block !important;
    margin-bottom: 8px !important;
  }
  .wpr ul.products li.product :is(.button, .add_to_cart_button) {
    display: inline-block !important;
    white-space: nowrap;
  }
}
/* Phones: the card pill was 35px tall -- a 44px tap target (2026-10-02 mobile
   review, tools/mobile_audit.py). Same pill, more height. */
@media (max-width: 767px) {
  .wpr ul.products li.product :is(.button, .add_to_cart_button, .added_to_cart) {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  /* the product name under each photo was an 18px-tall link */
  .wpr ul.products li.product .ast-loop-product__link {
    display: block;
    padding: 6px 0;
  }
}
/* Our number opens a TEXT everywhere (2026-10-01), but WordPress's buttons and
   icon lists still drew a telephone beside it. On an sms: link the glyph is a
   chat bubble (fa-comment, \f075) -- the font is the page's own Font Awesome 5
   Free solid, named in full here. */
.wpr a[href^="sms:"] .fa-phone::before,
.wpr a[href^="sms:"] .fa-phone-alt::before {
  content: "\f075";
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
}
/* WooCommerce's "Default sorting" select posts ?orderby= to WordPress, which
   this site does not read -- a control that does nothing. It also floated
   right and pushed the product grid into two thirds of the width. */
.wpr .woocommerce-ordering {
  display: none !important;
}
.wpr ul.products {
  clear: both;
}

/* A meta-line link that pointed at a WordPress archive this site never built
   is a plain span now (lib/wp-replica.ts unlinkArchives); it keeps the icon
   and the words on one row, the way Elementor laid out the link. */
.wpr .wh-unlinked {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.wpr .elementor-post-info .elementor-icon-list-item {
  align-items: center;
}

/* ---------------------------------------------- "In this guide" box -- */
/* lib/wp-replica.ts postToc: a long post's sections, before the first one. */
.wpr .wh-toc {
  margin: 28px 0 32px;
  padding: 18px 22px 16px;
  border: 1px solid var(--wh-line);
  border-left: 4px solid var(--wh-brand);
  border-radius: 16px;
  background: var(--wh-paper);
}
.wpr .wh-toc > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--wh-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--wh-ink);
}
.wpr .wh-toc > summary::-webkit-details-marker {
  display: none;
}
.wpr .wh-toc > summary::after {
  content: "–";
  float: right;
  color: var(--wh-brand);
}
.wpr .wh-toc:not([open]) > summary::after {
  content: "+";
}
.wpr .wh-toc ol {
  margin: 12px 0 0 !important;
  padding-left: 22px !important;
  columns: 2 260px;
  column-gap: 32px;
}
.wpr .wh-toc li {
  break-inside: avoid;
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.wpr .wh-toc li::marker {
  color: var(--wh-brand);
  font-weight: 700;
}
/* the headings carry their own numbers (lib/wp-replica.ts postToc) */
.wpr .wh-toc ol.wh-toc-own {
  list-style: none !important;
  padding-left: 0 !important;
}
.wpr .wh-toc a {
  color: var(--wh-ink) !important;
  text-decoration: none !important;
  /* A whole row to tap: one-line entries were 21px tall with no gap between
     them on a phone (2026-10-02 mobile review). */
  display: block;
  padding: 11px 0;
}
.wpr .wh-toc li {
  margin-bottom: 0 !important;
}
.wpr .wh-toc a:hover {
  color: var(--wh-brand) !important;
  text-decoration: underline !important;
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.wh-toc) {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------- lightbox -- */
/* components/WpLightbox.tsx. It renders outside .wpr's scope on purpose (a
   fixed overlay), so these rules are not under .wpr. */
.wh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 56px 16px 64px;
  background: rgb(10 8 59 / 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: wh-fade 0.2s ease;
}
.wh-lightbox img {
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
  animation: wh-zoom 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wh-lightbox-cap {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(720px, 90vw);
  margin: 0;
  color: rgb(255 255 255 / 0.85);
  font: 500 14px/1.4 var(--font-manrope), Manrope, sans-serif;
  text-align: center;
}
.wh-lightbox-count {
  position: absolute;
  top: 18px;
  left: 20px;
  margin: 0;
  color: rgb(255 255 255 / 0.7);
  font: 600 13px var(--font-manrope), Manrope, sans-serif;
}
.wh-lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.wh-lightbox button:hover {
  background: rgb(255 255 255 / 0.26);
}
.wh-lightbox-close {
  top: 12px;
  right: 14px;
}
.wh-lightbox-prev {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.wh-lightbox-next {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes wh-fade {
  from { opacity: 0; }
}
@keyframes wh-zoom {
  from { opacity: 0; transform: scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .wh-lightbox, .wh-lightbox img { animation: none; }
}
/* The zoom cursor on photos the lightbox opens (it decides at tap time). */
.wpr :is(.elementor-widget-image, .elementor-widget-theme-post-featured-image, .elementor-widget-theme-post-content,
  .elementor-image-gallery, .elementor-widget-image-carousel, .swiper-slide, .wp-block-image, .elementor-widget-text-editor) img:not(a img) {
  cursor: zoom-in;
}
.wpr .pp-image-slider-thumb-item {
  cursor: zoom-in;
}
/* The species template's "Origin: Australia" line (heading widget 81aef7c)
   as a small badge above the fact cards. */
.wpr .elementor-element-81aef7c .elementor-heading-title {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wh-paper-2);
  color: var(--wh-ink) !important;
  font-family: var(--wh-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* (The author box's third icon was Instagram from 2026-09-25, and its glyph
   was re-declared here. Since 2026-10-04 it is WordPress's own RSS icon again,
   linked to /feed/ (lib/wp-replica.ts liveSocialIcons); every post sheet still
   carries .fa-rss, so nothing needs re-declaring.) */
/* Sidebar category links: a comfortable tap target (Lighthouse target-size). */
.wpr li.cat-item > a {
  display: inline-block;
  padding: 5px 0;
}

/* WordPress's "Latest News" under every post (section 6eaf607d, the same
   three newest posts whatever the article) -- replaced by "Keep reading",
   three posts on the same subject (app/[slug]/page.tsx). */
.wpr .elementor-element-6eaf607d {
  display: none !important;
}

/* /areas-we-serve/: a full-width WordPress template with the content set
   straight in .ast-container -- text and tables ran from edge to edge. A
   reading column, and its drive-time tables as house tables. */
.wpr[data-wpr-css="areas-we-serve"] .ast-container {
  display: block !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 44px 20px 64px !important;
}
.wpr[data-wpr-css="areas-we-serve"] .ast-container > :is(p, ul, h2, h3) {
  max-width: 820px;
}
.wpr[data-wpr-css="areas-we-serve"] .ast-container > h2 {
  margin-top: 44px;
  font-size: 30px !important;
}
.wpr[data-wpr-css="areas-we-serve"] .ast-container > h3 {
  margin-top: 26px;
  font-size: 19px !important;
  color: var(--wh-ink);
}
.wpr[data-wpr-css="areas-we-serve"] table {
  width: 100%;
  margin: 18px 0 8px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wh-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  font-size: 14.5px;
}
.wpr[data-wpr-css="areas-we-serve"] :is(th, td) {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-top: 1px solid var(--wh-line);
}
.wpr[data-wpr-css="areas-we-serve"] th {
  border-top: 0;
  background: var(--wh-paper-2);
  color: var(--wh-ink);
  font-weight: 800;
}
.wpr[data-wpr-css="areas-we-serve"] td:first-child {
  font-weight: 700;
  color: var(--wh-ink);
  white-space: nowrap;
}
.wpr[data-wpr-css="areas-we-serve"] :is(td, th):nth-child(3) {
  white-space: nowrap;
}
/* On a phone the four columns scrolled sideways and the drive time -- the
   column a reader came for -- started off screen. Each region becomes a
   card instead: the region, its towns, then the drive and the clients as
   labelled lines. */
@media (max-width: 700px) {
  .wpr[data-wpr-css="areas-we-serve"] table,
  .wpr[data-wpr-css="areas-we-serve"] tbody,
  .wpr[data-wpr-css="areas-we-serve"] tr,
  .wpr[data-wpr-css="areas-we-serve"] td {
    display: block;
    width: 100%;
  }
  .wpr[data-wpr-css="areas-we-serve"] thead {
    display: none;
  }
  .wpr[data-wpr-css="areas-we-serve"] tr {
    padding: 12px 16px;
    border-top: 1px solid var(--wh-line);
  }
  .wpr[data-wpr-css="areas-we-serve"] tbody tr:first-child {
    border-top: 0;
  }
  .wpr[data-wpr-css="areas-we-serve"] td {
    padding: 2px 0;
    border-top: 0;
    white-space: normal;
  }
  .wpr[data-wpr-css="areas-we-serve"] td:first-child {
    font-size: 16px;
    margin-bottom: 2px;
  }
  .wpr[data-wpr-css="areas-we-serve"] td:nth-child(3)::before {
    content: "Drive to us: ";
    font-weight: 700;
    color: var(--wh-ink);
  }
  .wpr[data-wpr-css="areas-we-serve"] td:nth-child(4)::before {
    content: "Regular clients: ";
    font-weight: 700;
    color: var(--wh-ink);
  }
}

/* /educational-brochures/: eleven AAV brochures as one column of rows split
   by divider lines. A grid of cards: title over its "Learn More" pill. */
.wpr[data-wpr-css="educational-brochures"] .elementor-element-287e469 > .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-element-287e469 > .elementor-widget-wrap > .elementor-widget-divider {
  display: none !important;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-element-287e469 > .elementor-widget-wrap > .elementor-inner-section {
  margin: 0 !important;
  padding: 22px 22px 18px !important;
  border: 1px solid var(--wh-line);
  border-radius: 20px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-element-287e469 > .elementor-widget-wrap > .elementor-inner-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--wh-shadow);
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section > .elementor-container {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px;
  height: 100%;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section .elementor-column {
  width: 100% !important;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section .elementor-heading-title {
  font-family: var(--wh-display) !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section .elementor-heading-title::before {
  content: "PDF";
  display: inline-block;
  margin: 0 10px 2px 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fdecec;
  color: #b3261e;
  font: 800 11px/1.3 var(--wh-sans);
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section .elementor-widget-button {
  margin-top: auto;
}
.wpr[data-wpr-css="educational-brochures"] .elementor-inner-section :is(.elementor-button-wrapper, .elementor-widget-button) {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* ------------------------------------------------------------------ */
/* Contrast (axe, 2026-09-25). WordPress's post excerpts were #777 on */
/* white (4.47:1) and the shop's category line #9394a0 (3:1); both    */
/* take the site's own ink-soft / ink-faint, which pass AA.           */
/* ------------------------------------------------------------------ */
.wpr .elementor-post__excerpt,
.wpr .elementor-post__excerpt p {
  color: #5a5b70 !important;
}
.wpr .ast-woo-product-category {
  color: #616276 !important;
  /* Astra also sets opacity .6, which took the line back under AA (axe,
     48 cards, 2026-10-02 mobile review); the colour alone carries it. */
  opacity: 1 !important;
}

/* The blog cards' author avatar is WordPress's grey default silhouette on
   every card -- a blank face over each photo, and it names nobody. */
.wpr .elementor-post__avatar {
  display: none !important;
}

/* Reading size for a blog post on a laptop. WordPress set the body at 15.75px
   in a 720px column -- about 100 characters a line, small for a care guide
   read end to end. 17.5px brings it to ~88, the comfortable side of the
   usual 60-90 measure. Phones already get 16.8px and are left alone. */
@media (min-width: 1024px) {
  .wpr .elementor-widget-theme-post-content p,
  .wpr .elementor-widget-theme-post-content li {
    font-size: 1.09375rem !important;
    line-height: 1.75 !important;
  }
}

/* ------------------------------------------------------------------ */
/* /bird-rehoming/ and /rehome/ -- the two options read as checklists */
/* rather than raw nested bullets, and the headings wear the house    */
/* ink, not WordPress's green (2026-09-25).                           */
/* ------------------------------------------------------------------ */
.wpr[data-wp-replica="bird-rehoming"] h2,
.wpr[data-wp-replica="rehome"] h2,
.wpr[data-wp-replica="bird-rehoming"] h2 *,
.wpr[data-wp-replica="rehome"] h2 * {
  color: #0a083b !important;
}
.wpr[data-wp-replica="bird-rehoming"] section > h3,
.wpr[data-wp-replica="rehome"] section > h3 {
  border-bottom: 0 !important;
  font-size: 1.35rem;
  color: #1a5ed6;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul,
.wpr[data-wp-replica="rehome"] section > ul {
  list-style: none !important;
  padding-left: 0 !important;
  display: grid;
  gap: 1rem;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > li,
.wpr[data-wp-replica="rehome"] section > ul > li {
  list-style: none !important;
  background: #fff;
  border: 1px solid #e8e3d8;
  border-radius: 18px;
  padding: 1.1rem 1.35rem 1.2rem;
  box-shadow: 0 1px 2px rgb(10 8 59 / 0.04);
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > li > strong,
.wpr[data-wp-replica="rehome"] section > ul > li > strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a5ed6;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > li > ul,
.wpr[data-wp-replica="rehome"] section > ul > li > ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > li > ul > li,
.wpr[data-wp-replica="rehome"] section > ul > li > ul > li {
  list-style: none !important;
  position: relative;
  padding-left: 1.6rem;
  margin: 0.35rem 0;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > li > ul > li::before,
.wpr[data-wp-replica="rehome"] section > ul > li > ul > li::before {
  /* A bird tick (components/birdie/BirdTick.tsx, 2026-10-03). */
  background: var(--bird-tick, var(--bird-tick-2)) center / contain no-repeat;
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container,
.wpr[data-wp-replica="rehome"] section > ul > .table-container {
  margin: 0;
}
/* WordPress left the fee table's <div class="table-container"> unclosed, so
   Option 1's last three blocks are its children, not the list's: same cards. */
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container > li,
.wpr[data-wp-replica="rehome"] section > ul > .table-container > li {
  list-style: none !important;
  background: #fff;
  border: 1px solid #e8e3d8;
  border-radius: 18px;
  padding: 1.1rem 1.35rem 1.2rem;
  margin-top: 1rem;
  box-shadow: 0 1px 2px rgb(10 8 59 / 0.04);
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container > li > strong,
.wpr[data-wp-replica="rehome"] section > ul > .table-container > li > strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a5ed6;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container > li > ul,
.wpr[data-wp-replica="rehome"] section > ul > .table-container > li > ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container > li > ul > li,
.wpr[data-wp-replica="rehome"] section > ul > .table-container > li > ul > li {
  list-style: none !important;
  position: relative;
  padding-left: 1.6rem;
  margin: 0.35rem 0;
}
.wpr[data-wp-replica="bird-rehoming"] section > ul > .table-container > li > ul > li::before,
.wpr[data-wp-replica="rehome"] section > ul > .table-container > li > ul > li::before {
  /* A bird tick (components/birdie/BirdTick.tsx, 2026-10-03). */
  background: var(--bird-tick, var(--bird-tick-2)) center / contain no-repeat;
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
}

/* Blog card dates: #adadad was 2.24:1 (axe). */
.wpr .elementor-post__meta-data,
.wpr .elementor-post-date {
  color: #616276 !important;
}

/* ------------------------------------------------------------------ */
/* Price cards on a phone: a row you swipe, not a 4-card stack        */
/* (2026-09-25). /pricing/ was ~19,500px tall at 390px, most of it    */
/* the same eight features printed under four boarding cards and     */
/* again under four grooming cards. The next card peeks in at the     */
/* edge, which is the "swipe me" cue; snap keeps one card centred.   */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wpr .elementor-container:has(> .elementor-col-25 .elementor-widget-price-table) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 4px 16px 18px !important;
    scrollbar-width: none;
  }
  .wpr .elementor-container:has(> .elementor-col-25 .elementor-widget-price-table)::-webkit-scrollbar {
    display: none;
  }
  .wpr .elementor-col-25:has(.elementor-widget-price-table) {
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: center;
    margin-bottom: 0 !important;
  }
}

/* /booking-page/'s two promo slides were WordPress's saturated green (#059800)
   and royal blue (#216aec); they take the house teal and ink instead. */
.wpr .elementor-element-80180d9 .elementor-repeater-item-efeaea6 .swiper-slide-bg {
  background-color: #128c85 !important;
}
.wpr .elementor-element-b2a399a .elementor-repeater-item-efeaea6 .swiper-slide-bg {
  background-color: #0a083b !important;
}
/* ...and each wears a real photograph under that colour (2026-10-01, "many
   many pages are lacking imagery"): two linnies who boarded together for the
   multi-bird slide, one of the rental cages for the cage slide. The tint keeps
   white type at full contrast; the slow drift is the ken-burns WordPress had
   switched on (`elementor-ken-burns--active`) with its stylesheet purged. */
.wpr .elementor-element-80180d9 .elementor-repeater-item-efeaea6 .swiper-slide-bg {
  background-image:
    linear-gradient(rgb(9 70 66 / 0.8), rgb(9 70 66 / 0.88)),
    url("/_next/image?url=%2Fwp-content%2Fuploads%2F2021%2F11%2F261337914_200168345642911_4324147661335397328_n-768x1024.jpg&w=828&q=75") !important;
}
.wpr .elementor-element-b2a399a .elementor-repeater-item-efeaea6 .swiper-slide-bg {
  background-image:
    linear-gradient(rgb(10 8 59 / 0.8), rgb(10 8 59 / 0.88)),
    url("/_next/image?url=%2Fwp-content%2Fuploads%2F2023%2F06%2F353656644_170870255970240_8041792554928561482_n-scaled.jpg&w=828&q=75") !important;
}
.wpr :is(.elementor-element-80180d9, .elementor-element-b2a399a) .swiper-slide-bg {
  background-position: center !important;
  background-size: cover !important;
}
.wpr :is(.elementor-element-80180d9, .elementor-element-b2a399a) .swiper-slide {
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .wpr :is(.elementor-element-80180d9, .elementor-element-b2a399a) .swiper-slide-bg {
    animation: wpr-drift 22s ease-in-out infinite alternate;
  }
}
@keyframes wpr-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
/* Stacked on a phone, WordPress's two 50px top margins (made for the staggered
   desktop pair) left a 100px white hole between the slides. */
@media (max-width: 767px) {
  .wpr .elementor-element-74483ee > .elementor-widget-wrap,
  .wpr .elementor-element-80180d9 > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* and the section's own 80px top padding was a white strip between the
     cream calendar block and the first band */
  .wpr .elementor-element-3db3b78 {
    padding-top: 0 !important;
  }
}
/* /pricing/ has the same two boxes as columns (3d498bca the cage one, ink;
   6d689925 the multi-bird one, teal): same photographs under the same tints. */
.wpr .elementor-element-3d498bca > .elementor-widget-wrap {
  background-image:
    linear-gradient(rgb(10 8 59 / 0.82), rgb(10 8 59 / 0.9)),
    url("/_next/image?url=%2Fwp-content%2Fuploads%2F2023%2F06%2F353656644_170870255970240_8041792554928561482_n-scaled.jpg&w=828&q=75") !important;
  background-position: center !important;
  background-size: cover !important;
}
.wpr .elementor-element-6d689925 > .elementor-widget-wrap {
  background-image:
    linear-gradient(rgb(9 70 66 / 0.8), rgb(9 70 66 / 0.88)),
    url("/_next/image?url=%2Fwp-content%2Fuploads%2F2021%2F11%2F261337914_200168345642911_4324147661335397328_n-768x1024.jpg&w=828&q=75") !important;
  background-position: center !important;
  background-size: cover !important;
}

/* The blog sidebar's "How To Clip Wings" button: WordPress's coral accent
   (#fe5858), the one off-palette colour left on the replicas. */
.wpr .elementor-element-4c9196b3 .elementor-button,
.wpr .elementor-element-4c9196b3 .elementor-button-text {
  color: #1a5ed6 !important;
}

/* ------------------------------------------------------------------ */
/* /services/ tiles (2026-09-25): the check-list text was ~22px in a  */
/* narrow column, so each tile ran to six-word lines; the first photo */
/* sat centred with bars either side; the price rides on the title.  */
/* ------------------------------------------------------------------ */
.wpr[data-wp-replica="services"] .elementor-icon-list--layout-traditional .elementor-icon-list-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
.wpr[data-wp-replica="services"] .elementor-icon-list--layout-traditional .elementor-icon-list-icon i {
  font-size: 15px !important;
}
.wpr[data-wp-replica="services"] .elementor-icon-list--layout-traditional .elementor-icon-list-item {
  align-items: flex-start !important;
  margin-bottom: 0.4rem;
}
.wpr[data-wp-replica="services"] .elementor-inner-column .elementor-widget-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
}
.wpr .wh-tile-price {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #ffb71a;
  color: #0a083b;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-transform: none;
}
.wpr[data-wp-replica="services"] .elementor-inner-column .elementor-widget-button .elementor-button {
  font-size: 1rem !important;
  font-weight: 800 !important;
}
/* The card bars in Title Case as typed, not capitals (fresh-eyes audit, 2026-10-04): Elementor's
   typography shouted "NAIL CLIPPING", the treatment Amir turned down for "DNA SEXING". */
.wpr[data-wp-replica="services"] .elementor-icon-list--layout-inline .elementor-icon-list-text {
  text-transform: none !important;
}
/* ...and a bar without a price pill (Bird Rehoming) is as tall as one with it (20.8px of pill). */
.wpr[data-wp-replica="services"] .elementor-icon-list--layout-inline .elementor-icon-list-item {
  min-height: 1.3rem;
}

/* ------------------------------------------------------------------ */
/* "Why Bird Sitting Toronto?" -- the eight-item grid on the service  */
/* and grooming pages: each item was ~26px text alone in a tall empty */
/* box. Compact tiles with a tick, like the home page's stay list.    */
/* ------------------------------------------------------------------ */
.wpr .elementor-inner-column.zoomIn:has(> .elementor-widget-wrap > .elementor-widget-text-editor:only-child) > .elementor-widget-wrap {
  padding: 16px 20px !important;
  min-height: 0 !important;
  align-content: center !important;
}
.wpr .elementor-inner-column.zoomIn:has(> .elementor-widget-wrap > .elementor-widget-text-editor:only-child) .elementor-widget-text-editor p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #0a083b !important;
}
.wpr .elementor-inner-column.zoomIn:has(> .elementor-widget-wrap > .elementor-widget-text-editor:only-child) .elementor-widget-text-editor p::before {
  /* A bird tick on a pale disc (components/birdie/BirdTick.tsx, 2026-10-03). */
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bird-tick-2) center / 19px no-repeat, rgb(18 140 133 / 0.12);
}

/* A plain, readable note block used in place of WordPress footnote banners. */
.wpr .wh-note {
  max-width: 1140px;
  margin: 2.5rem auto 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e8e3d8;
  border-left: 4px solid #128c85;
  border-radius: 14px;
  background: #fbf9f4;
  color: #3d3a5c;
  font-size: 1rem;
  line-height: 1.6;
}
.wpr .wh-note p { margin: 0; }
.wpr .wh-note p + p { margin-top: 0.5rem; }
.wpr .wh-note strong { color: #0a083b; }
@media (max-width: 1180px) {
  .wpr .wh-note { margin-left: 16px; margin-right: 16px; }
}

/* /booking-page/: the heading over WordPress's two request forms
   (lib/replica-edits.ts), under the booking hub. */
.wpr .wh-or {
  padding: 3.5rem 16px 0.5rem;
  scroll-margin-top: 96px;
}
.wpr .wh-or-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.wpr .wh-or h2 {
  margin: 0;
  color: #0a083b;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
}
.wpr .wh-or p {
  margin: 0.75rem 0 0;
  color: #5a5b70;
  line-height: 1.6;
}
.wpr .wh-or a {
  color: #1a5ed6;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* /bird-education/: two cards a row on a laptop instead of one card per
   screen, and a shorter photo (WordPress drew each at ~710x500). */
@media (min-width: 1025px) {
  .wpr[data-wp-replica="bird-education"] .elementor-posts-container.elementor-posts--skin-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
  }
}
.wpr[data-wp-replica="bird-education"] .elementor-posts--skin-cards .elementor-post__thumbnail {
  padding-bottom: 58% !important;
}
.wpr[data-wp-replica="bird-education"] .elementor-posts--skin-cards .elementor-post__title,
.wpr[data-wp-replica="bird-education"] .elementor-posts--skin-cards .elementor-post__title a {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}

/* A photo WordPress drew in a box of a different shape is cropped to fit,
   never squashed (2026-09-25: eight photos on two posts at phone width, e.g.
   a 4:3 lovebird photo drawn 341x705). Zero specificity, so any object-fit a
   widget sets on purpose still wins; a photo already the box's shape is
   drawn exactly as before. */
:where(.wpr img) { object-fit: cover; }

/* The "Going away?" box at the top of every post: WordPress's #387EFA is
   3.79:1 against white (axe: serious, fails AA). The site's brand blue is
   5.81:1. Inline styles, hence !important. */
/* `*=`, not `$=`: the buttons carry an anchor or ?service= since 2026-09-25 (content/book.ts). */
.wpr .bst-trust-cta > a[href*="/pricing/"] { background: #1a5ed6 !important; }
.wpr .bst-trust-cta > a[href*="/booking-page/"] { color: #1a5ed6 !important; border-color: #1a5ed6 !important; }
.wpr .bst-trust-cta { border-color: #1a5ed6 !important; }

/* /cagerentals/: the one row of four cages. WordPress gave each column's
   wrap its own side margins (20/10/0 then 0/20), so the third and fourth
   cards touched with no gap (measured 2026-09-25: both edges at x=1005).
   Even 10px each side gives the row the same 20px gutters as the rows of three. */
.wpr[data-wp-replica="cagerentals"] .elementor-inner-section .elementor-col-25 > .elementor-widget-wrap {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* A THUMB-SIZED TARGET FOR EVERY WORDPRESS BUTTON (2026-09-25). Elementor's
   "small" buttons measured 27-28px tall at every width -- "Book grooming" on
   the service pages, "Contact Us" on /bird-rehoming/ -- under the 44px this
   site holds its own buttons to. Height only; the pill, colours and widths are
   the rules above. */
.wpr :is(.elementor-button, .elementor-price-table__button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ------------------------------------------------------------------------- *
 * /pricing/'s jump list ("Pricing List"): WordPress's light blue #4d8bf9 was
 * 2.95:1 on the paper and failed AA (site audit 2026-09-28). Brand blue is
 * 5.5:1. Same selector as Elementor's rule, later in the cascade.
 * ------------------------------------------------------------------------- */
.wpr[data-wpr-css="pricing"] .elementor-1279 .elementor-element.elementor-element-265a84f .elementor-icon-list-text {
  color: #1a5ed6;
}

/* ------------------------------------------------------------------------- *
 * SITE AUDIT 2026-09-28 -- small fixes to WordPress's pages, each scoped.
 * ------------------------------------------------------------------------- */

/* /faq/: every row wore the same bird on BOTH sides, so nothing said a row
   opens. The right-hand bird (the toggle) becomes a +/- chip that flips when
   the row is open (WpEnhance adds `.show` to the open header). */
.wpr[data-wpr-css="faq"] .eael-accordion-header > i.fa-toggle {
  display: none !important;
}
.wpr[data-wpr-css="faq"] .eael-accordion-header::after {
  content: "+";
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--wh-paper-2, #efe9df);
  color: var(--wh-brand, #1a5ed6);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.wpr[data-wpr-css="faq"] .eael-accordion-header.show::after {
  content: "\2013";
}
.wpr[data-wpr-css="faq"] .eael-accordion-tab-title {
  line-height: 1.35 !important;
  padding-right: 8px;
}

/* Six pages carry a pasted ChatGPT page structure (div.flex-1.overflow-hidden
   ... div.markdown.prose). Its class names are Tailwind utilities on THIS
   site, so the chain was being styled as overflow-hidden flex boxes and cut
   the first line of text in half (/bird-boarding-in-toronto/ at 390 and 1440).
   Flattened back to plain blocks. */
.wpr .elementor-widget-text-editor .flex-1.overflow-hidden,
.wpr .elementor-widget-text-editor .flex-1.overflow-hidden div {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  white-space: normal !important;
}

/* /bird-boarding-in-toronto/: the one square dark-grey WordPress button on
   the page becomes the house pill. */
.wpr .eael-creative-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wh-brand, #1a5ed6) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* /past-birdies/: on a phone the history timeline could not be swiped (the
   carousel only moved on two ~20px chevrons). Below 768px it is a native
   swipe row -- the next card peeks in, which is the cue. The chevrons that
   remain on desktop are 44px targets. The pure-black dividers go warm. */
@media (max-width: 767px) {
  .wpr[data-wpr-css="past-birdies"] .twae-slider-container {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .wpr[data-wpr-css="past-birdies"] .twae-slider-wrapper {
    transform: none !important;
    height: auto !important;
    align-items: flex-start;
  }
  .wpr[data-wpr-css="past-birdies"] .twae-story {
    flex: 0 0 82% !important;
    width: 82% !important;
    margin-right: 12px !important;
    scroll-snap-align: center;
  }
  .wpr[data-wpr-css="past-birdies"] :is(.twae-button-prev, .twae-button-next) {
    display: none !important;
  }
}

/* EVERY OTHER CAROUSEL SWIPES TOO (2026-10-01, bug #660): components/
   WpEnhance.tsx turns a slide on a horizontal drag, and `pan-y` is what hands
   it the horizontal ones while a vertical drag still scrolls the page. Not a
   section's background slideshow (scenery, nobody turns it), and not the
   native row above -- `pan-y` there would pin it shut, which is why this lives
   here, read live, rather than set by the script at load. */
.wpr :is(.swiper, .swiper-container):not(.elementor-background-slideshow) {
  touch-action: pan-y;
}
@media (max-width: 767px) {
  .wpr[data-wpr-css="past-birdies"] .twae-slider-container.swiper-container {
    touch-action: auto;
  }
}
.wpr[data-wpr-css="past-birdies"] .twae-horizontal-timeline.twae-wrapper :is(.twae-button-prev, .twae-button-next) {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px;
  background: #fff;
  color: var(--wh-brand, #1a5ed6) !important;
  box-shadow: 0 6px 18px -8px rgba(10, 8, 59, 0.45);
}
.wpr[data-wpr-css="past-birdies"] .elementor-widget-divider {
  --divider-color: var(--wh-line, #cfc6b2) !important;
}

/* A photograph set into a replica's text (site audit 2026-09-28): full width
   on a phone, floated beside the copy on a laptop. */
.wpr .wh-inline-photo {
  margin: 8px 0 24px;
}
.wpr .wh-inline-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 20px;
}
@media (min-width: 1024px) {
  .wpr .wh-inline-photo {
    float: right;
    width: 320px;
    margin: 0 0 16px 32px;
  }
  .wpr .wh-inline-photo img {
    aspect-ratio: 1 / 1;
  }
}

/* ------------------------------------------- phones: blog sidebar (sample) */
/* The post template's sidebar column -- search, the 9 categories and "Our
   Blogs" -- sat below every article on a phone, about 1,100px before "Keep
   reading", which already does its job. Phones only; the laptop is unchanged.
   The column is the theme's own (data-id 4d3a8e3e) and appears only in the
   158 post replicas. */
@media (max-width: 767.98px) {
  .wpr .elementor-element-4d3a8e3e,
  .wpr .elementor-top-column:has(.elementor-element-4d3a8e3e) {
    display: none !important;
  }
}

/* --------------------------------- phones: compact icon rows (sample) ---- */
/* The old WordPress icon boxes (emergency care) and flip boxes (about us)
   stacked one tall white card per screen with 14px text. On a phone they
   become compact rows: the icon on the left, the title and words beside it,
   15px. Nothing is removed -- a flip box's BACK, which a phone could only
   reach by tapping, is shown as a second row under its front. Laptop
   unchanged. */
@media (max-width: 767.98px) {
  .wpr .elementor-widget-icon-box {
    margin-bottom: 10px !important;
  }
  .wpr .elementor-widget-icon-box > .elementor-widget-container {
    margin: 0 !important;
    padding: 14px 16px !important;
  }
  .wpr .elementor-widget-icon-box .elementor-icon-box-wrapper {
    align-items: start !important;
    column-gap: 12px;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    text-align: left !important;
  }
  .wpr .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 3px 0 0 !important;
  }
  .wpr .elementor-widget-icon-box .elementor-icon {
    font-size: 24px !important;
  }
  .wpr .elementor-widget-icon-box .elementor-icon svg {
    height: 24px !important;
    width: 24px !important;
  }
  .wpr .elementor-widget-icon-box .elementor-icon-box-title {
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
  }
  .wpr .elementor-widget-icon-box :is(.elementor-icon-box-description, .elementor-icon-box-description *) {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  /* The containers that wrapped each box in its own big padded card. */
  .wpr .e-con:has(> .elementor-widget-icon-box),
  .wpr .e-con-inner:has(> .elementor-widget-icon-box) {
    gap: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  .wpr .elementor-flip-box {
    height: auto !important;
  }
  .wpr .elementor-flip-box__layer {
    inset: auto !important;
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
  }
  .wpr .elementor-flip-box__layer__overlay {
    min-height: 0 !important;
    padding: 14px 16px !important;
  }
  .wpr .elementor-flip-box__layer__inner {
    align-items: start;
    column-gap: 12px;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    text-align: left !important;
  }
  .wpr .elementor-flip-box__layer__inner > .elementor-icon-wrapper {
    grid-row: span 2;
    margin: 3px 0 0 !important;
  }
  .wpr .elementor-flip-box__layer__inner .elementor-icon {
    font-size: 22px !important;
  }
  .wpr .elementor-flip-box__layer__inner .elementor-icon svg {
    height: 22px !important;
    width: 22px !important;
  }
  .wpr .elementor-flip-box__layer__title {
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
  }
  .wpr :is(.elementor-flip-box__layer__description, .elementor-flip-box__layer__description *) {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .wpr .elementor-flip-box__layer__inner > :not(.elementor-icon-wrapper) {
    grid-column: 2;
  }
  /* The back, shown under its front: a pale row, not a second dark card. */
  .wpr .elementor-flip-box__back {
    background: #f1effd !important;
    background-image: none !important;
    margin-top: 8px;
  }
  .wpr .elementor-flip-box__back :is(.elementor-flip-box__layer__title, .elementor-flip-box__layer__description, .elementor-flip-box__layer__description *) {
    color: #0a083b !important;
  }
  .wpr .elementor-flip-box__back .elementor-icon :is(i, svg) {
    color: #3b5bdb !important;
    fill: #3b5bdb !important;
  }
  .wpr .elementor-flip-box__back .elementor-flip-box__button {
    display: none !important;
  }
  .wpr .elementor-widget-flip-box {
    margin-bottom: 14px !important;
  }

  /* Elementor spacers held 220-389px of nothing open on these pages. */
  .wpr:is([data-wp-replica="services"], [data-wp-replica="about-us"], [data-wp-replica="emergency-care-safety"]) .elementor-widget-spacer .elementor-spacer-inner {
    height: 12px !important;
  }
  /* ...except the four on /services/ that are not empty: each carries a service's
     photograph as its background (Bird Sitting, Nail Clipping, the sidebar's jars).
     At 12px they printed as thin coloured slivers over each card's title (phone
     walk, 2026-10-04); they keep a photograph's height instead. */
  .wpr[data-wp-replica="services"] :is(.elementor-element-452056c, .elementor-element-7ec9e12d, .elementor-element-485d3ff1, .elementor-element-573bd37) .elementor-spacer-inner {
    height: 200px !important;
  }

  /* Reading text on emergency care, 14px -> 15px. */
  .wpr[data-wp-replica="emergency-care-safety"] :is(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li) {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* /about-us/: the second contact form becomes one button to /contact/'s. */
  .wpr .ab-phone-fold {
    display: none !important;
  }
}
/* Its stand-in button is the last line of the flock band (.wh-about-links__msg,
   app/about-us/about.css) since 2026-10-04. */

/* ------------------------- shop: the size and colour chips (sample) ---- */
/* On the shop grid these swatches look like buttons and do nothing (the
   choice happens on the product page). They read as information instead:
   "Sizes: L/XL · S/M" and small colour dots, no borders, no pointer. */
.wpr .cfvsw-shop-container {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 6px !important;
  margin: 6px 0 !important;
  pointer-events: none;
}
.wpr .cfvsw-shop-container[swatches-attr="attribute_pa_size"]::before {
  color: #6b6a86;
  content: "Sizes:";
  font-size: 13px;
  font-weight: 700;
}
.wpr .cfvsw-shop-container[swatches-attr*="colo"]::before {
  color: #6b6a86;
  content: "Colours:";
  font-size: 13px;
  font-weight: 700;
}
.wpr .cfvsw-shop-container .cfvsw-label-option {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #3d3b5c !important;
  font-size: 13px;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.wpr .cfvsw-shop-container .cfvsw-label-option:not(:last-child)::after {
  color: #9a98b0;
  content: "\00a0·";
}
.wpr .cfvsw-shop-container .cfvsw-swatches-option:not(.cfvsw-label-option) {
  border-radius: 999px !important;
  height: 12px !important;
  min-height: 12px !important;
  min-width: 12px !important;
  width: 12px !important;
}
@media (max-width: 767.98px) {
  /* /about-us/: the three flip-box columns kept their desktop padding between them. */
  .wpr[data-wp-replica="about-us"] .elementor-element-2f5cce29 :is(.elementor-inner-column, .elementor-column) > .elementor-widget-wrap {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 719.98px) {
  /* /about-us/: the three link cards (flock, story, past birdies) as compact rows -- photo left, words right. */
  .wpr .wh-about-links .wh-about-links__grid {
    gap: 0.75rem;
  }
  .wpr .wh-about-links .wh-about-card {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .wpr .wh-about-links .wh-about-card__img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 112px;
  }
  .wpr .wh-about-links .wh-about-card__body {
    padding: 0.8rem 0.95rem;
  }
}
@media (max-width: 719.98px) {
  .wpr .wh-about-links .wh-about-card__img {
    position: relative;
  }
  .wpr .wh-about-links .wh-about-card__img img {
    height: 100% !important;
    inset: 0;
    position: absolute;
  }
}

/* ---- Sample 2026-10-03: the author card under every post (lib/wp-replica.ts authorCard). ---- */
.wpr .bst-author {
  align-items: center;
  background: #f6f3ec;
  border: 1px solid #e5e2da;
  border-radius: 20px;
  display: flex;
  gap: 16px;
  padding: 16px;
}
.wpr .bst-author-photo {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  flex: 0 0 auto;
  height: 84px !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 18%;
  width: 84px !important;
}
.wpr .bst-author .elementor-author-box__name {
  margin: 0;
}
.wpr .bst-author-k {
  color: #1d5bd8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 2px;
  text-transform: uppercase;
}
.wpr .bst-author-bio {
  color: #3b3c52;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 6px 0 0;
}
.wpr .bst-author-link {
  color: #1d5bd8;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 800;
  margin-top: 6px;
  min-height: 44px;
  align-items: center;
}
@media (max-width: 767px) {
  .wpr .bst-author {
    align-items: flex-start !important;
  }
  .wpr .bst-author-photo {
    height: 64px !important;
    width: 64px !important;
  }
  /* A post's photo sits under its title, not 124px below it (64px padding + a 60px margin). */
  .wpr-body.post-template-default .content-area.primary {
    padding-top: 8px !important;
  }
  .wpr-body.post-template-default .elementor-location-single > .elementor-top-section:first-child {
    margin-top: 0 !important;
  }
}

/* Sample 2026-10-03: Previous / Next post titles read in full on a phone, not "Should I Tak...". */
@media (max-width: 767px) {
  .wpr .post-navigation__prev--title,
  .wpr .post-navigation__next--title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal !important;
  }
}

/* =====================================================================
   THE EDITORIAL HEADINGS ON WORDPRESS'S OWN SECTIONS (2026-10-03; Amir:
   "the editorial headings site wide"). lib/editorial.ts editorialHtml marks
   a section's h1/h2 `ed-wpr` and wraps its second half in `.ed-accent`. Drawn
   light at the display optical size with the true italic -- at the heading's
   OWN size, and in its OWN colour: a replica section may be white on navy, and
   nothing here knows which, so the accent is the italic, not a colour.
   (0,3,1): the house rule above is (0,3,0) and also !important.
   ===================================================================== */
.wpr :is(h1, h2).ed-wpr.ed-wpr {
  font-family: var(--ed-display) !important;
  font-weight: 330 !important;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
}
.wpr .ed-wpr .ed-accent {
  font-family: var(--ed-italic) !important;
  font-style: italic;
  font-weight: 320 !important;
  font-variation-settings: normal !important;
  color: inherit;
}
/* ...except a fact card's own title. /canaries/ typed its first card's title as
   an h2, so "Types Of Canaries" came out light with an italic half, beside
   "Housing", "Diet" and "Health" in the cards' bold (phone walk, 2026-10-04).
   A card title is a card title, whatever level WordPress gave it. */
.wpr .wh-fact > h2.ed-wpr.ed-wpr:first-child {
  font-family: var(--wh-display) !important;
  font-variation-settings: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.wpr .wh-fact > h2.ed-wpr:first-child .ed-accent {
  font-family: inherit !important;
  font-style: normal;
  font-weight: inherit !important;
}

/* /past-birdies/: the page template's padding and margins (64px + 24px on a
   phone, 60px + 80px + 60px on a laptop) sat as bare white bands above and
   below the timeline's warm section (phone walk, 2026-10-04). The section's own
   padding is the gap now. */
.wpr[data-wpr-css="past-birdies"] .content-area.primary,
.wpr[data-wpr-css="past-birdies"] .ast-article-single {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* /bird-adoption-waitlist/: on a phone Elementor's 10px container gutter put the
   waitlist's own words 6px closer to the screen edge than the page's hero and
   lede above them (the 2026-10-04 phone walk). The site's 16px gutter instead. */
@media (max-width: 767.98px) {
  .wpr[data-wpr-css="bird-adoption-waitlist"] .e-con.e-parent {
    --padding-left: 1rem;
    --padding-right: 1rem;
  }
}

/* /sitemap/: the template's 64px + 24px of top padding left a bare white band
   under the page title, and each link was a 22px row (the 2026-10-04 phone
   walk). The title band is the gap now, and every link is a 44px row. */
.wpr[data-wpr-css="sitemap"] .content-area.primary {
  padding-bottom: 2rem !important;
  padding-top: 1.5rem !important;
}
.wpr[data-wpr-css="sitemap"] .ast-article-single {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
@media (max-width: 767.98px) {
  .wpr[data-wpr-css="sitemap"] :is(.elementor-icon-list-item, .pp-icon-list-item) > a {
    align-items: center;
    min-height: 2.75rem;
  }
}

/* /indian-ringneck/ (phone walk, 2026-10-04). WordPress's closing "Book Indian
   Ringneck Bird Sitting In Toronto" box is a 50% grey overlay over a background
   slideshow that never came across, so it drew as a flat grey slab with blue
   type on it and the Book A Stay button outside it. No picture, no overlay: it
   reads on the page's own paper like the sections above it. The FAQ heading
   loses WordPress's one-off green for the headings' own ink, and on a phone the
   containers' 10px side padding (text 10px from the glass) becomes the 20px the
   care cards above use. */
.wpr[data-wpr-css="indian-ringneck"] .elementor-element.elementor-element-5d40dfc::before {
  display: none !important;
}
.wpr[data-wpr-css="indian-ringneck"] .elementor-element-1199a8d .elementor-heading-title {
  color: inherit !important;
}
@media (max-width: 767px) {
  .wpr[data-wpr-css="indian-ringneck"] .elementor-6406 > .e-con {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}