/*!
 * Petland Pembroke Pines — Theme Refresh design system
 * ---------------------------------------------------------------------------
 * Implements the design published at petland-website-refresh.replit.app.
 *
 * That preview is a React/Tailwind SPA, so there was nothing to lift: this is a
 * re-implementation. It is deliberately NOT Tailwind — the theme is Bootstrap
 * 5.3.3 plus a 9,300-line hand-written style.css, and adding a second utility
 * system would mean maintaining two.
 *
 * TWO RULES THIS FILE FOLLOWS, BOTH LEARNED THE HARD WAY
 *
 * 1. No class may contain the substring "btn-". style.css:8665 carries
 *    `a[class*="btn-"] { color:#1f1433 !important }`, which captures anything
 *    matching that substring and cannot be beaten by specificity. It is what
 *    made the Spanish hero phone button unreadable on its own dark background.
 *    Hence .pp-btn / .pp-btn-primary-solid rather than .pp-btn--primary.
 *
 * 2. Tokens below are explicit values, not var() references to the theme's.
 *    The theme declares :root in four places with conflicting values, and
 *    woocommerce-styles.css is enqueued last and ungated — so sitewide
 *    --primary-dark resolves to #d44b09 and --ink to #2f2442, NOT the #c94600
 *    and #0d0d0d written in style.css. The design uses style.css's intended
 *    values. Referencing the variables would silently inherit the drift.
 *
 * Everything is scoped under .pp-refresh so an unconverted template cannot be
 * affected, and any single template can be reverted by removing one class.
 *
 * @package Petland_Pembroke_Pines
 */

.pp-refresh {
  /* Brand */
  --pp-orange:        #f45e0d;
  --pp-orange-dark:   #c94600;
  /* Matches the design. Note for the record: white on #f45e0d measures 3.25:1,
     which clears the 3:1 bar for large text but not the 4.5:1 bar for small
     text. An earlier pass silently substituted a darker #c94600; that was the
     wrong call -- it visibly changed the brand colour to solve a problem that is
     the owner's to weigh. Flagged, not overridden. Set this token to #c94600 to
     take the accessible fill instead. */
  --pp-orange-fill:   #f45e0d;
  --pp-orange-darker: #a33800;
  --pp-yellow:        #f6b81c;
  --pp-yellow-light:  #ffd05c;
  --pp-navy:          #1f1433;
  --pp-navy-soft:     #3a2259;
  --pp-ink:           #0d0d0d;

  /* Surfaces, taken from the design's warm neutral ramp */
  --pp-surface:       #ffffff;
  --pp-surface-warm:  #fff8f2;
  --pp-surface-cream: #fbf6ef;
  --pp-surface-sand:  #f3ece4;
  --pp-surface-peach: #fff1e8;

  /* Text */
  --pp-text:          #3c3550;
  --pp-text-strong:   var(--pp-navy);
  --pp-text-muted:    #6b6480;
  --pp-text-invert:   #ffffff;

  /* Lines and shadows */
  --pp-line:          #e7e2ef;
  --pp-line-warm:     #f0e6d8;
  --pp-shadow-sm:     0 1px 3px rgba(31, 20, 51, .06);
  --pp-shadow:        0 4px 16px rgba(31, 20, 51, .08);
  --pp-shadow-lg:     0 12px 32px rgba(31, 20, 51, .12);

  /* Radii — the design is noticeably rounder than the current theme */
  --pp-radius-sm:     8px;
  --pp-radius:        14px;
  --pp-radius-lg:     20px;
  --pp-radius-pill:   999px;

  /* Rhythm */
  --pp-gap-xs:        .5rem;
  --pp-gap-sm:        .85rem;
  --pp-gap:           1.25rem;
  --pp-gap-lg:        2rem;
  --pp-section-y:     clamp(2.5rem, 6vw, 4.5rem);
  --pp-container:     1350px;

  /* Type — the theme already loads both families */
  --pp-font-sans:     'Montserrat', system-ui, sans-serif;
  /* Headings use the SANS. The design sets --default-font-family to its sans and
     exposes the serif only as an opt-in .font-serif utility, which it applies to
     a single italic accent ("through 10/18/26."). Setting headings in Playfair
     Display was wrong and was the single biggest visual deviation. */
  --pp-font-display:  'Montserrat', system-ui, sans-serif;
  --pp-font-accent:   'Playfair Display', Georgia, serif;
  --pp-tracking-tight: -.025em;

  color: var(--pp-text);
  font-family: var(--pp-font-sans);
}

/* ---------------------------------------------------------------- layout -- */

.pp-refresh .pp-wrap {
  width: min(100% - 2.5rem, var(--pp-container));
  margin-inline: auto;
}
.pp-refresh .pp-section { padding-block: var(--pp-section-y); }
.pp-refresh .pp-section-warm  { background: var(--pp-surface-warm); }
.pp-refresh .pp-section-cream { background: var(--pp-surface-cream); }
.pp-refresh .pp-section-navy  { background: var(--pp-navy); color: var(--pp-text-invert); }

/* ------------------------------------------------------- section headers -- */

/* The design's signature: a small orange uppercase eyebrow above a large
   display heading. */
.pp-refresh .pp-eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-orange-dark);
  margin-bottom: .5rem;
}
.pp-refresh .pp-title {
  font-family: var(--pp-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--pp-text-strong);
  margin: 0 0 .6rem;
}
.pp-refresh .pp-title-xl {
  font-family: var(--pp-font-display);
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: var(--pp-tracking-tight);
  line-height: 1.05;
  margin: 0 0 .75rem;
}
.pp-refresh .pp-lede {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: var(--pp-text-muted);
  max-width: 46rem;
  margin: 0 0 1.5rem;
}
.pp-refresh .pp-section-navy .pp-title,
.pp-refresh .pp-section-navy .pp-title-xl { color: var(--pp-text-invert); }
.pp-refresh .pp-section-navy .pp-lede     { color: #ece7f5; }
.pp-refresh .pp-section-navy .pp-eyebrow  { color: var(--pp-yellow); }

/* ------------------------------------------------------------- buttons --- */
/* Class names avoid the substring "btn-" on purpose — see the file header. */

.pp-refresh .pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font-sans);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pp-refresh .pp-btn:hover { transform: translateY(-1px); text-decoration: none; }
.pp-refresh .pp-btn:focus-visible { outline: 3px solid var(--pp-yellow); outline-offset: 3px; }
.pp-refresh .pp-btn i { color: inherit; }

.pp-refresh .pp-btn.pp-orange  { background: var(--pp-orange-fill); color: #fff; }
.pp-refresh .pp-btn.pp-orange:hover  { background: var(--pp-orange-darker); color: #fff; }

.pp-refresh .pp-btn.pp-yellow  { background: var(--pp-yellow); color: var(--pp-navy); }
.pp-refresh .pp-btn.pp-yellow:hover  { background: var(--pp-yellow-light); color: var(--pp-navy); }

.pp-refresh .pp-btn.pp-navy    { background: var(--pp-navy); color: #fff; }
.pp-refresh .pp-btn.pp-navy:hover    { background: var(--pp-navy-soft); color: #fff; }

.pp-refresh .pp-btn.pp-outline { background: #fff; color: var(--pp-orange-dark); border-color: currentColor; }
.pp-refresh .pp-btn.pp-outline:hover { background: var(--pp-surface-peach); color: var(--pp-orange-dark); }

/* For dark grounds: white label, translucent fill. */
.pp-refresh .pp-btn.pp-ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.pp-refresh .pp-btn.pp-ghost:hover   { background: rgba(255,255,255,.14); color: #fff; }

.pp-refresh .pp-btn.pp-block   { width: 100%; }
.pp-refresh .pp-btn.pp-small   { padding: .55rem 1rem; font-size: .8125rem; }

/* --------------------------------------------------------------- cards --- */

.pp-refresh .pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  padding: 1.35rem;
}
.pp-refresh .pp-card-hover {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pp-refresh .pp-card-hover:hover {
  border-color: #f3cdb3;
  box-shadow: var(--pp-shadow-lg);
  transform: translateY(-3px);
}
.pp-refresh .pp-card-flush { padding: 0; overflow: hidden; }

.pp-refresh .pp-grid { display: grid; gap: var(--pp-gap); }
.pp-refresh .pp-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.pp-refresh .pp-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }

/* -------------------------------------------------------------- badges --- */

.pp-refresh .pp-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--pp-radius-pill);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
.pp-refresh .pp-badge.pp-orange { background: var(--pp-orange-fill); color: #fff; }
.pp-refresh .pp-badge.pp-navy   { background: var(--pp-navy); color: #fff; }
.pp-refresh .pp-badge.pp-yellow { background: var(--pp-yellow); color: var(--pp-navy); }
.pp-refresh .pp-badge.pp-light  { background: rgba(255,255,255,.92); color: var(--pp-navy); box-shadow: var(--pp-shadow-sm); }

/* Pill row used for the hero trust strip and the utility bar. */
.pp-refresh .pp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-refresh .pp-pills li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: var(--pp-radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
}
.pp-refresh .pp-pills i { color: var(--pp-yellow); }

/* ------------------------------------------------------------ stat grid -- */
/* Used on the puppy detail page: Gender / Birth Date / Age / Color / ID /
   Location, as six equal cells. */

.pp-refresh .pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .75rem;
}
.pp-refresh .pp-stat {
  background: var(--pp-surface-sand);
  border-radius: var(--pp-radius-sm);
  padding: .8rem .9rem;
}
.pp-refresh .pp-stat-label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
  margin-bottom: .2rem;
}
.pp-refresh .pp-stat-value { font-weight: 700; color: var(--pp-text-strong); line-height: 1.35; }
.pp-refresh .pp-stat-value.pp-unknown { font-weight: 500; font-style: italic; color: var(--pp-text-muted); }

/* ----------------------------------------------------------- accordion --- */
/* Wraps Bootstrap's accordion, which the theme already loads. */

.pp-refresh .pp-accordion .accordion-item {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius) !important;
  margin-bottom: .6rem;
  overflow: hidden;
}
.pp-refresh .pp-accordion .accordion-button {
  font-family: var(--pp-font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pp-text-strong);
  background: var(--pp-surface);
  padding: 1.05rem 1.25rem;
}
.pp-refresh .pp-accordion .accordion-button:not(.collapsed) {
  background: var(--pp-surface-warm);
  color: var(--pp-text-strong);
  box-shadow: none;
}
.pp-refresh .pp-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(246, 184, 28, .45);
  border-color: transparent;
}
.pp-refresh .pp-accordion .accordion-body {
  padding: 0 1.25rem 1.25rem;
  color: var(--pp-text);
  line-height: 1.7;
}

/* --------------------------------------------------------------- forms --- */

.pp-refresh .pp-field { display: grid; gap: .35rem; margin-bottom: var(--pp-gap); }
.pp-refresh .pp-label { font-size: .875rem; font-weight: 700; color: var(--pp-text-strong); }
.pp-refresh .pp-label .pp-required { color: var(--pp-orange-dark); }
.pp-refresh .pp-input,
.pp-refresh .pp-textarea,
.pp-refresh .pp-select {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  font-family: var(--pp-font-sans);
  font-size: 1rem;
  color: var(--pp-text-strong);
  background: var(--pp-surface);
}
.pp-refresh .pp-input:focus,
.pp-refresh .pp-textarea:focus,
.pp-refresh .pp-select:focus {
  outline: none;
  border-color: var(--pp-orange);
  box-shadow: 0 0 0 3px rgba(244, 94, 13, .18);
}
.pp-refresh .pp-textarea { min-height: 8rem; resize: vertical; }
.pp-refresh .pp-field-row { display: grid; gap: var(--pp-gap); }
@media (min-width: 640px) { .pp-refresh .pp-field-row { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- prose -- */

.pp-refresh .pp-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--pp-text); }
.pp-refresh .pp-prose > h2 {
  font-family: var(--pp-font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: var(--pp-text-strong);
  margin: 2.5rem 0 .85rem;
}
.pp-refresh .pp-prose > h2:first-child { margin-top: 0; }
.pp-refresh .pp-prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--pp-text-strong); margin: 1.75rem 0 .6rem; }
.pp-refresh .pp-prose p { margin: 0 0 1.15rem; }
.pp-refresh .pp-prose ul, .pp-refresh .pp-prose ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.pp-refresh .pp-prose li { margin-bottom: .55rem; }
.pp-refresh .pp-prose a {
  color: var(--pp-orange-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-refresh .pp-prose a:hover { color: var(--pp-text-strong); }

/* ------------------------------------------------------------ a11y/misc -- */

.pp-refresh img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .pp-refresh .pp-btn,
  .pp-refresh .pp-card-hover { transition: none; }
  .pp-refresh .pp-btn:hover,
  .pp-refresh .pp-card-hover:hover { transform: none; }
}

/* ============================================================
   SHELL — utility bar, header, footer
   ------------------------------------------------------------
   These target the theme's existing chrome classes rather than
   replacing their markup, so the header keeps its PetStore
   microdata, its two nav walkers and its offcanvas behaviour.
   ============================================================ */

/* ------------------------------------------------------ utility bar ----- */

.pp-refresh .pp-utilitybar {
  background: #15111f;
  color: #cfc8da;
  font-size: .8125rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pp-refresh .pp-utilitybar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .55rem;
}
.pp-refresh .pp-utilitybar__facts,
.pp-refresh .pp-utilitybar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}
.pp-refresh .pp-utilitybar__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #cfc8da;
  text-decoration: none;
}
.pp-refresh a.pp-utilitybar__item:hover { color: #fff; text-decoration: none; }
.pp-refresh .pp-utilitybar__item i { color: var(--pp-orange); font-size: .9em; }

/* Below the fold of a phone the address is the first thing to go; the hours
   and the phone number are what people actually tap. */
@media (max-width: 720px) {
  .pp-refresh .pp-utilitybar__inner { justify-content: center; }
  .pp-refresh .pp-utilitybar__item:not(.pp-utilitybar__item--hours) span { font-size: .75rem; }
  .pp-refresh .pp-utilitybar__facts .pp-utilitybar__item:first-child { display: none; }
}

/* ---------------------------------------------------------- header ------ */

.pp-refresh .site-header {
  background: #0d0d0d;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.pp-refresh .site-header .navbar { padding: 14px 0; }
.pp-refresh .site-header .navbar-brand img { height: 42px; }

.pp-refresh .site-header .nav-link {
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
}
.pp-refresh .site-header .nav-link:hover,
.pp-refresh .site-header .nav-link:focus { color: var(--pp-yellow); }

.pp-refresh .site-header .dropdown-menu {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  box-shadow: var(--pp-shadow-lg);
  padding: .4rem;
}
.pp-refresh .site-header .dropdown-item {
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pp-text-strong);
}
.pp-refresh .site-header .dropdown-item:hover { background: var(--pp-surface-peach); color: var(--pp-orange-dark); }

/* The address and phone moved up into the utility bar. They stay in the
   document because they carry the header's PetStore/PostalAddress microdata —
   they are only hidden from the nav row. */
@media (min-width: 992px) {
  .pp-refresh .header-contact__location,
  .pp-refresh .header-contact__phone { display: none; }
}

.pp-refresh .pp-navcta { padding: .6rem 1.35rem; font-size: .875rem; white-space: nowrap; }

/* ---------------------------------------------------------- footer ------ */

.pp-refresh .pp-footer { background: var(--pp-navy); color: #cfc8da; }
.pp-refresh .pp-footer .container { max-width: var(--pp-container); }

.pp-refresh .pp-footer__grid {
  display: grid;
  gap: 2rem var(--pp-gap-lg);
  grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 640px)  { .pp-refresh .pp-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp-refresh .pp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }

.pp-refresh .pp-footer__logo { height: 44px; width: auto; margin-bottom: 1rem; }
.pp-refresh .pp-footer__wordmark {
  display: block;
  font-family: var(--pp-font-display);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}
.pp-refresh .pp-footer__addr { margin: 0 0 .75rem; line-height: 1.6; }
.pp-refresh .pp-footer__phone { margin: 0 0 .6rem; }
.pp-refresh .pp-footer__phone a { color: #fff; font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.pp-refresh .pp-footer__dir { color: var(--pp-orange); font-weight: 700; font-size: .875rem; text-decoration: none; }
.pp-refresh .pp-footer__dir:hover { color: var(--pp-yellow); text-decoration: underline; }

.pp-refresh .pp-footer__heading {
  font-family: var(--pp-font-sans);
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .85rem;
}
.pp-refresh .pp-footer__heading--follow { margin-top: 1.5rem; }

.pp-refresh .pp-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pp-refresh .pp-footer__col li { margin-bottom: .45rem; }
.pp-refresh .pp-footer__col a { color: #cfc8da; font-size: .9375rem; text-decoration: none; }
.pp-refresh .pp-footer__col a:hover { color: #fff; text-decoration: underline; }

.pp-refresh .pp-footer__hours { margin: 0; font-size: .9375rem; }
.pp-refresh .pp-footer__hours dt { color: #fff; font-weight: 700; }
.pp-refresh .pp-footer__hours dd { margin: 0 0 .6rem; color: #cfc8da; }

.pp-refresh .pp-footer__social { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }

.pp-refresh .pp-footer .site-info {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.25rem;
  font-size: .8125rem;
  color: #a79fb8;
}
.pp-refresh .pp-footer .site-info a { color: #cfc8da; }

/* The language switcher sits in the Store column and must look like its
   siblings, not like the inline pill it is elsewhere. */
.pp-refresh .pp-footer__col .lang-switch {
  color: #cfc8da;
  font-size: .9375rem;
  text-decoration: none;
}
.pp-refresh .pp-footer__col .lang-switch::before { content: none; }
.pp-refresh .pp-footer__col .lang-switch:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   PRODUCT CARD
   ------------------------------------------------------------
   One template feeds every grid on the site — homepage, shop,
   category archives, the Spanish pages and the block under all
   608 blog posts — so these rules reach all of them at once.
   ============================================================ */

.pp-refresh .products,
.pp-refresh .products-grid,
.pp-refresh .puppy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-refresh .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pp-refresh .product-card:hover {
  border-color: #f3cdb3;
  box-shadow: var(--pp-shadow-lg);
  transform: translateY(-4px);
}

/* ---- image ---- */

.pp-refresh .product-card__image-link { display: block; text-decoration: none; }
.pp-refresh .product-card__image {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  background: var(--pp-surface-sand);
}
.pp-refresh .product-card__img,
.pp-refresh .product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.pp-refresh .product-card:hover .product-card__img { transform: scale(1.06); }

/* "Ask About Me" — the badge text is owner-configurable, so this styles the
   container rather than assuming a label. */
.pp-refresh .product-card__badge--unlock-pricing {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-orange-fill);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--pp-shadow);
}
.pp-refresh .product-card__badge--unlock-pricing:hover { background: var(--pp-orange-darker); }

.pp-refresh .pp-card-gender {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: var(--pp-radius-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--pp-navy);
  font-size: .75rem;
  font-weight: 700;
  box-shadow: var(--pp-shadow-sm);
}

/* ---- content ---- */

.pp-refresh .product-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .5rem;
  padding: 1.1rem 1.15rem 1.25rem;
}
.pp-refresh .product-card__breed {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pp-orange-dark);
  margin: 0;
}
.pp-refresh .product-card__title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.pp-refresh .product-card__title-link { color: var(--pp-navy); font-weight: 700; text-decoration: none; }
.pp-refresh .product-card__title-link:hover { color: var(--pp-orange-dark); }

/* The design replaces the three-icon grid with a quiet single line. The icons
   are hidden rather than removed so the markup stays shared with the
   unrefreshed fallback. */
.pp-refresh .product-card__info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  font-size: .875rem;
  color: var(--pp-text-muted);
}
.pp-refresh .product-card__info-item { display: inline-flex; align-items: center; gap: .35rem; }
.pp-refresh .product-card__info-item i { display: none; }
.pp-refresh .product-card__info-item span { color: var(--pp-text-muted); }

/* ---- actions ---- */

.pp-refresh .product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: auto;
  padding-top: .35rem;
}
.pp-refresh .product-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto;
  min-height: 2.75rem;
  padding: .6rem .85rem;
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pp-refresh .product-card__action-btn i { font-size: .95em; }

.pp-refresh .product-card__action-btn--call {
  background: var(--pp-orange-fill);
  color: #fff;
  flex-direction: row;
}
.pp-refresh .product-card__action-btn--call:hover { background: var(--pp-orange-darker); color: #fff; }

.pp-refresh .product-card__action-btn--email {
  background: var(--pp-surface);
  color: var(--pp-navy);
  border-color: var(--pp-line);
}
.pp-refresh .product-card__action-btn--email:hover { background: var(--pp-surface-peach); border-color: #f3cdb3; }

.pp-refresh .product-card__action-btn--book {
  grid-column: 1 / -1;
  background: var(--pp-yellow);
  color: var(--pp-navy);
  margin-top: .5rem;
}
.pp-refresh .product-card__action-btn--book:hover { background: var(--pp-yellow-light); color: var(--pp-navy); }

.pp-refresh .product-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  margin-top: .5rem;
  padding: .7rem 1rem;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-navy);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s ease;
}
.pp-refresh .product-card__button:hover { background: var(--pp-navy-soft); color: #fff; }

/* Prices are hidden sitewide by petland_hide_prices(); this only tidies the
   empty node the template still emits for its microdata. */
.pp-refresh .product-card__price:empty { display: none; }

/* ---- forced-colour overrides ----
 * Two sitewide rules in style.css set `color:#1f1433 !important` on anything
 * that looks like a button:
 *
 *   style.css:8642  button, .btn, …          (bare element selector)
 *   style.css:8665  a[class*="btn-"], …      (substring match)
 *
 * They capture four of this card's controls, because
 * "product-card__action-btn--call" contains the substring "btn-" and the badge
 * and email controls are <button> elements. Two of those are meant to be dark
 * and are unaffected in practice; the other two are white-on-orange and would
 * render dark purple on orange — the same failure that made the Spanish hero
 * phone button unreadable.
 *
 * !important is the only thing that beats !important. Scoped to .pp-refresh and
 * to exactly the two controls that need it, so the sitewide rules keep doing
 * their job everywhere else.
 */
.pp-refresh .product-card .product-card__action-btn--call,
.pp-refresh .product-card .product-card__action-btn--call:hover,
.pp-refresh .product-card__badge--unlock-pricing,
.pp-refresh .product-card__badge--unlock-pricing:hover { color: #fff !important; }

.pp-refresh .product-card .product-card__action-btn--call i,
.pp-refresh .product-card__badge--unlock-pricing i { color: inherit !important; }

/* ============================================================
   SHOP ARCHIVE — /puppies-for-sale/ and every breed category
   ============================================================ */

.pp-refresh .shop-archive__header {
  background: var(--pp-surface-warm);
  border-bottom: 1px solid var(--pp-line-warm);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.pp-refresh .shop-archive__header h1,
.pp-refresh .shop-archive__title {
  font-family: var(--pp-font-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  color: var(--pp-navy);
  margin: 0 0 .5rem;
}
.pp-refresh .shop-archive__subtitle {
  color: var(--pp-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 46rem;
}
.pp-refresh .shop-archive__layout { gap: 2.25rem; }

.pp-refresh .shop-archive__results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--pp-line);
}
.pp-refresh .shop-archive__results-count { color: var(--pp-text-muted); font-size: .9375rem; }
.pp-refresh .shop-archive__results-count strong { color: var(--pp-navy); font-weight: 700; }

/* ---- filter sidebar ---- */

.pp-refresh .shop-sidebar { display: grid; gap: 1.25rem; }
.pp-refresh .shop-widget {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 1.1rem 1.15rem;
}
.pp-refresh .shop-widget__title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--pp-navy);
  margin: 0 0 .75rem;
}
.pp-refresh .shop-widget__checkbox-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem 0;
  font-size: .9375rem;
  color: var(--pp-text);
  cursor: pointer;
}
.pp-refresh .shop-widget__checkbox-label:hover { color: var(--pp-navy); }
.pp-refresh .shop-widget__checkbox { accent-color: var(--pp-orange); width: 1.05rem; height: 1.05rem; }
.pp-refresh .shop-widget__count { margin-left: auto; color: var(--pp-text-muted); font-size: .8125rem; }

.pp-refresh .shop-sidebar-toggle {
  background: var(--pp-orange-fill);
  border-radius: var(--pp-radius-pill);
  box-shadow: var(--pp-shadow-lg);
}

/* ============================================================
   SINGLE PRODUCT — the puppy detail page
   ============================================================ */

.pp-refresh .single-product__layout {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  gap: 2.5rem;
}
.pp-refresh .product-gallery__main-image,
.pp-refresh .product-gallery__main { border-radius: var(--pp-radius); overflow: hidden; }
.pp-refresh .product-gallery__thumbnail { border-radius: var(--pp-radius-sm); overflow: hidden; }

.pp-refresh .product-info__category {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-orange-dark);
  margin-bottom: .35rem;
}
.pp-refresh .product-info__title { margin: 0 0 .5rem; }
.pp-refresh .product-info__title-name {
  display: block;
  font-family: var(--pp-font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  color: var(--pp-navy);
}
/* The qualifier carries the breed + city search phrase. It stays visible but
   subordinate: it is a subtitle, not a second headline. */
.pp-refresh .product-info__title-qualifier {
  display: block;
  font-family: var(--pp-font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pp-text-muted);
  margin-top: .35rem;
}

.pp-refresh .product-info__quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: .7rem;
  margin: 1.4rem 0;
}
.pp-refresh .product-info__stat {
  background: var(--pp-surface-sand);
  border-radius: var(--pp-radius-sm);
  padding: .8rem .9rem;
  text-align: left;
}
.pp-refresh .product-info__stat i { color: var(--pp-orange); font-size: 1rem; }
.pp-refresh .product-info__stat-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
  margin-top: .25rem;
}
.pp-refresh .product-info__stat-value { font-weight: 700; color: var(--pp-navy); }

.pp-refresh .product-info__description-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pp-navy);
  margin: 0 0 .4rem;
}
.pp-refresh .product-info__actions { display: grid; gap: .6rem; margin-top: 1.4rem; }
@media (min-width: 560px) { .pp-refresh .product-info__actions { grid-template-columns: repeat(3, 1fr); } }

.pp-refresh .product-info__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .75rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.pp-refresh .product-info__button--primary   { background: var(--pp-orange-fill); color: #fff !important; }
.pp-refresh .product-info__button--primary:hover { background: var(--pp-orange-darker); }
.pp-refresh .product-info__button--secondary { background: var(--pp-navy); color: #fff !important; }
.pp-refresh .product-info__button--secondary:hover { background: var(--pp-navy-soft); }
.pp-refresh .product-info__button--tertiary  { background: var(--pp-yellow); color: var(--pp-navy); }
.pp-refresh .product-info__button--tertiary:hover { background: var(--pp-yellow-light); }

.pp-refresh .product-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--pp-line);
  margin-bottom: 1.5rem;
}
.pp-refresh .product-tabs__button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: .7rem 1.1rem;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--pp-text-muted);
  cursor: pointer;
}
.pp-refresh .product-tabs__button--active,
.pp-refresh .product-tabs__button.active {
  color: var(--pp-navy);
  border-bottom-color: var(--pp-orange);
}
.pp-refresh .product-detail-item,
.pp-refresh .parent-card,
.pp-refresh .health-card,
.pp-refresh .breeder-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 1.1rem;
}
.pp-refresh .related-products__title {
  font-family: var(--pp-font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--pp-navy);
}

/* ============================================================
   PAGE CHROME — applies to every page template
   ============================================================ */

/* Every page template rolls its own hero class. They all get the same
   treatment rather than fifteen near-identical blocks. */
.pp-refresh .page-header,
.pp-refresh .about-hero,
.pp-refresh .finance-hero,
.pp-refresh .perks-hero,
.pp-refresh .products-hero,
.pp-refresh .petland-cares-hero,
.pp-refresh .care-solutions-hero,
.pp-refresh .faq-hero,
.pp-refresh .blog-hero,
.pp-refresh .areas-serve-hero,
.pp-refresh .thank-you-hero,
.pp-refresh .appointment-hero,
.pp-refresh .vip-page-header,
.pp-refresh .vip-v2-page-header {
  background: var(--pp-navy);
  color: #fff;
  padding-block: clamp(2.25rem, 6vw, 4rem);
  border-bottom: 0;
}
.pp-refresh .page-header h1,
.pp-refresh .about-hero h1,
.pp-refresh .finance-hero h1,
.pp-refresh .perks-hero h1,
.pp-refresh .products-hero h1,
.pp-refresh .petland-cares-hero h1,
.pp-refresh .care-solutions-hero h1,
.pp-refresh .faq-hero h1,
.pp-refresh .blog-hero h1,
.pp-refresh .areas-serve-hero h1,
.pp-refresh .thank-you-hero h1,
.pp-refresh .appointment-hero h1,
.pp-refresh .vip-page-header h1,
.pp-refresh .vip-v2-page-header h1 {
  font-family: var(--pp-font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 .6rem;
}
.pp-refresh .page-header p,
.pp-refresh .about-hero p,
.pp-refresh .finance-hero p,
.pp-refresh .perks-hero p,
.pp-refresh .products-hero p,
.pp-refresh .petland-cares-hero p,
.pp-refresh .care-solutions-hero p,
.pp-refresh .faq-hero p,
.pp-refresh .blog-hero p,
.pp-refresh .thank-you-hero p,
.pp-refresh .appointment-hero p { color: #ded7ea; font-size: 1.0625rem; line-height: 1.6; }

.pp-refresh .page-content { padding-block: var(--pp-section-y); }

/* ---- the theme's existing button classes ----
 * Restyled in place so fifteen templates pick up the new look without their
 * markup changing. Colour is !important only where the sitewide
 * `button, .btn, a[class*="btn-"] { color:#1f1433 !important }` rules would
 * otherwise force dark text onto a dark fill. */
.pp-refresh .btn-primary,
.pp-refresh .btn-secondary,
.pp-refresh .btn-apply,
.pp-refresh .btn-apply-large,
.pp-refresh .btn-contact,
.pp-refresh .btn-submit,
.pp-refresh .btn-view-all-puppies,
.pp-refresh .care-solutions-btn,
.pp-refresh .read-more-btn,
.pp-refresh .btn-reviews,
.pp-refresh .thank-you-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.pp-refresh .btn-primary,
.pp-refresh .btn-apply,
.pp-refresh .btn-apply-large,
.pp-refresh .btn-view-all-puppies { background: var(--pp-yellow); color: var(--pp-navy) !important; }
.pp-refresh .btn-primary:hover,
.pp-refresh .btn-apply:hover,
.pp-refresh .btn-apply-large:hover { background: var(--pp-yellow-light); }

.pp-refresh .btn-secondary,
.pp-refresh .btn-contact { background: var(--pp-orange-fill); color: #fff !important; border-color: transparent; }
.pp-refresh .btn-secondary:hover,
.pp-refresh .btn-contact:hover { background: var(--pp-orange-darker); }

.pp-refresh .btn-primary:hover,
.pp-refresh .btn-secondary:hover { transform: translateY(-1px); }

/* ---- generic card-ish blocks across the page templates ---- */
.pp-refresh .cares-link-card,
.pp-refresh .partner-story-card,
.pp-refresh .care-solutions-intro,
.pp-refresh .callout-feature,
.pp-refresh .contact-detail,
.pp-refresh .blog-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pp-refresh .cares-link-card:hover,
.pp-refresh .partner-story-card:hover,
.pp-refresh .blog-card:hover {
  border-color: #f3cdb3;
  box-shadow: var(--pp-shadow-lg);
  transform: translateY(-3px);
}

/* ============================================================
   BLOG
   ============================================================ */

.pp-refresh .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
}
.pp-refresh .blog-card__title { font-size: 1.15rem; line-height: 1.3; }
.pp-refresh .blog-card__title a { color: var(--pp-navy); text-decoration: none; font-weight: 700; }
.pp-refresh .blog-card__title a:hover { color: var(--pp-orange-dark); }
.pp-refresh .blog-card__meta { color: var(--pp-text-muted); font-size: .8125rem; }
.pp-refresh .single-post-content { font-size: 1.0625rem; line-height: 1.8; color: var(--pp-text); }
.pp-refresh .single-post-content h2 {
  font-family: var(--pp-font-display);
  color: var(--pp-navy);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 2.25rem 0 .8rem;
}
.pp-refresh .post-nav-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
}

/* ============================================================
   FRONT PAGE BANDS
   ============================================================ */

/* Only the promotional hero. .hero-default carries seven seasonal theme
   variations and a particle canvas; overriding .hero wholesale would have
   silently disabled that system, which is a product decision rather than a
   styling one. */
.pp-refresh .hero-blackfriday {
  background: var(--pp-orange-fill);
  color: #fff;
}
.pp-refresh .hero-blackfriday h1 { color: #fff; }
.pp-refresh .hero-image-wrapper img {
  height: auto;
  border-radius: var(--pp-radius-lg);
  border: 6px solid #fff;
  box-shadow: var(--pp-shadow-lg);
}

.pp-refresh .callout,
.pp-refresh .faq { background: var(--pp-surface-warm); }
.pp-refresh .puppies { background: var(--pp-surface-cream); }
.pp-refresh .testimonials { background: var(--pp-surface); }

.pp-refresh .puppies h2,
.pp-refresh .callout h2,
.pp-refresh .faq h2,
.pp-refresh .perks h2,
.pp-refresh .testimonials h2,
.pp-refresh .social-gallery h2 {
  font-family: var(--pp-font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  color: var(--pp-navy);
}
.pp-refresh .newsletter { background: var(--pp-navy); color: #fff; }
.pp-refresh .newsletter h2 { color: #fff; }

/* ============================================================
   FORMS — contact, VIP, product enquiry
   ============================================================ */

.pp-refresh .contact-form input[type="text"],
.pp-refresh .contact-form input[type="email"],
.pp-refresh .contact-form input[type="tel"],
.pp-refresh .contact-form textarea,
.pp-refresh .pet-form input[type="text"],
.pp-refresh .pet-form input[type="email"],
.pp-refresh .pet-form input[type="tel"],
.pp-refresh .pet-form textarea,
.pp-refresh .form-input,
.pp-refresh .form-textarea {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  padding: .75rem .9rem;
  font-family: var(--pp-font-sans);
  font-size: 1rem;
}
.pp-refresh .contact-form input:focus,
.pp-refresh .contact-form textarea:focus,
.pp-refresh .pet-form input:focus,
.pp-refresh .pet-form textarea:focus,
.pp-refresh .form-input:focus,
.pp-refresh .form-textarea:focus {
  outline: none;
  border-color: var(--pp-orange);
  box-shadow: 0 0 0 3px rgba(244, 94, 13, .18);
}
.pp-refresh .btn-submit-form {
  background: var(--pp-orange-fill);
  color: #fff !important;
  border: 0;
  border-radius: var(--pp-radius-pill);
  padding: .85rem 1.6rem;
  font-weight: 700;
}
.pp-refresh .btn-submit-form:hover { background: var(--pp-orange-darker); }

.pp-refresh .contact-sidebar .contact-detail,
.pp-refresh .contact-info-item {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 1.1rem;
}

/* ============================================================
   SPANISH SECTION — align onto the shared tokens
   ------------------------------------------------------------
   page-espanol.php already has the right structure; it just
   predates these tokens and hardcoded its own values.
   ============================================================ */

.pp-refresh .es-page {
  --es-ink: var(--pp-navy);
  --es-body: var(--pp-text);
  --es-line: var(--pp-line);
  --es-soft: var(--pp-surface-warm);
  --es-accent: var(--pp-orange-dark);
}
.pp-refresh .es-hero { background: var(--pp-navy); }
.pp-refresh .es-card { border-radius: var(--pp-radius); box-shadow: var(--pp-shadow-sm); }
.pp-refresh .es-related__card { border-radius: var(--pp-radius); }
/* The Spanish closing band ships #fff4ec on the brand orange today, which is
   3.01:1 -- it went out with the Spanish section before this audit. Same fix as
   the hero: the accessible fill, and pure white rather than off-white. */
.pp-refresh .es-cta { background: var(--pp-orange-fill); }
.pp-refresh .es-cta__text { color: #fff; }

/* 404 needs no rule of its own: 404.php renders .page-header, styled above.
   An earlier attempt here used `.pp-refresh body.error404`, which can never
   match -- both classes land on the same <body> element, so the descendant
   combinator has nothing to descend into. */

/* ============================================================
   BREED INDEX — the crawlable breed list under the archive
   ============================================================ */

.pp-refresh .breed-index {
  background: var(--pp-surface-warm);
  border-top: 1px solid var(--pp-line-warm);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.pp-refresh .breed-index__title {
  font-family: var(--pp-font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--pp-navy);
  margin: 0 0 1rem;
}
.pp-refresh .breed-index__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: .4rem .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-refresh .breed-index__item > a {
  display: block;
  padding: .45rem .7rem;
  border-radius: var(--pp-radius-sm);
  color: var(--pp-orange-dark);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.pp-refresh .breed-index__item > a:hover { background: var(--pp-surface-peach); color: var(--pp-navy); }
.pp-refresh .breed-index__count { color: var(--pp-text-muted); font-weight: 500; }

/* ============================================================
   BREED GUIDE — injected into each product category archive
   ============================================================ */

.pp-refresh .breed-guide {
  background: var(--pp-surface-warm);
  border: 1px solid var(--pp-line-warm);
  border-radius: var(--pp-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2rem;
}
.pp-refresh .breed-guide__title {
  font-family: var(--pp-font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--pp-navy);
  margin: 0 0 .6rem;
}
.pp-refresh .breed-guide__lead { font-size: 1.0625rem; line-height: 1.7; color: var(--pp-text); }
.pp-refresh .breed-guide__content { line-height: 1.75; color: var(--pp-text); }
.pp-refresh .breed-guide__faqs-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pp-navy);
  margin: 1.5rem 0 .75rem;
}
.pp-refresh .breed-guide__faq {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  padding: .9rem 1.05rem;
  margin-bottom: .6rem;
}
.pp-refresh .breed-guide__faq-q { font-weight: 700; color: var(--pp-navy); margin: 0 0 .35rem; }
.pp-refresh .breed-guide__faq-a { margin: 0; color: var(--pp-text); line-height: 1.7; }
.pp-refresh .breed-guide__inventory-link,
.pp-refresh .breed-guide__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--pp-orange-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-refresh .breed-guide__inventory-link:hover,
.pp-refresh .breed-guide__more:hover { color: var(--pp-navy); }

/* Agency credit — set slightly apart from the copyright it shares a line with. */
.pp-refresh .pp-credit { white-space: normal; }
.pp-refresh .pp-credit .cosmick-credit {
  color: var(--pp-yellow);
  font-weight: 600;
  text-decoration: none;
}
.pp-refresh .pp-credit .cosmick-credit:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   PAGE-SPECIFIC HERO COLOUR
   ------------------------------------------------------------
   Heroes are navy by default, but the design puts the contact
   page on orange. The class is compounded, not descended:
   page-template-page-contact and pp-refresh land on the same
   <body>, so a descendant combinator would never match.
   ============================================================ */

.pp-refresh.page-template-page-contact .page-header { background: var(--pp-orange-fill); }
.pp-refresh.page-template-page-contact .page-header h1 { color: #fff; }
.pp-refresh.page-template-page-contact .page-header p { color: #ffffff; }

/* ============================================================
   AWARD STRIP — "Voted Best Pet Store in Pembroke Pines"
   ============================================================ */

.pp-refresh .reward-section {
  background: var(--pp-surface);
  border-block: 1px solid var(--pp-line-warm);
  padding-block: 1.25rem;
}
.pp-refresh .reward-section__title {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 700;
  color: var(--pp-navy);
  margin: 0 0 .15rem;
}
.pp-refresh .reward-section__subtitle { color: var(--pp-text-muted); font-size: .9375rem; margin: 0; }
.pp-refresh .reward-section__image img { max-height: 76px; width: auto; }

/* ============================================================
   BENEFITS — the icon/title/text list beside the homepage FAQ
   ============================================================ */

.pp-refresh .callout-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.pp-refresh .callout-feature {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem;
}
.pp-refresh .callout-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-surface-peach);
  color: var(--pp-orange-darker);
  font-size: 1.15rem;
}

/* ============================================================
   REVIEWS
   ============================================================ */

.pp-refresh .testimonial-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  padding: 1.35rem;
  height: 100%;
}
.pp-refresh .testimonial-card p { color: var(--pp-text); line-height: 1.7; }
.pp-refresh .testimonial-nav {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--pp-line);
  border-radius: 50%;
  background: var(--pp-surface);
  color: var(--pp-navy);
  box-shadow: var(--pp-shadow-sm);
}
.pp-refresh .testimonial-nav:hover { background: var(--pp-surface-peach); border-color: #f3cdb3; }
.pp-refresh .testimonial-dots button,
.pp-refresh .testimonial-dots span { background: var(--pp-line); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.pp-refresh .contact-layout { gap: 2.25rem; }
.pp-refresh .contact-form-wrapper,
.pp-refresh .contact-details-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}
/* The design leads the sidebar with a navy "call the store" panel — the one
   action most contact-page visitors actually want. */
.pp-refresh .contact-sidebar .contact-detail:first-child {
  background: var(--pp-navy);
  border-color: var(--pp-navy);
  color: #fff;
}
.pp-refresh .contact-sidebar .contact-detail:first-child a,
.pp-refresh .contact-sidebar .contact-detail:first-child h3,
.pp-refresh .contact-sidebar .contact-detail:first-child strong { color: #fff; }
.pp-refresh .contact-sidebar .contact-detail:first-child i { color: var(--pp-yellow); }

/* ============================================================
   SHOP — filter list
   ------------------------------------------------------------
   DELIBERATE DEVIATION FROM THE DESIGN: the preview shows gender
   as a segmented All/Female/Male pill group. The markup here is
   a checkbox list that js/shop-filters.js reads by
   data-filter-type, and the mobile drawer mirrors each box to its
   desktop twin by id. Restyling it as a segmented control means
   changing that markup and the script that depends on it, for a
   cosmetic gain. Left as a checkbox list, styled cleanly.
   ============================================================ */

.pp-refresh .shop-widget__list { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   TYPOGRAPHY — the design's heading treatment
   ------------------------------------------------------------
   Montserrat, heavy, tight tracking, tight leading. Applied to
   the theme's heading classes as well as the refresh's own, so
   templates that were never touched still match.
   ============================================================ */

.pp-refresh .pp-title,
.pp-refresh .pp-title-xl,
.pp-refresh h1, .pp-refresh h2, .pp-refresh h3,
.pp-refresh .shop-archive__title,
.pp-refresh .product-info__title-name,
.pp-refresh .breed-guide__title,
.pp-refresh .reward-section__title,
.pp-refresh .es-hero__title,
.pp-refresh .pp-footer__heading {
  font-family: var(--pp-font-sans);
  font-weight: 800;
  letter-spacing: var(--pp-tracking-tight);
  line-height: 1.1;
}
.pp-refresh h3,
.pp-refresh .pp-footer__heading { font-weight: 700; letter-spacing: 0; }

/* The one place the serif belongs: an italic accent inside a headline. */
.pp-refresh .pp-accent {
  font-family: var(--pp-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ============================================================
   PROMOTIONAL HERO — matched to the design
   ------------------------------------------------------------
   The theme's promo markup already carries every piece the
   design shows; it was only styled differently. Mapping:
     .bf-label      -> the small navy pill above the headline
     .bf-deal       -> the headline, sentence case, no shadow
     .bf-subtitle   -> the serif italic continuation
     .bf-scarcity   -> the yellow bonus pill
     .bf-countdown  -> hidden; the design has no timer
   ============================================================ */

.pp-refresh .hero-blackfriday {
  background: var(--pp-orange);
  color: #fff;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
.pp-refresh .hero-blackfriday .hero-content {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--pp-container);
}
@media (min-width: 992px) {
  .pp-refresh .hero-blackfriday .hero-content { grid-template-columns: 1.05fr .95fr; }
}

/* The flame-emoji badge and the countdown are not in the design. */
.pp-refresh .hero-blackfriday .bf-badge,
.pp-refresh .hero-blackfriday .bf-countdown { display: none; }

.pp-refresh .hero-blackfriday .bf-headline {
  display: block;
  margin: 0 0 1.1rem;
  text-shadow: none;
}
.pp-refresh .hero-blackfriday .bf-label {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .5rem 1.1rem;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-navy);
  color: #fff;
  font-family: var(--pp-font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: none;
  line-height: 1.2;
}
.pp-refresh .hero-blackfriday .bf-deal {
  display: block;
  font-family: var(--pp-font-sans);
  font-size: clamp(2.4rem, 6.5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: var(--pp-tracking-tight);
  line-height: 1.02;
  text-transform: none;
  text-shadow: none;
  color: #fff;
}
/* The serif italic continuation — the one place the design uses the serif. */
.pp-refresh .hero-blackfriday .bf-subtitle {
  display: block;
  font-family: var(--pp-font-accent);
  font-style: italic;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  text-transform: none;
  text-shadow: none;
  color: #fff;
  margin-top: .1rem;
}

.pp-refresh .hero-blackfriday .bf-trust-message { margin: 0 0 1.5rem; }
.pp-refresh .hero-blackfriday .bf-guarantee:empty { display: none; }
.pp-refresh .hero-blackfriday .bf-scarcity {
  display: inline-block;
  margin: 0;
  padding: .6rem 1.15rem;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-yellow);
  color: var(--pp-navy);
  font-weight: 700;
  font-size: .9375rem;
  text-shadow: none;
}

.pp-refresh .hero-blackfriday .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
/* The design leads with navy "View Puppies" and an outlined call button. The
   theme emits Call first as .btn-primary, so the roles are assigned by class
   rather than by order. */
.pp-refresh .hero-blackfriday .hero-buttons .btn-secondary {
  background: var(--pp-navy);
  color: #fff !important;
  border-color: transparent;
}
.pp-refresh .hero-blackfriday .hero-buttons .btn-secondary:hover { background: #2c1b47; }
.pp-refresh .hero-blackfriday .hero-buttons .btn-primary {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .75);
}
.pp-refresh .hero-blackfriday .hero-buttons .btn-primary:hover { background: rgba(255, 255, 255, .15); }

.pp-refresh .hero-blackfriday .hero-image-wrapper {
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
.pp-refresh .hero-blackfriday .hero-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: var(--pp-radius-lg);
  border: 8px solid #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

/* ---- nav: stop "Puppies For Sale" wrapping to two lines ---- */
.pp-refresh .site-header .navbar-nav { flex-wrap: nowrap; }
.pp-refresh .site-header .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1280px) {
  .pp-refresh .site-header .nav-link { font-size: .85rem; }
  .pp-refresh .site-header .container-max { gap: 1.25rem; }
}

/* ---- hero: strip the old decoration the design does not have ---- */

/* The bonus line sat inside a tinted panel with a yellow left rule. The design
   shows the pill alone. */
.pp-refresh .hero-blackfriday .bf-trust-message {
  background: none !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Large decorative blobs and the bottom wave belong to the old hero. */
.pp-refresh .hero-blackfriday::before,
.pp-refresh .hero-blackfriday::after,
.pp-refresh .hero-blackfriday .hero-content::before,
.pp-refresh .hero-blackfriday .hero-content::after { content: none !important; }

.pp-refresh .hero-blackfriday .hero-text { max-width: 36rem; }

/* ---- award strip ---- */
.pp-refresh .reward-section__image img,
.pp-refresh .reward-section img { max-height: 84px; width: auto; }
.pp-refresh .reward-section__content { opacity: 1; }
.pp-refresh .reward-section__title { color: var(--pp-navy); }
.pp-refresh .reward-section__subtitle { color: var(--pp-text-muted); }

/* ---- "Get My Details" was invisible ----
 * woocommerce-styles.css:496 sets color:#fff !important on this control,
 * because it used to be a solid teal button. The refresh makes it an outlined
 * button on white, so the label and icon were white on white — a dead CTA on
 * every card on the site. The !important here is answering that one.
 */
.pp-refresh .product-card__action-btn--email,
.pp-refresh .product-card__action-btn--email:hover,
.pp-refresh .product-card__action-btn--email span,
.pp-refresh .product-card__action-btn--email i {
  color: var(--pp-navy) !important;
}
.pp-refresh .product-card__action-btn--email { border-color: var(--pp-line) !important; }
.pp-refresh .product-card__action-btn--email:hover { border-color: #f3cdb3 !important; background: var(--pp-surface-peach); }

/* ---- card title: no decorative glyphs ----
 * The design shows the puppy's name alone.
 */
.pp-refresh .product-card__title::before,
.pp-refresh .product-card__title::after,
.pp-refresh .product-card__title-link::before,
.pp-refresh .product-card__title-link::after { content: none !important; }

/* style.css:1375 puts a Font Awesome paw either side of `.puppies h2`. Card
   titles are h2 elements inside that same section, so every puppy's name
   rendered as "paw Pearl paw". The design has no decorative glyphs on either. */
.pp-refresh .puppies h2:before,
.pp-refresh .puppies h2:after { content: none !important; margin: 0 !important; }

/* ---- card: left-aligned, plain meta ----
 * The design aligns the card's text block left and shows the meta as one quiet
 * line ("Born Aug 8   ID 02627") rather than as chips.
 */
.pp-refresh .product-card__content { text-align: left; }
.pp-refresh .product-card__breed,
.pp-refresh .product-card__title { text-align: left; }
.pp-refresh .product-card__title { font-size: 1.45rem; }
.pp-refresh .product-card__info-grid { justify-content: flex-start; }
.pp-refresh .product-card__info-item {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: .875rem;
}

/* Two actions share a row, so the longer label has to fit without wrapping at
   the narrower card width the three-up grid produces. */
.pp-refresh .product-card__actions .product-card__action-btn {
  font-size: .78rem;
  padding: .6rem .5rem;
  white-space: nowrap;
}
.pp-refresh .product-card__actions .product-card__action-btn i { font-size: .9em; }

/* ============================================================
   FIXES FROM REVIEW
   ============================================================ */

/* ---- logo was squished ----
 * style.css:174 sets height:50px with an explicit width:140 on the element, so
 * constraining height alone distorted it. Width must go back to auto.
 */
.pp-refresh .site-header .navbar-brand img {
  height: 44px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* ---- utility bar was unreadable ----
 * 13px at #cfc8da on near-black is legible by ratio but small and dim in
 * practice. Larger, brighter, and the separators carry the hierarchy instead of
 * the colour doing it.
 */
.pp-refresh .pp-utilitybar {
  background: #15111f;
  color: #f0edf5;
  font-size: .875rem;
}
.pp-refresh .pp-utilitybar__item { color: #f0edf5; font-weight: 500; }
.pp-refresh a.pp-utilitybar__item:hover { color: #fff; }
.pp-refresh .pp-utilitybar__item i { color: var(--pp-orange); }
@media (max-width: 720px) {
  .pp-refresh .pp-utilitybar { font-size: .8125rem; }
}

/* ---- puppy page action buttons wrapped to two lines ----
 * Three equal columns could not hold "Call (954) 250-7771", "Ask About Me" and
 * "Schedule Visit" at the sidebar width. They now size to their content and wrap
 * as whole buttons rather than breaking their labels.
 */
.pp-refresh .product-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
@media (min-width: 560px) {
  .pp-refresh .product-info__actions { grid-template-columns: none; }
}
.pp-refresh .product-info__button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: .875rem;
  padding: .75rem 1rem;
}
.pp-refresh .product-info__button span { white-space: nowrap; }

/* ---- promotion support restored to the hero ----
 * The countdown, the savings badge and the trust lines are how this store runs
 * its promotions. The design preview simply had no promotion running when it was
 * built, so hiding them was the wrong read: the furniture belongs, it just needs
 * to look like the rest of the refresh.
 */
.pp-refresh .hero-blackfriday .bf-badge,
.pp-refresh .hero-blackfriday .bf-countdown { display: block; }

.pp-refresh .hero-blackfriday .bf-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .9rem;
  padding: .45rem 1rem;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-yellow);
  color: var(--pp-navy);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: none;
  box-shadow: none;
  border: 0;
}

.pp-refresh .hero-blackfriday .bf-countdown {
  display: inline-block;
  margin: 1.35rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: var(--pp-radius);
  background: rgba(31, 20, 51, .28);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
  box-shadow: none;
}
.pp-refresh .hero-blackfriday .countdown-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pp-yellow);
  margin-bottom: .5rem;
  text-shadow: none;
}
.pp-refresh .hero-blackfriday .countdown-timer {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pp-refresh .hero-blackfriday .countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.1rem;
  padding: .45rem .3rem;
  border-radius: var(--pp-radius-sm);
  background: rgba(255, 255, 255, .14);
  border: 0;
}
.pp-refresh .hero-blackfriday .countdown-number {
  font-family: var(--pp-font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: none;
}
.pp-refresh .hero-blackfriday .countdown-label-small {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: .25rem;
}
.pp-refresh .hero-blackfriday .countdown-separator {
  color: rgba(255, 255, 255, .55);
  font-size: 1.25rem;
  font-weight: 700;
}
.pp-refresh .hero-blackfriday .bf-guarantee {
  color: #fff;
  font-size: .95rem;
  margin: 0 0 .5rem;
  text-shadow: none;
}

/* ============================================================
   MEASURED FROM THE DESIGN
   ------------------------------------------------------------
   Everything below is read from computed styles on
   petland-website-refresh.replit.app rather than estimated. The
   earlier tokens were a cool-grey palette; the design is warm
   throughout, which is why it read as "off" even where the
   layout matched.

     page ground   #faf8f5   (not white)
     body text     #171221   (not #3c3550)
     warm white    #fff8f2   (not #ffffff)
     hairlines     #e4ded7   (not #e7e2ef)
     card ground   #fdfdfb
     image well    #f3eee8
     footer text   #d9cfe6
     nav link      #f3ece4 at 12.8px/600
   ============================================================ */

.pp-refresh {
  --pp-surface:       #fdfdfb;
  --pp-surface-warm:  #faf8f5;
  --pp-surface-cream: #fbf6ef;
  --pp-surface-sand:  #f3eee8;
  --pp-surface-peach: #fff1e8;
  --pp-line:          #e4ded7;
  --pp-line-warm:     #e4ded7;
  --pp-text:          #171221;
  --pp-text-strong:   #1f1433;
  --pp-text-muted:    #6b6480;
  --pp-text-invert:   #fff8f2;
  --pp-radius:        16px;
  --pp-radius-sm:     10px;
  --pp-radius-lg:     20px;
}

/* The page sits on a warm ground, not white. */
.pp-refresh { background-color: var(--pp-surface-warm); }

/* ---- hero ---- */
.pp-refresh .hero-blackfriday .bf-deal {
  font-size: clamp(2.4rem, 6vw, 3.6rem);   /* 57.6px at full width */
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff8f2;
}
/* The serif continuation is NAVY in the design, at weight 600 — not white. */
.pp-refresh .hero-blackfriday .bf-subtitle {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #1f1433;
}

/* ---- header / nav ---- */
.pp-refresh .site-header .nav-link {
  font-size: .8rem;          /* 12.8px */
  font-weight: 600;
  color: #f3ece4;
  padding: .5rem .375rem;
  border-radius: 10px;
}
.pp-refresh .site-header .nav-link:hover { color: #fff8f2; background: rgba(255,255,255,.08); }
.pp-refresh .pp-navcta { font-size: .92rem; font-weight: 700; color: #fff8f2 !important; }

/* ---- product card ---- */
.pp-refresh .product-card { background: #fdfdfb; border: 1px solid #e4ded7; border-radius: 16px; }
.pp-refresh .product-card__image { background: #f3eee8; }
.pp-refresh .product-card__title { font-size: 1.25rem; font-weight: 800; letter-spacing: normal; }
.pp-refresh .product-card__title-link { color: #1f1433; }

/* The "Ask About Me" badge uses the DARK orange, not the brand orange. */
.pp-refresh .product-card__badge--unlock-pricing {
  background: #c94600;
  border-radius: 12px;
  padding: .5rem .625rem;
  font-size: .75rem;
}
.pp-refresh .product-card__badge--unlock-pricing:hover { background: #a33800; }

/* Card actions are 12px/700 in the design — noticeably smaller than I had. */
.pp-refresh .product-card__actions .product-card__action-btn,
.pp-refresh .product-card__action-btn--book {
  font-size: .75rem;
  font-weight: 700;
  border-width: 1.5px;
}
.pp-refresh .product-card__action-btn--email {
  background: #fdfdfb;
  border-color: #e4ded7 !important;
  color: #1f1433 !important;
}
.pp-refresh .product-card__action-btn--book { background: #f6b81c; color: #1f1433; }
.pp-refresh .product-card__button {
  font-size: .92rem;
  font-weight: 700;
  background: #1f1433;
  color: #fbf6ef;
}

/* ---- section headings ---- */
.pp-refresh .puppies h2,
.pp-refresh .callout h2,
.pp-refresh .faq h2,
.pp-refresh .perks h2,
.pp-refresh .testimonials h2,
.pp-refresh .social-gallery h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);  /* 36px */
  font-weight: 800;
  color: #1f1433;
  letter-spacing: -.02em;
}

/* ---- footer ---- */
.pp-refresh .pp-footer { background: #1f1433; color: #d9cfe6; }
.pp-refresh .pp-footer__col a { color: #d9cfe6; font-size: 1rem; }
.pp-refresh .pp-footer__col a:hover { color: #fff; }
.pp-refresh .pp-footer__heading { font-size: .875rem; font-weight: 700; color: #fff; }
.pp-refresh .pp-footer__addr,
.pp-refresh .pp-footer__hours dd { color: #d9cfe6; }
.pp-refresh .pp-footer__hours dt { color: #fff; }

/* ---- buttons: design uses 1.5px borders and 999px radius ---- */
.pp-refresh .pp-btn { border-width: 1.5px; font-size: .92rem; }
.pp-refresh .pp-btn.pp-ghost { border-color: rgba(255,248,242,.7); color: #fff8f2; }

/* ============================================================
   CARD + AWARD STRIP — measured against the design, element by
   element. Values below are the preview's computed styles.
   ============================================================ */

/* The card title is an h2 inside .puppies, so the section-heading rule above
   was sizing puppy names at 36px. Same shape of bug as the paw glyph: a
   section-scoped h2 rule reaching the cards inside it. Pinned to the design's
   20px, and the section rule is narrowed to direct headings only. */
.pp-refresh .puppies > .container > h2,
.pp-refresh .puppies > .container-max > h2,
.pp-refresh .callout h2,
.pp-refresh .faq h2,
.pp-refresh .perks h2,
.pp-refresh .testimonials h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
}
.pp-refresh .product-card__title,
.pp-refresh .puppies .product-card__title,
.pp-refresh .products-grid .product-card__title {
  font-size: 1.25rem;        /* 20px */
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

/* breed: 12.48px / 600 / sentence case / dark orange — not 13px bold caps */
.pp-refresh .product-card__breed {
  font-size: .78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #c94600;
}

/* meta line: 12.8px / 400 / #5e576b */
.pp-refresh .product-card__info-grid { font-size: .8rem; gap: .25rem 1rem; }
.pp-refresh .product-card__info-item,
.pp-refresh .product-card__info-item span {
  font-size: .8rem;
  font-weight: 400;
  color: #5e576b;
}

/* actions: 12px labels, 44px tall, 12px gap, and no forced uppercase — the
   theme rendered the call label as "CALL". */
.pp-refresh .product-card__actions { gap: .75rem; }
.pp-refresh .product-card__action-btn,
.pp-refresh .product-card__action-btn span {
  text-transform: none;
  letter-spacing: normal;
}
.pp-refresh .product-card__actions .product-card__action-btn,
.pp-refresh .product-card__action-btn--book {
  min-height: 44px;
  height: 44px;
  font-size: .75rem;
  padding: 0 .75rem;
}
.pp-refresh .product-card__action-btn--call { flex-direction: row; width: auto; }
.pp-refresh .product-card__button {
  min-height: 42px;
  height: 42px;
  padding: 0 1rem;
  font-size: .92rem;
}
.pp-refresh .product-card__badge--unlock-pricing { min-height: 44px; }

/* ---- award strip ----
 * Design: contained row, 20px/32px padding, 16px gap, left aligned, and a
 * 64x64 badge. Ours was full-bleed and centred with an unconstrained badge.
 * .reward-section__image IS the img, not a wrapper, which is why an earlier
 * `.reward-section__image img` rule matched nothing.
 */
.pp-refresh .reward-section { background: #fdfdfb; border-block: 1px solid #e4ded7; padding-block: 0; }
.pp-refresh .reward-section .container-max { max-width: var(--pp-container); }
.pp-refresh .reward-section__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 2rem;
  text-align: left;
}
.pp-refresh .reward-section .row { align-items: center !important; justify-content: flex-start !important; gap: 1rem; margin: 0; }
.pp-refresh .reward-section .col-auto { padding: 0; }
img.reward-section__image,
.pp-refresh .reward-section__image {
  width: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  object-fit: contain;
  display: block;
}
.pp-refresh .reward-section__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f1433;
  letter-spacing: -.01em;
  margin: 0 0 .15rem;
  text-align: left;
}
.pp-refresh .reward-section__subtitle {
  font-size: .875rem;
  font-weight: 400;
  color: #5e576b;
  margin: 0;
  text-align: left;
}

/* The award text sits in a Bootstrap col-md-6 col-lg-5, which forces the
   headline onto three lines. The design runs it on one, beside the badge. */
.pp-refresh .reward-section .col-md-6,
.pp-refresh .reward-section .col-lg-5,
.pp-refresh .reward-section [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
}
.pp-refresh .reward-section__title { white-space: nowrap; }
@media (max-width: 720px) {
  .pp-refresh .reward-section__title { white-space: normal; font-size: 1.15rem; }
  .pp-refresh .reward-section__content { padding: 1rem 1.25rem; }
}

/* ============================================================
   MEASURED: utility bar + card action spacing
   ------------------------------------------------------------
   Design values read from the preview's shop page:
     utility bar bg   #0d0d0d   (black, same as the nav — not #15111f)
     card padding     16px      (was 17.6/18.4/20)
     action row       grid, 2 equal columns, 8px gap
     action stack     8px gap, 16px top padding
   An earlier pass set the row gap to 12px from a homepage reading that had
   matched the wrong element.
   ============================================================ */

.pp-refresh .pp-utilitybar { background: #0d0d0d; border-bottom: 1px solid rgba(255,255,255,.08); }

.pp-refresh .product-card__content { padding: 1rem; gap: .5rem; }

.pp-refresh .product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
}
.pp-refresh .product-card__action-btn--book { margin-top: .5rem; }
.pp-refresh .product-card__button { margin-top: .5rem; }

/* ============================================================
   ARCHIVE PROMO BANNER — measured against the design
   ------------------------------------------------------------
   The design runs a thin navy strip: the offer in 14px/700 yellow
   (#f6b81c), the date in 14px/400 warm light (#f3ece4), left
   aligned, one line. Ours was a tall multi-stop orange gradient
   with oversized caps.
   The countdown and CTAs are KEPT rather than hidden -- the design
   simply had no promotion running when it was captured, and this
   store does run them -- but they are sized down to sit on one
   strip instead of dominating the page.
   ============================================================ */

.pp-refresh .bf-banner-minimal {
  background: #1f1433 !important;
  background-image: none !important;
  border: 0;
  box-shadow: none;
  padding: .6rem 0;
}
.pp-refresh .bf-banner-minimal__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: 2rem;
}
.pp-refresh .bf-banner-minimal__badge {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  font-size: .875rem;
  font-weight: 700;
  color: #f6b81c;
  text-shadow: none;
}
.pp-refresh .bf-banner-minimal__icon { display: none; }
.pp-refresh .bf-banner-minimal__offer,
.pp-refresh .bf-banner-minimal__amount {
  font-size: .875rem;
  font-weight: 700;
  color: #f6b81c;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
}
.pp-refresh .bf-banner-minimal__subtitle,
.pp-refresh .bf-banner-minimal__text {
  font-size: .875rem;
  font-weight: 400;
  color: #f3ece4;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
}

/* Countdown kept, compacted onto the strip. */
.pp-refresh .bf-banner-minimal__countdown {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
}
.pp-refresh .bf-banner-minimal__countdown-unit {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  min-width: 0;
  padding: .15rem .4rem;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
}
.pp-refresh .bf-banner-minimal__countdown-number {
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  text-shadow: none;
}
.pp-refresh .bf-banner-minimal__countdown-label {
  font-size: .625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  text-transform: uppercase;
}
.pp-refresh .bf-banner-minimal__countdown-sep { color: rgba(255,255,255,.45); }

/* CTAs kept, reduced to strip scale. */
.pp-refresh .bf-banner-minimal__actions { display: flex; gap: .5rem; }
.pp-refresh .bf-banner-minimal__cta {
  padding: .35rem .85rem;
  border-radius: var(--pp-radius-pill);
  font-size: .8125rem;
  font-weight: 700;
  background: var(--pp-yellow);
  color: #1f1433 !important;
  border: 0;
  box-shadow: none;
}
.pp-refresh .bf-banner-minimal__cta--secondary {
  background: transparent;
  color: #f3ece4 !important;
  border: 1.5px solid rgba(243, 236, 228, .6);
}
@media (max-width: 860px) {
  .pp-refresh .bf-banner-minimal__countdown { margin-left: 0; }
}

/* ============================================================
   SHOP ARCHIVE HEADER — measured against the design
   ------------------------------------------------------------
     section pad   40px 32px
     h1            48px/800, ls -1.2px, #1f1433
     lede          16px/400, #5e576b, ~657px measure
     buttons       46px tall, 14.72px/700, outlined, 12px gap,
                   20px above
   ============================================================ */

.pp-refresh .shop-archive__header {
  background: var(--pp-surface-warm);
  border-bottom: 1px solid var(--pp-line);
  padding-block: 0;
}
.pp-refresh .shop-archive__header-content {
  max-width: var(--pp-container);
  margin-inline: auto;
  padding: 2.5rem 2rem;
}
.pp-refresh .shop-archive__eyebrow {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c94600;
}
.pp-refresh .shop-archive__title {
  font-size: clamp(2rem, 5vw, 3rem);     /* 48px */
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #1f1433;
  margin: 0 0 .75rem;
}
.pp-refresh .shop-archive__subtitle,
.pp-refresh .shop-archive__subtitle p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #5e576b;
  max-width: 41rem;                       /* ~657px */
  margin: 0 0 .25rem;
}

/* Breadcrumb now sits above the eyebrow, small and quiet. */
.pp-refresh .shop-archive__breadcrumbs { margin: 0 0 .9rem; }
.pp-refresh .shop-archive__breadcrumbs,
.pp-refresh .shop-archive__breadcrumbs a,
.pp-refresh .woocommerce-breadcrumb {
  font-size: .8125rem;
  color: var(--pp-text-muted);
}
.pp-refresh .shop-archive__breadcrumbs a:hover { color: var(--pp-orange-dark); }

.pp-refresh .shop-archive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}
.pp-refresh .shop-archive__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 46px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-surface);
  color: #1f1433;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.pp-refresh .shop-archive__cta:hover {
  border-color: #f3cdb3;
  background: var(--pp-surface-peach);
  color: #1f1433;
}
.pp-refresh .shop-archive__cta i { color: var(--pp-orange-dark); }

/* The "Read More" toggle was an unstyled link under the copy. */
.pp-refresh .read-more-btn {
  background: none;
  border: 0;
  padding: 0;
  margin-top: .25rem;
  color: var(--pp-orange-dark);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The sitewide `a:not(.btn):not(.navbar-brand):not([class*="nav-link"])
   :not([class*="product-card"]) { color:#000 }` rule is specificity (0,4,1) and
   was winning over the archive CTA. Matched here rather than fought with
   !important. */
.pp-refresh .shop-archive__header .shop-archive__actions a.shop-archive__cta,
.pp-refresh .shop-archive__header .shop-archive__actions a.shop-archive__cta:hover,
.pp-refresh .shop-archive__header .shop-archive__actions a.shop-archive__cta span { color: #1f1433; }

/* ============================================================
   CONTAINER — one left edge for the whole page
   ------------------------------------------------------------
   Measured on the design: a 1240px container with 32px inline
   padding, so every element — logo, h1, lede, sidebar, cards,
   footer columns — starts at the same x.
   Ours had five different left edges (115/127/131/153/163)
   because each wrapper carried its own width rule.
   ============================================================ */

.pp-refresh { --pp-container: 1240px; }

.pp-refresh .container-max,
.pp-refresh .container,
.pp-refresh .pp-wrap,
.pp-refresh .pp-utilitybar__inner,
.pp-refresh .bf-banner-minimal__content,
.pp-refresh .shop-archive__header-content,
.pp-refresh .shop-archive__layout,
.pp-refresh .pp-footer__grid,
.pp-refresh .es-body__grid,
.pp-refresh .reward-section__content {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: 2rem;
}
/* These two already carry vertical padding of their own. */
.pp-refresh .shop-archive__header-content { padding: 2.5rem 2rem; }
.pp-refresh .reward-section__content { padding: 1.25rem 2rem; }
.pp-refresh .pp-utilitybar__inner { padding-block: .55rem; }
.pp-refresh .bf-banner-minimal__content { padding-block: 0; }

/* Nested wrappers must not add a second gutter. */
.pp-refresh .shop-archive__layout .container-max,
.pp-refresh .shop-archive__header-content .container-max,
.pp-refresh .pp-footer__grid .container-max,
.pp-refresh .reward-section__content .container-max { padding-inline: 0; max-width: none; }

@media (max-width: 640px) {
  .pp-refresh .container-max,
  .pp-refresh .container,
  .pp-refresh .pp-wrap,
  .pp-refresh .shop-archive__header-content,
  .pp-refresh .reward-section__content { padding-inline: 1.25rem; }
}

/* ---- utility bar text was black on black ----
 * The items are <a> elements, so the sitewide
 * `a:not(.btn):not(.navbar-brand):not([class*="nav-link"])
 *  :not([class*="product-card"]) { color:#000 }` rule — specificity (0,4,1) —
 * beat the refresh's (0,2,0) and painted them #000 on #0d0d0d: a contrast ratio
 * of 1.03:1, i.e. invisible. Matched on specificity rather than !important.
 */
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item span,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner span.pp-utilitybar__item,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner span.pp-utilitybar__item span { color: #f0edf5; }
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item:hover,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item:hover span { color: #fff; }
.pp-refresh .pp-utilitybar .pp-utilitybar__inner .pp-utilitybar__item i { color: var(--pp-orange); }

/* ---- lede spans the container ----
 * The design constrains it to ~657px because its mock copy is two lines. The
 * real category description runs five, which left a column of dead space, so it
 * runs the full width here.
 */
.pp-refresh .shop-archive__subtitle,
.pp-refresh .shop-archive__subtitle p { max-width: none; }

/* The inner wrappers sit inside .container-max / .container, so applying the
   gutter to both nested the padding twice and pushed their contents 32px right
   of the logo (234 vs 202). The outer container owns the gutter; the inner ones
   keep only their vertical rhythm. */
.pp-refresh .container-max .shop-archive__header-content,
.pp-refresh .container .shop-archive__header-content,
.pp-refresh .container-max .shop-archive__layout,
.pp-refresh .container .shop-archive__layout,
.pp-refresh .container-max .pp-footer__grid,
.pp-refresh .container .pp-footer__grid,
.pp-refresh .container-max .reward-section__content,
.pp-refresh .container .reward-section__content,
.pp-refresh .container-max .bf-banner-minimal__content,
.pp-refresh .container .bf-banner-minimal__content,
.pp-refresh .container-max .es-body__grid,
.pp-refresh .container .es-body__grid {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
  width: 100%;
}
.pp-refresh .container-max .shop-archive__header-content,
.pp-refresh .container .shop-archive__header-content { padding-block: 2.5rem; }
.pp-refresh .container-max .reward-section__content,
.pp-refresh .container .reward-section__content { padding-block: 1.25rem; }

/* The design left-aligns its section headings against the same 202px edge as
   everything else; the theme centred them. */
.pp-refresh .puppies,
.pp-refresh .callout,
.pp-refresh .faq,
.pp-refresh .perks,
.pp-refresh .testimonials,
.pp-refresh .social-gallery { text-align: left; }
.pp-refresh .puppies h2,
.pp-refresh .callout h2,
.pp-refresh .faq h2,
.pp-refresh .perks h2,
.pp-refresh .testimonials h2,
.pp-refresh .social-gallery h2 {
  display: block;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.pp-refresh .puppies .container-max,
.pp-refresh .puppies .container { text-align: left; }

/* ============================================================
   PUPPY CARD — ACTION BUTTON RHYTHM
   ------------------------------------------------------------
   Measured on the design preview, the card's action block is a
   single flex column:

       <div class="mt-auto flex flex-col gap-2 pt-4">

   i.e. 16px above the block (pt-4) and a uniform 8px between
   every action row (gap-2), with mt-auto pinning the block to
   the bottom of the card so buttons line up across a grid row
   even when a puppy's name wraps to two lines.

   Live measured 40 / 26 / 32 instead of 16 / 8 / 8 -- three
   different gaps between four buttons. The cause was not the
   rules in this file, which already set margin-top: auto and
   .5rem gaps. It was three *bottom* margins in the theme's
   woocommerce-styles.css that nothing here was overriding:

       .product-card__info-grid      margin-bottom: 16px   (:413)
       .product-card__actions        margin-bottom: 10px   (:449)
       .product-card__action-btn--book margin-bottom: 16px (:515)

   Those are (0,1,0) selectors, so the (0,2,0) rules here already
   outrank them -- they applied only because margin-bottom was
   never declared on this side. They are neutralised here rather
   than deleted there: woocommerce-styles.css is what renders when
   the refresh is switched off, and the fallback should keep its
   own spacing.

   Because the gaps are now carried entirely by explicit margins,
   the column gap on __content is zeroed -- otherwise it would add
   8px to every one of them, which is exactly how 16 became 24 and
   24 became 40. Each child then states its own offset, matching
   the design's mt-0.5 / mt-2 / pt-4 chain.
   ============================================================ */

.pp-refresh .product-card__content { gap: 0; }

.pp-refresh .product-card__breed { margin: 0; }
.pp-refresh .product-card__title { margin: .125rem 0 0; }
.pp-refresh .product-card__info-grid { margin: .5rem 0 0; }

.pp-refresh .product-card__actions,
.pp-refresh .product-card__actions--contact {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1rem;
}

.pp-refresh .product-card__action-btn--book { margin: .5rem 0 0; }
.pp-refresh .product-card__button { margin: .5rem 0 0; }

/* ============================================================
   HOMEPAGE BENEFITS CALLOUT
   ------------------------------------------------------------
   .callout was an orange gradient band (style.css:1446) and
   everything inside it was styled for a dark ground:

       .callout             color: white
       .callout-feature     background: rgba(255,255,255,.1)
                            backdrop-filter: blur(10px)
                            border: 2px solid rgba(255,255,255,.2)
       .callout-feature h3  color: white
                            text-shadow: 0 2px 8px rgba(0,0,0,.15)

   The refresh repainted the section cream (--pp-surface-warm) but
   never revisited any of that. The headings were left white on a
   near-white card -- about 1:1, i.e. invisible -- and the leftover
   text-shadow drew a faint grey ghost under each letter, which is
   why the labels read as cut off rather than merely missing. The
   glass card went the same way: a 10%-white fill on cream has
   nothing to sit against.

   Rebuilt to the design's benefit item -- a 48px solid-orange tile
   with a light glyph, an extrabold navy title, and the supporting
   sentence beneath it. That sentence was already in the markup as
   screen-reader-only text; the design shows it, so it is now
   visible to everyone (front-page.php).

   Laid out as a two-column grid rather than a flex row so the icon
   can span both rows without wrapping title and description in an
   extra div.
   ============================================================ */

.pp-refresh .callout { color: var(--pp-text); }
.pp-refresh .callout::before { background-image: none; }

.pp-refresh .callout-features {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  max-width: none;
}

.pp-refresh .callout-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .9rem;
  row-gap: .2rem;
  align-items: start;
  text-align: left;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  backdrop-filter: none;
  padding: 1.25rem;
}
.pp-refresh .callout-feature:hover {
  transform: none;
  background: var(--pp-surface);
  border-color: var(--pp-line-warm);
  box-shadow: var(--pp-shadow);
}

.pp-refresh .callout-icon {
  grid-row: 1 / span 2;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--pp-orange);
  color: var(--pp-surface-warm);
  box-shadow: none;
}
.pp-refresh .callout-feature:hover .callout-icon { transform: none; box-shadow: none; }
.pp-refresh .callout-icon i { font-size: 1.15rem; color: var(--pp-surface-warm); }

.pp-refresh .callout-feature h3 {
  margin: 0;
  color: var(--pp-navy);
  text-shadow: none;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}
.pp-refresh .callout-feature__desc {
  margin: 0;
  color: var(--pp-text-muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* Countdown digits: Montserrat's figures are proportional, so a ticking
   clock can reflow its own box every second and nudge the CTAs beside it.
   Tabular figures pin each digit to the same advance width. */
.pp-refresh .countdown-number,
.pp-refresh .bf-banner-minimal__countdown-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   DESKTOP HAMBURGER
   ------------------------------------------------------------
   The header now uses one navigation affordance at every width: a
   hamburger to the left of the logo, opening the same offcanvas
   drawer the small screens already used. The centre menu is gone.

   Three Bootstrap behaviours have to be answered:

   1. `.navbar-expand-lg .navbar-toggler { display: none }` hides the
      button from 992px up. That is (0,2,0) with no !important, so
      the rule below at (0,3,0) is enough -- no !important needed.

   2. `.navbar-expand-lg .navbar-collapse { display: flex !important }`
      forces the centre menu open at the same breakpoint. That one
      DOES carry !important, so it can only be answered in kind.

   3. The offcanvas markup sits outside <nav> (header.php:262), so
      Bootstrap's navbar-expand offcanvas overrides -- which would
      otherwise flatten the drawer into an inline bar at lg -- never
      match it. The drawer keeps working as a drawer on desktop.

   The menu markup stays in the document rather than being dropped on
   desktop: it is the same wp_nav_menu, and hiding it keeps a clean
   revert path if the centre nav is ever wanted back.

   The icon is drawn in CSS rather than carried as the inherited
   background-image SVG (style.css:375) so the bar weight, width and
   spacing are all controllable -- three 18x2 bars, 6px apart, optically
   centred in a 44px target that matches the logo's height.
   ============================================================ */

.pp-refresh .site-header .navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  transition: background .18s ease, border-color .18s ease;
}
.pp-refresh .site-header .navbar-toggler:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .32);
}
.pp-refresh .site-header .navbar-toggler:focus { box-shadow: none; outline: none; }
.pp-refresh .site-header .navbar-toggler:focus-visible {
  outline: 2px solid var(--pp-yellow);
  outline-offset: 2px;
}

/* Centre bar is the element; the other two are its pseudo-elements. */
.pp-refresh .site-header .navbar-toggler-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-image: none;
  background-color: #fff;
}
.pp-refresh .site-header .navbar-toggler-icon::before,
.pp-refresh .site-header .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}
.pp-refresh .site-header .navbar-toggler-icon::before { top: -6px; }
.pp-refresh .site-header .navbar-toggler-icon::after  { top: 6px; }

@media (min-width: 992px) {
  /* Answering Bootstrap's !important in kind -- see note 2 above. */
  .pp-refresh .site-header .navbar .navbar-collapse { display: none !important; }

  /* Hamburger and logo travel together on the left; everything else is
     pushed to the right edge by the brand's auto margin rather than by
     space-between, which would otherwise strand the logo mid-row once the
     centre menu is gone. */
  .pp-refresh .site-header .navbar > .container-max { gap: 1.1rem; }
  .pp-refresh .site-header .navbar-brand {
    margin: 0 auto 0 0;
    order: 0;
  }
  .pp-refresh .site-header .navbar-toggler { order: -1; }
}

/* ---- drawer header ----
 * The logo is gone from the drawer (header.php), so the orange gradient
 * block it sat on has nothing left to justify it -- it was a 1.5rem band of
 * colour above a white menu. The header is now the same white as the body
 * with a hairline under it, which lets the first menu item sit near the top
 * where it belongs.
 *
 * The close button has to be un-inverted at the same time: style.css:5932
 * sets `filter: brightness(0) invert(1)` to force Bootstrap's dark glyph
 * white against the orange. On white it would have been invisible.
 *
 * The title is screen-reader-only now, so it is out of flow and the close
 * button is the only item left in the flex row -- space-between would park
 * it on the left.
 */
.pp-refresh #mobileMenu .offcanvas-header {
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-line);
  padding: .85rem 1rem;
  min-height: 56px;
  justify-content: flex-end;
}
.pp-refresh #mobileMenu .btn-close {
  filter: none;
  opacity: .55;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: opacity .18s ease, background .18s ease;
}
.pp-refresh #mobileMenu .btn-close:hover {
  opacity: 1;
  background-color: var(--pp-surface-sand);
}
.pp-refresh #mobileMenu .btn-close:focus { box-shadow: none; }
.pp-refresh #mobileMenu .btn-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--pp-orange);
  outline-offset: 2px;
}

/* ============================================================
   FOOTER LEGIBILITY
   ------------------------------------------------------------
   Every link in the footer was rendering rgb(0,0,0) on the navy
   ground -- 1.21:1, i.e. unreadable. Non-link text was fine
   (headings 17.41:1, address and hours 11.62:1), which is the
   tell: this is the sitewide rule in style.css,

       a:not(.btn):not(.navbar-brand):not([class*="nav-link"]):not([class*="product-card"])
       { color: #000 }

   at specificity (0,4,1) -- the same rule that put black text on
   the black utility bar. Nothing in the footer could out-rank it,
   so it captured the column links, the phone, "Get directions",
   the social list and the credit line.

   Answered on specificity rather than !important, so these stay
   overridable. Chaining .site-footer.pp-footer plus the grid and
   the column gives (0,5,1), which beats (0,4,1) outright rather
   than relying on refresh.css merely loading later.

   Colours and sizes are taken from the design's own footer, which
   uses the same navy: links #d9cfe6 at 14px (11.62:1), the phone
   white at 16px (17.41:1), and "Get directions" in the brand
   yellow #f6b81c (9.78:1).
   ============================================================ */

.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__col a,
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__col ul li a {
  color: #d9cfe6;
  font-size: .875rem;
  text-decoration: none;
}
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__col a:hover,
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__col a:focus {
  color: #fff;
  text-decoration: underline;
}

.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__brand .pp-footer__phone a {
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
}
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__brand .pp-footer__phone a:hover {
  color: var(--pp-yellow);
}

.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__brand a.pp-footer__dir {
  color: var(--pp-yellow);
  font-size: .875rem;
  text-decoration: none;
}
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__brand a.pp-footer__dir:hover {
  color: #fff;
  text-decoration: underline;
}

.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__social a {
  color: #d9cfe6;
  font-size: .875rem;
  text-decoration: none;
}
.pp-refresh .site-footer.pp-footer .pp-footer__grid .pp-footer__social a:hover { color: #fff; }

/* The credit line sits outside the grid, so it needs its own chain. */
.pp-refresh .site-footer.pp-footer .site-info,
.pp-refresh .site-footer.pp-footer .site-info p { color: #b9afd0; font-size: .8125rem; }
.pp-refresh .site-footer.pp-footer .site-info .pp-credit a,
.pp-refresh .site-footer.pp-footer .site-info a.cosmick-credit {
  color: #d9cfe6;
  text-decoration: none;
}
.pp-refresh .site-footer.pp-footer .site-info .pp-credit a:hover,
.pp-refresh .site-footer.pp-footer .site-info a.cosmick-credit:hover {
  color: var(--pp-yellow);
  text-decoration: underline;
}

/* ---- award strip sits flush under the hero ----
 * reward-section-styles.css sets `.reward-section { margin: 40px 0 }` at
 * (0,1,0), which opened a 40px band of body background between the hero and
 * the strip. The strip already carries its own border-block and internal
 * padding, so the outer margin is redundant as well as unwanted.
 */
.pp-refresh .reward-section { margin-block: 0; }

/* ---- footer map ----
 * Moved here from the duplicate homepage footer (section#contact). It sits
 * under "Get directions" in the brand column, capped so it reads as a locator
 * chip rather than a panel, and clipped by the wrapper because an iframe
 * ignores border-radius of its own.
 */
.pp-refresh .pp-footer__map {
  margin-top: 1.1rem;
  max-width: 320px;
  border-radius: var(--pp-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  line-height: 0;
}
.pp-refresh .pp-footer__map iframe { display: block; width: 100%; border: 0; }

/* ---- utility bar type ----
 * Matched to the design's own top bar: 12px / 400 / 18px line-height in the
 * warm grey #c9bfb4. That lands at 10.8:1 on the #0d0d0d ground, so it stays
 * comfortably legible at the smaller size -- the earlier complaint about this
 * bar was contrast (it was rendering 1.03:1), not scale.
 */
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner a.pp-utilitybar__item span,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner .pp-utilitybar__item,
.pp-refresh .pp-utilitybar .pp-utilitybar__inner .pp-utilitybar__item span {
  color: #c9bfb4;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

/* ---- hero CTA row ----
 * The design's hero buttons are 14.72px / 700 in a 52px pill. The live pair
 * was 15px in a shorter box, which read as slightly heavier and tighter.
 */
.pp-refresh .hero .hero-buttons a {
  font-size: .92rem;
  font-weight: 700;
  min-height: 52px;
  padding: 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--pp-radius-pill);
}

/* ============================================================
   MOBILE FILTER BUTTON
   ------------------------------------------------------------
   woocommerce-styles.css:803 pins it bottom-right, which is the
   same corner the chat widget occupies -- so on a phone the chat
   bubble sat on top of it. It moves to the bottom-left and becomes
   a plain circular icon.
   ------------------------------------------------------------
   The bottom-left corner is not empty either: js/back-to-top.js
   injects its button at bottom:2rem / left:2rem via inline
   cssText, so a stylesheet cannot move it without !important --
   inline styles outrank everything else in the cascade. It is
   lifted to sit above the filter, sized to match, and the shift
   is scoped with :has() so it only happens on pages that actually
   render a filter button (the archive and areas-we-serve); every
   other page keeps the button where it has always been.

   The label is clipped rather than removed: the button already
   carries aria-label="Open filters", and keeping the text in the
   document costs nothing.
   ============================================================ */

@media (max-width: 992px) {
  .pp-refresh .shop-sidebar-toggle {
    left: 2rem;
    right: auto;
    bottom: 2rem;
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
    z-index: 1045;
    box-shadow: 0 8px 24px rgba(244, 94, 13, .45);
  }
  .pp-refresh .shop-sidebar-toggle:hover { transform: none; }
  .pp-refresh .shop-sidebar-toggle i { font-size: 1.4rem; line-height: 1; }
  .pp-refresh .shop-sidebar-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.pp-refresh:has(.shop-sidebar-toggle) .back-to-top {
    bottom: 6.5rem !important;
    left: 2rem !important;
    width: 56px !important;
    height: 56px !important;
  }
}

/* ============================================================
   DRAWER — SCROLLING AND POLISH
   ------------------------------------------------------------
   THE SCROLL BUG: style.css:5911 sets `.offcanvas { display: block }`,
   overriding Bootstrap's own `display: flex; flex-direction: column`.
   With the column gone, .offcanvas-body's `flex: 1 1 auto` had nothing
   to resolve against, so instead of taking the space left over below
   the header it grew to its full content height -- measured 912px of
   content inside an 82px drawer, with scrollHeight === clientHeight, so
   overflow-y:auto never engaged and everything past the fold was simply
   unreachable.

   Restoring the flex column fixes it, but the column alone is not
   enough: a flex child defaults to min-height:auto and refuses to
   shrink below its content, which would leave the body overflowing
   again. min-height:0 is what actually lets it scroll.
   ============================================================ */

.pp-refresh #mobileMenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  width: min(380px, 88vw);
}
.pp-refresh #mobileMenu .offcanvas-header { flex: 0 0 auto; }
.pp-refresh #mobileMenu .offcanvas-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 0 1.25rem;
}

/* Nav rows: lighter dividers, calmer height, a real hover target. */
.pp-refresh #mobileMenu .mobile-nav-item { border-bottom: 1px solid var(--pp-line); }
.pp-refresh #mobileMenu .mobile-nav-item:last-child { border-bottom: none; }
.pp-refresh #mobileMenu .mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--pp-navy);
  text-decoration: none;
}
.pp-refresh #mobileMenu .mobile-nav-link:hover,
.pp-refresh #mobileMenu .mobile-nav-link:focus {
  background: var(--pp-surface-peach);
  color: var(--pp-orange-dark);
}
.pp-refresh #mobileMenu .mobile-nav-submenu { background: var(--pp-surface-cream); }
.pp-refresh #mobileMenu .mobile-nav-submenu a {
  display: block;
  padding: .7rem 1.25rem .7rem 2.1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--pp-text);
  text-decoration: none;
}
.pp-refresh #mobileMenu .mobile-nav-submenu a:hover { color: var(--pp-orange-dark); }

/* ---- account + language: two matched buttons, not stray links ----
 * The account row was an unstyled inline anchor with a bare icon and a
 * chevron, sitting flush against the nav list with no separation.
 */
.pp-refresh #mobileMenu .mobile-nav-account,
.pp-refresh #mobileMenu .mobile-nav-lang { padding: .85rem 1.25rem 0; }
.pp-refresh #mobileMenu .mobile-nav-lang { padding-bottom: .25rem; }

.pp-refresh #mobileMenu .mobile-nav-account-link,
.pp-refresh #mobileMenu .mobile-nav-lang .lang-switch {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: var(--pp-radius-pill);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.pp-refresh #mobileMenu .mobile-nav-account-link {
  border: 1.5px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-navy);
}
.pp-refresh #mobileMenu .mobile-nav-account-link:hover {
  background: var(--pp-surface-peach);
  border-color: #f3cdb3;
}
.pp-refresh #mobileMenu .mobile-nav-account-link i:first-child { font-size: 1.1rem; color: var(--pp-orange); }
/* Chevron to the far right. */
.pp-refresh #mobileMenu .mobile-nav-account-link i:last-child { margin-left: auto; font-size: .85rem; opacity: .5; }

.pp-refresh #mobileMenu .mobile-nav-lang .lang-switch {
  justify-content: center;
  background: var(--pp-navy);
  color: #fff8f2;
  border: 1.5px solid var(--pp-navy);
}
.pp-refresh #mobileMenu .mobile-nav-lang .lang-switch:hover {
  background: var(--pp-navy-soft);
  border-color: var(--pp-navy-soft);
  color: #fff8f2;
}

/* ---- contact block ---- */
.pp-refresh #mobileMenu .mobile-nav-contact {
  margin-top: 1rem;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--pp-line);
  display: grid;
  gap: .5rem;
}
.pp-refresh #mobileMenu .mobile-nav-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-surface-cream);
  text-decoration: none;
}
.pp-refresh #mobileMenu a.mobile-nav-contact-item:hover { background: var(--pp-surface-peach); }
.pp-refresh #mobileMenu .mobile-nav-contact-item > i { margin-top: .15rem; font-size: 1rem; color: var(--pp-orange); }
.pp-refresh #mobileMenu .mobile-nav-contact-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}
.pp-refresh #mobileMenu .mobile-nav-contact-value {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pp-navy);
}
.pp-refresh #mobileMenu .mobile-nav-hours-row { display: block; }

/* ============================================================
   REACH TICKER
   ------------------------------------------------------------
   Sits between the hero and the award strip. A navy band reads
   cleanly against the orange hero above and the near-white strip
   below without introducing a new colour.

   The track holds two identical runs of the city list, so the
   loop translates -50% and meets itself exactly -- no jump, and
   no JavaScript. Hovering pauses it, and prefers-reduced-motion
   drops the animation entirely and lets the list wrap as static
   text rather than leaving half of it off-screen.
   ============================================================ */

.pp-refresh .pp-reach {
  background: var(--pp-navy);
  color: #fff8f2;
  border-block: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.pp-refresh .pp-reach__inner {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding: .85rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.pp-refresh .pp-reach__lead {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-yellow);
  text-decoration: none;
  white-space: nowrap;
}
.pp-refresh .pp-reach__lead:hover { color: #fff8f2; }
.pp-refresh .pp-reach__lead i { font-size: .9rem; }

/* The mask fades both ends so items enter and leave instead of
   being chopped off at a hard edge. */
.pp-refresh .pp-reach__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.pp-refresh .pp-reach__track {
  display: flex;
  width: max-content;
  animation: pp-reach-scroll 42s linear infinite;
}
.pp-refresh .pp-reach:hover .pp-reach__track,
.pp-refresh .pp-reach:focus-within .pp-reach__track { animation-play-state: paused; }

.pp-refresh .pp-reach__run {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0;
  padding: 0 1.125rem;
  list-style: none;
}
.pp-refresh .pp-reach__run li {
  position: relative;
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff8f2;
}
/* Yellow dot between items, drawn in the gap rather than as a character. */
.pp-refresh .pp-reach__run li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.2rem;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--pp-yellow);
  opacity: .8;
}

@keyframes pp-reach-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-refresh .pp-reach__viewport { -webkit-mask-image: none; mask-image: none; }
  .pp-refresh .pp-reach__track { animation: none; width: auto; flex-wrap: wrap; }
  .pp-refresh .pp-reach__track .pp-reach__run:nth-child(2) { display: none; }
  .pp-refresh .pp-reach__run { flex-wrap: wrap; gap: .5rem 2.25rem; }
}

@media (max-width: 782px) {
  .pp-refresh .pp-reach__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-inline: 1.25rem;
  }
  .pp-refresh .pp-reach__viewport { width: 100%; }
}

/* The ticker's lead is an anchor, so style.css:64's
   a:not(.btn):not(.navbar-brand):not([class*="nav-link"]):not([class*="product-card"])
   at (0,4,1) captured it and painted it #000 on the navy band -- 1.21:1. Same
   trap as the utility bar and the footer. Matched above it at (0,5,1). */
.pp-refresh .pp-reach .pp-reach__inner a.pp-reach__lead,
.pp-refresh .pp-reach .pp-reach__inner a.pp-reach__lead span { color: var(--pp-yellow); }
.pp-refresh .pp-reach .pp-reach__inner a.pp-reach__lead:hover,
.pp-refresh .pp-reach .pp-reach__inner a.pp-reach__lead:hover span { color: #fff8f2; }

/* ============================================================
   WCAG AA CONTRAST
   ------------------------------------------------------------
   Measured by compositing every ancestor background (including
   alpha) down to the page ground, then computing the real ratio.

   1. SOLID ORANGE BUTTONS. White on the brand orange #f45e0d is
      3.25:1. WCAG AA needs 4.5:1 for text below 18.66px bold --
      so the nav CTA (15px), the six card "Call" buttons (12px),
      "Load More Puppies" (16px) and the form submit all failed.
      White on #f45e0d cannot reach 4.5 at any weight; the fill
      has to darken.

      Solid button fills therefore move to --pp-orange-dark
      (#c94600), which is already in the palette and gives 4.82:1.
      This is a visible brand change and it is called out in the
      release notes rather than slipped in: #f45e0d is KEPT for
      the hero ground, the icon tiles and large display text,
      where it already passes (large text needs only 3:1, and
      non-text/icon contrast likewise).

   2. COUNTDOWN PANEL. .bf-countdown sits at rgba(31,20,51,.28)
      over the orange hero, compositing to rgb(184,73,24); the
      yellow label on it measured 2.93:1. Deepening the panel to
      .55 composites to rgb(127,53,34) and takes the same yellow
      to 4.85:1 -- so the accent colour is preserved and the
      contrast is fixed by the surface underneath it instead.
   ============================================================ */

.pp-refresh .pp-navcta,
.pp-refresh .product-card__action-btn--call,
.pp-refresh .btn.btn-secondary,
.pp-refresh .btn-submit-form,
.pp-refresh .unlock-pricing-submit {
  background: var(--pp-orange-dark);
  border-color: var(--pp-orange-dark);
}
.pp-refresh .pp-navcta:hover,
.pp-refresh .product-card__action-btn--call:hover,
.pp-refresh .btn.btn-secondary:hover,
.pp-refresh .btn-submit-form:hover,
.pp-refresh .unlock-pricing-submit:hover {
  background: var(--pp-orange-darker);
  border-color: var(--pp-orange-darker);
}

.pp-refresh .bf-countdown { background: rgba(31, 20, 51, .55); }

/* Both of the above lost on specificity and are re-stated at the weight that
   actually wins: the orange fill is set by `.pp-refresh .pp-btn.pp-orange`
   (0,3,0) and the countdown panel by
   `.pp-refresh .hero-blackfriday .bf-countdown` (0,3,0), while the rules above
   were (0,2,0). Matched here, later in the file. */
.pp-refresh .pp-btn.pp-orange {
  background: var(--pp-orange-dark);
  border-color: var(--pp-orange-dark);
}
.pp-refresh .pp-btn.pp-orange:hover,
.pp-refresh .pp-btn.pp-orange:focus {
  background: var(--pp-orange-darker);
  border-color: var(--pp-orange-darker);
}
.pp-refresh .hero-blackfriday .bf-countdown { background: rgba(31, 20, 51, .55); }

/* The Spanish CTA band was "fixed" earlier by setting it to --pp-orange-fill,
   which is #f45e0d -- the same colour it already was, so the ratio never moved.
   Measured again: the white line 3.25:1 and the peach address 2.65:1, both
   under the 4.5 needed below 18.66px bold. Darkening the band to #c94600 takes
   white to 4.82:1, and the address moves from the peach to #fff8f2 for 4.58:1
   while staying warm rather than going pure white. */
.pp-refresh .es-cta { background: var(--pp-orange-dark); }
.pp-refresh .es-cta__text { color: #fff; }
.pp-refresh .es-cta .es-cta__addr { color: #fff8f2; }