/* ==========================================================================
   DRIPEM | Pet Solutions category page (first concept, Coming Soon)
   Block prefixes on this page:
     dripem-psh = Pet Solutions Header (hero)
     dripem-pch = Pet Challenge (high level, no clinical detail)
     dripem-ppg = Pet Products Grid (Coming Soon, Cats and Dogs)
     dripem-ppt = Pet Polaris Teaser
   ========================================================================== */

:root {
  --ps-border-tint: rgba(68, 139, 67, 0.22);
  --ps-bg-tint: rgba(99, 186, 100, 0.10);
  --ps-line-faint: rgba(68, 139, 67, 0.14);
  --ps-muted-border: #d7e5d4;
  --ps-muted-label: #a8c2a5;
  --ps-muted-name: #c9ddc7;
  --ps-muted-desc: #bcd4b9;
  --ps-muted-pill: #a4c4a1;
  --ps-muted-pill-bg: #f4f8f3;
  --ps-muted-pill-border: #dcebda;
}

/* --------------------------------------------------------------------
   Block 1: Hero
   -------------------------------------------------------------------- */

.dripem-psh-wrap {
  background: var(--bg-off-white);
  padding: 80px 52px;
  position: relative;
  overflow: hidden;
}

.dripem-psh-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dripem-psh-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.dripem-psh-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dripem-mid-green);
  margin-bottom: 18px;
}

.dripem-psh-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

.dripem-psh-h1 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}

.dripem-psh-h1 em {
  font-style: normal;
  color: var(--dripem-mid-green);
}

.dripem-psh-sub {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0 auto 32px;
  max-width: 440px;
}

.dripem-psh-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dripem-dark-green);
  border: 1.5px solid var(--ps-border-tint);
  background: var(--ps-bg-tint);
  padding: 6px 14px;
  border-radius: 100px;
}

/* Row of dogs, background removed, sitting directly on the page
   background below the hero text. Full width of the hero container,
   no frame or backdrop needed since the cutout has no hard edge. Pulled
   up so the text's white page background overlaps the empty space
   above the dogs' heads; the dogs themselves sit lower in the photo
   and stay clear of the text (checked against the actual image). */
.dripem-psh-strip {
  margin-top: -5.5%;
  width: 100%;
}

.dripem-psh-strip img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .dripem-psh-wrap { padding: 60px 24px; }
  .dripem-psh-content { max-width: 100%; }
  .dripem-psh-strip {
    margin-top: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dripem-psh-strip img {
    width: auto;
    max-width: none;
    height: 150px;
  }
}

/* --------------------------------------------------------------------
   Block 2: The Challenge (high level, no clinical detail)
   -------------------------------------------------------------------- */

.dripem-pch-wrap {
  background: var(--bg-off-white);
  padding: 80px 52px;
}

.dripem-pch-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dripem-pch-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dripem-mid-green);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.dripem-pch-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

.dripem-pch-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 640px;
}

.dripem-pch-subtitle {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}

/* Title/intro text on the left, the leaping cat photo on the right,
   as a lively accent next to "When the immune response itself becomes
   the problem". Text column flexes, photo column stays a fixed width
   so it never crowds the copy on narrower desktop widths. */
.dripem-pch-header {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 40px;
}

.dripem-pch-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.dripem-pch-header-media {
  flex: 0 0 300px;
  max-width: 300px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dripem-pch-header-media.in-view {
  opacity: 1;
  transform: translateY(0);
}

.dripem-pch-header-media img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 60%;
  animation: dripem-pch-breathe 4s ease-in-out infinite;
}

/* Subtle "alive" idle animation, same pattern used on hero photos and
   illustrations elsewhere on the site. */
@keyframes dripem-pch-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .dripem-pch-header-media img { animation: none; }
}

.dripem-pch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Full bleed photo cards. Title always visible over a soft gradient;
   the body text and a fuller dark overlay fade in on hover. The
   Caregiver and Vet cards have no photo yet, .dripem-pch-card--placeholder
   gives them a brand-colored gradient and a faint icon instead, built
   on the exact same markup so swapping in a real photo later is just
   replacing the placeholder block with an <img class="dripem-pch-card-img">. */
.dripem-pch-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dripem-darkest-green);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dripem-pch-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.dripem-pch-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dripem-pch-card:hover .dripem-pch-card-img {
  transform: scale(1.06);
}

.dripem-pch-card--placeholder {
  background: linear-gradient(145deg, var(--dripem-mid-green), var(--dripem-darkest-green));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dripem-pch-card-placeholder-icon {
  opacity: 0.16;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dripem-pch-card:hover .dripem-pch-card-placeholder-icon {
  opacity: 0.1;
  transform: scale(1.08);
}

.dripem-pch-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 20, 10, 0.80) 0%, rgba(10, 20, 10, 0.4) 30%, rgba(10, 20, 10, 0) 56%);
  transition: background 0.35s ease;
}

.dripem-pch-card:hover .dripem-pch-card-overlay {
  background: rgba(10, 20, 10, 0.72);
}

.dripem-pch-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 20px;
  z-index: 1;
}

.dripem-pch-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.dripem-pch-card-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 8px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

.dripem-pch-card:hover .dripem-pch-card-text {
  max-height: 140px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dripem-pch-card-img,
  .dripem-pch-card-placeholder-icon,
  .dripem-pch-card-overlay,
  .dripem-pch-card-text {
    transition: none;
  }
}

/* Touch devices don't really hover, so below 860px the full overlay
   and body text are just always shown rather than gated behind a
   gesture that won't reliably happen. */
@media (max-width: 860px) {
  .dripem-pch-grid { grid-template-columns: 1fr; gap: 16px; }
  .dripem-pch-card { aspect-ratio: 16 / 11; }
  .dripem-pch-card-overlay { background: rgba(10, 20, 10, 0.72); }
  .dripem-pch-card-text { max-height: 140px; opacity: 1; margin-top: 8px; }
  .dripem-pch-header { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
  .dripem-pch-header-media { flex-basis: auto; max-width: 220px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .dripem-pch-wrap { padding: 60px 24px; }
}

/* --------------------------------------------------------------------
   Block 3: Products grid, one shared formulation, Coming Soon
   -------------------------------------------------------------------- */

.dripem-ppg-wrap {
  background: var(--bg-white);
  padding: 80px 52px;
}

.dripem-ppg-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.dripem-ppg-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dripem-mid-green);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.dripem-ppg-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

.dripem-ppg-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.dripem-ppg-intro {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.65;
  /* Was 0: the product box's resting spot is measured off the photo
     below, which sat immediately under this text with no breathing
     room between the two. The scroll-pin math in pet-solutions.js
     re-measures everything live, so this flows straight through to
     where the box settles too, nothing there needed to change. */
  margin: 0 0 24px;
  max-width: 620px;
}

/* Three phase pin sequence, see pet-solutions.js. Both layers below,
   .dripem-ppg-pin (eyebrow, title, intro, the empty .dripem-ppg-gap
   spacer, and the photo) and the product box (.dripem-ppg-soon-wrap),
   are plain normal flow / default position here. The script computes
   everything fresh from the current scroll position on every tick (no
   stored mode/state), and switches each one between its normal flow
   position, position:fixed (while the page is scrolling through the
   pin's "stuck" window) and position:absolute (once that window has
   been scrolled past, so it continues away with the page, no jump).
   While stuck, the pin holds still and the box fades in and rises from
   a starting point low over the photo to its resting point, overlapping
   only the empty top margin of the photo, never the dogs. Disabled
   below 860px, see the breakpoint at the bottom of this block, where
   it's just a plain static stack. */
.dripem-ppg-stage {
  position: relative;
}

.dripem-ppg-pin {
  position: relative;
  z-index: 1;
}

/* Tall enough to hold the product box's own height (currently ~188px,
   a wide short card, not the tall square it used to be) minus how far
   it's allowed to overlap into the photo (OVERLAP_PX in
   pet-solutions.js, which leans on the photo's own large safe margin so
   most of the box's height can sit over the photo instead), plus a
   little breathing room, so the box's final resting spot never reaches
   up into the title/intro text above it. Kept short on purpose: this is
   also exactly what shows, empty, as soon as the page loads, before the
   user has scrolled the box into place, so the photo should read as
   sitting close under the title, not a large gap. */
.dripem-ppg-gap {
  height: 0;
}

.dripem-ppg-media {
  position: relative;
  /* Sits behind the title/intro (see z-index below) so pulling it up
     to overlap them is safe: this only ever reaches into the photo's
     own large blank margin above the dogs, never the dogs themselves
     (checked, see pet-solutions.js). -3.5vh / -27px is 5% of the
     element's own rendered height (70vh capped at 540px), mirroring
     that same min() clamp so the overlap fraction holds at any
     viewport height, not just a fixed one. Desktop only: the mobile
     breakpoint below fully overrides this media's margin-top with its
     own photo/box overlap value, so this never reaches the phone. */
  z-index: -1;
  margin-top: max(-3.5vh, -27px);
  width: 100%;
  height: 70vh;
  max-height: 540px;
  border-radius: 20px;
  overflow: hidden;
}

.dripem-ppg-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* left: 0; right: 0 with no max-width/margin here means this spans the
   exact same width as .dripem-ppg-stage, which is the same width as the
   dogs photo (.dripem-ppg-media) below it, so the carousel frame and
   arrow washes read edge to edge with the photo, no inset margin on
   either side. */
.dripem-ppg-soon-wrap {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
}

/* Carousel viewport. Wider than the card itself now (see .dripem-ppg-slide
   below), so the previous/next product can peek in from behind each edge
   (.dripem-ppg-peek). overflow: hidden crops whatever spills past this
   box's own edges, which is what gives the peeks their "tucked behind,
   cropped by the frame" look. Still sized purely by the single active
   .dripem-ppg-slide via the CSS Grid stacking trick below (every slide
   shares one grid cell, sized to the tallest), so swapping slides, or
   which product is peeking, never changes this element's own height,
   which the scroll pin math in pet-solutions.js depends on (it reads
   #dripem-ppg-box-wrap's offsetHeight live on every scroll tick). */
.dripem-ppg-carousel {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  /* Lets the slide's rotateY (see pet-solutions.js, the "Carousel"
     section) read as an actual turn in space rather than a flat skew. */
  perspective: 1400px;
}

/* The active card itself stays the same width it always was, just
   re-centred inside the now wider viewport above, with the peeks filling
   the extra space on each side. Transition is driven by JS toggling an
   inline transform (translateX + rotateY) between slides, this is just
   the timing/easing for that change; slowed slightly and given a more
   decelerated curve than a plain ease so the swap reads as a card
   turning into place rather than a flat crossfade. */
.dripem-ppg-slide {
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  width: 100%;
  max-width: 670px;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  backface-visibility: hidden;
  transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.dripem-ppg-slide.is-active {
  position: relative;
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Previous/next product peeking in from behind each edge of the frame,
   scaled down to card-sized preview and sat a layer behind the active
   card (z-index below it, see .dripem-ppg-slide.is-active above), so the
   active card's own edge visually overlaps and "covers" part of it. A
   lightweight preview only, photo and name, never the full card: the
   full card's body text would be unreadable at this width, and
   duplicating the active card's own <a> markup here would mean two
   links pointing at two different places doing the same visual job,
   which is both confusing and invalid to nest. Real <button>s, since
   clicking one is a carousel control (switch slide), not a navigation
   link. Content is filled in for the page's two products at build time
   and kept in sync by pet-solutions.js on every slide change (see
   "Carousel" in that file), reading whichever slide is now the previous/
   next one, so this is already correct however many products get added
   later, not hardcoded to exactly two. */
.dripem-ppg-peek {
  position: absolute;
  top: 8%;
  bottom: 8%;
  z-index: 1;
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--bg-white);
  border: 1.5px solid var(--ps-border-tint);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(29, 63, 31, 0.1);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.dripem-ppg-peek:hover {
  opacity: 1;
  box-shadow: 0 14px 32px rgba(29, 63, 31, 0.16);
}

.dripem-ppg-peek--left { left: -64px; }
.dripem-ppg-peek--right { right: -64px; }

.dripem-ppg-peek-photo {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dripem-ppg-peek-photo img {
  display: block;
  width: 78%;
  height: 100%;
  object-fit: contain;
}

.dripem-ppg-peek-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dripem-darkest-green);
  text-align: center;
}

/* Previous/next controls: transparent off-white washes running the full
   height of each edge, rather than small floating buttons, so the click
   target is the whole edge of the frame, not just a small circle, and
   so they read as part of the frame itself. Sits above the peeks
   (z-index) right at the very edge where a peek is most cropped, so
   clicking close to the edge always hits the arrow, and clicking
   further in on a peek's own visible card hits the peek directly, see
   .dripem-ppg-peek above, both doing the same goTo() in
   pet-solutions.js. */
.dripem-ppg-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 72px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  color: var(--dripem-dark-green);
  cursor: pointer;
  transition: color 0.2s ease;
}

.dripem-ppg-arrow svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(29, 63, 31, 0.25));
}

.dripem-ppg-arrow--prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 18px;
  background: linear-gradient(to right, rgba(248, 250, 247, 0.92) 0%, rgba(248, 250, 247, 0.55) 55%, rgba(248, 250, 247, 0) 100%);
}

.dripem-ppg-arrow--next {
  right: 0;
  justify-content: flex-end;
  padding-right: 18px;
  background: linear-gradient(to left, rgba(248, 250, 247, 0.92) 0%, rgba(248, 250, 247, 0.55) 55%, rgba(248, 250, 247, 0) 100%);
}

.dripem-ppg-arrow:hover { color: var(--dripem-mid-green); }

/* Active product card, entire card is a link straight to the product
   page for whichever formulation its slide holds. One card shown at a
   time, swapped via the carousel above. Was previously a shaded out
   "Coming Soon" treatment (dashed border, muted text, a haze overlay
   with a corner badge) before the first Kata Immune form (100 tablets)
   shipped; kept the same class names below so pet-solutions.js's
   scroll-pin positioning and reveal observer keep working unchanged. */
/* height: 100% so every product's card fills its .dripem-ppg-slide
   (which itself stretches to the grid cell's own height, see the
   .dripem-ppg-carousel/.dripem-ppg-slide sizing comment above) rather
   than just its own, possibly shorter, content height. Without this a
   product with less copy (e.g. Kata Digestive) rendered a visibly
   shorter bordered card than Kata Immune's with a gap below it, since a
   block child does not stretch to fill a taller parent on its own. */
.dripem-ppg-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  background: var(--bg-white);
  border: 2px solid var(--dripem-mid-green);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  opacity: 0;
  transform: translateY(28px);
  box-shadow: 0 10px 28px rgba(29, 63, 31, 0.14), 0 2px 8px rgba(29, 63, 31, 0.08);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Product photo on the left, same card the whole thing links from, so
   it reads at a glance as an actual product rather than a text teaser.
   Deliberately taken OUT of normal flow (position: absolute) rather
   than sized as a flex sibling: an absolutely positioned element is
   never considered when the browser works out the card's own height,
   so however large the source file is, it can only ever fill
   whatever height the text body (the one element still in flow)
   already establishes. The card's height is set once by the text and
   the photo always matches it, never the other way around. */
.dripem-ppg-soon-photo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 172px;
  height: 100%;
  overflow: hidden;
  background: var(--bg-off-white);
  border-right: 1px solid var(--ps-border-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The product shot is a transparent cutout (no background, no box to
   crop into). Fixed to a definite width/height (not auto + max-width/
   max-height) with object-fit: contain, so every product's photo
   occupies the exact same box here, comfortably inset from the panel's
   edges, whatever that product's own source image dimensions happen to
   be: auto-sizing from each image's own intrinsic aspect ratio made the
   Kata Immune and Kata Digestive bottles render at visibly different
   sizes, since the two source cutouts aren't quite the same aspect
   ratio. object-fit: contain still letterboxes each photo to preserve
   its own proportions within that fixed box, it just stops the box
   itself from varying by product. */
.dripem-ppg-soon-photo img {
  position: static;
  display: block;
  width: 80%;
  height: 90%;
  object-fit: contain;
}

/* Thin brand gradient strip along the top edge, the "highlight" that
   marks this card as the one active product among the (future) rest
   of the lineup. Purely decorative, no markup needed. z-index above
   the photo panel so it still reads as a single strip running the
   full width of the card, photo side included, rather than stopping
   where the photo panel happens to start. */
.dripem-ppg-soon::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dripem-mid-green), var(--dripem-light-green));
}

.dripem-ppg-soon.in-view {
  opacity: 1;
  transform: translateY(0);
}

.dripem-ppg-soon:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(29, 63, 31, 0.18), 0 4px 14px rgba(29, 63, 31, 0.10);
  border-color: var(--dripem-dark-green);
  text-decoration: none;
}

.dripem-ppg-soon-body {
  padding: 22px 26px 22px 196px;
  color: inherit;
  text-align: left;
}

/* Label, name and the species tags all share one compact header area:
   the label sits on its own line (flex-basis: 100%), then the name and
   tags flow side by side on the line below. Wide and short on purpose,
   this whole box used to be a tall square and left too little of the
   photo behind it visible. */
.dripem-ppg-soon-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  margin-bottom: 10px;
}

.dripem-ppg-soon-label {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dripem-mid-green);
  margin: 0;
}

.dripem-ppg-soon-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--dripem-darkest-green);
  margin: 0;
}

.dripem-ppg-soon-species {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}

.dripem-ppg-soon-species-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dripem-dark-green);
  background: var(--ps-bg-tint);
  border: 1px solid var(--ps-border-tint);
  padding: 3px 12px;
  border-radius: 100px;
}

.dripem-ppg-soon-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 100%;
}

.dripem-ppg-soon-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dripem-dark-green);
  background: var(--ps-bg-tint);
  border: 1px solid var(--ps-border-tint);
  padding: 4px 10px;
  border-radius: 100px;
}

/* Footer row: the POLARIS tag on the left, a text CTA with an arrow on
   the right, making it clear the whole card leads through to the full
   product page. */
.dripem-ppg-soon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.dripem-ppg-soon-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dripem-dark-green);
  transition: color 0.2s ease;
}

.dripem-ppg-soon-cta svg {
  transition: transform 0.2s ease;
}

.dripem-ppg-soon:hover .dripem-ppg-soon-cta {
  color: var(--dripem-mid-green);
}

.dripem-ppg-soon:hover .dripem-ppg-soon-cta svg {
  transform: translateX(3px);
}

/* Below this width pet-solutions.js disables the whole three phase pin
   sequence (see "Products section pin sequence" in that file) and
   these rules take over: a plain static stack, title and intro, then
   a shorter static photo, then the box below it, all normal flow. */
@media (max-width: 860px) {
  /* Static stack order here is title/intro, then the product box, then
     the photo (the user wants the box read before the photo on phone).
     .dripem-ppg-pin holds the title/intro/gap/photo as one block for
     the desktop pin effect, so display:contents unwraps it here,
     letting its children and the box (a sibling of pin, not nested
     inside it) all reorder together as plain flex items of the stage. */
  .dripem-ppg-stage {
    display: flex;
    flex-direction: column;
  }
  .dripem-ppg-pin {
    display: contents;
  }
  /* Phone keeps its own normal text spacing, the tightened desktop
     margin/overlap tricks above (.dripem-ppg-intro margin, the
     negative z-index + margin-top on .dripem-ppg-media for the
     title/photo overlap) are a desktop-only look and are reset here. */
  .dripem-ppg-intro { margin: 0 0 48px; }
  .dripem-ppg-gap { height: 0; }
  .dripem-ppg-media {
    z-index: 0;
    height: 260px;
    max-height: none;
    /* Pulled up under the box by 30% of its own height, done here as a
       plain static negative margin since there is no scroll/pin effect
       on phone. Checked against the photo itself (see
       pet-solutions.js comments): the dogs do not start until a good
       bit further down than this, so the box's bottom edge stays
       clear of them. */
    margin-top: -78px;
    margin-bottom: 28px;
    order: 2;
  }
  .dripem-ppg-soon-wrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    max-width: 480px;
    margin: 0 auto;
    opacity: 1;
    order: 1;
  }

  /* No room for a peeking side card down here, the active card alone is
     already close to the full viewport width, so this view keeps only
     the swipe/arrow interaction, not the "behind the edge" effect. */
  .dripem-ppg-slide { max-width: none; }
  .dripem-ppg-peek { display: none; }

  /* Narrower than the desktop edge washes, and flush with the card's
     own edge rather than outside it, to match the smaller card. */
  .dripem-ppg-arrow { width: 44px; }
  .dripem-ppg-arrow--prev { left: 0; padding-left: 8px; }
  .dripem-ppg-arrow--next { right: 0; padding-right: 8px; }

  /* The side by side photo+body split reads fine on desktop but gets
     cramped on phone, so the card switches to a vertical stack here:
     full width photo panel on top, body underneath, both back in
     plain normal flow (no more absolute positioning, so this is a
     deliberate height increase, not the fixed-height desktop card). */
  .dripem-ppg-soon {
    display: flex;
    flex-direction: column;
  }
  .dripem-ppg-soon-photo {
    position: static;
    width: 100%;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--ps-border-tint);
  }
  .dripem-ppg-soon-photo img {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    display: block;
    width: auto;
    max-width: 62%;
    height: auto;
    max-height: 85%;
  }
  .dripem-ppg-soon-body {
    padding: 24px 26px 28px;
  }
}

@media (max-width: 768px) {
  .dripem-ppg-wrap { padding: 60px 24px; }
}

@media (max-width: 520px) {
  /* Slightly shorter photo panel on the smallest phones, card stays
     the vertical stack set up at 860px above. */
  .dripem-ppg-soon-photo { height: 180px; }
}

/* --------------------------------------------------------------------
   Block 4: POLARIS technology teaser
   -------------------------------------------------------------------- */

.dripem-ppt-wrap {
  background: var(--dripem-darkest-green);
  padding: 80px 52px;
  position: relative;
  overflow: hidden;
}

.dripem-ppt-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.07;
}

.dripem-ppt-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dripem-ppt-top {
  margin-bottom: 48px;
  max-width: 600px;
}

.dripem-ppt-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dripem-light-green);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.dripem-ppt-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-light-green);
  flex-shrink: 0;
}

.dripem-ppt-logo-img {
  display: block;
  height: 108px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 8px;
}

.dripem-ppt-heading {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 16px;
}

.dripem-ppt-heading em {
  font-style: normal;
  color: var(--dripem-light-green);
}

.dripem-ppt-desc {
  font-size: 15px;
  color: #8fac8f;
  line-height: 1.7;
  margin: 0;
}

.dripem-ppt-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.dripem-ppt-pillar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(99, 186, 100, 0.16);
  border-radius: 14px;
  padding: 24px 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              background 0.2s ease, border-color 0.2s ease;
}

.dripem-ppt-pillar.in-view {
  opacity: 1;
  transform: translateY(0);
}

.dripem-ppt-pillar:hover {
  background: rgba(99, 186, 100, 0.08);
  border-color: rgba(99, 186, 100, 0.3);
}

.dripem-ppt-pillar-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(68, 139, 67, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.dripem-ppt-pillar-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dripem-light-green);
  margin-bottom: 4px;
}

.dripem-ppt-pillar-title {
  font-size: 14px;
  font-weight: 600;
  color: #d8f0d8;
  margin-bottom: 8px;
  line-height: 1.3;
}

.dripem-ppt-pillar-desc {
  font-size: 12.5px;
  color: #7a9a7a;
  line-height: 1.6;
}

.dripem-ppt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dripem-mid-green);
  color: #fff;
  border-radius: 10px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dripem-ppt-cta:hover {
  background: var(--dripem-light-green);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.dripem-ppt-cta-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dripem-ppt-cta:hover .dripem-ppt-cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .dripem-ppt-pillars { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .dripem-ppt-wrap { padding: 60px 24px; }
}

@media (max-width: 380px) {
  .dripem-ppt-wrap { padding: 48px 16px; }
  .dripem-ppt-logo-img { height: 78px; }
  .dripem-ppt-cta { width: 100%; justify-content: center; }
}