/* ==========================================================================
   Kata Immune product page
   Structure mirrors PEMIX-S25 / TRS Lactea (pemix-s25.css / trs-lactea.css),
   content for Kata Immune / cats and dogs. Block prefix: dripem-ki*
   ========================================================================== */

:root {
  --ki-border-tint: rgba(68, 139, 67, 0.22);
  --ki-bg-tint: rgba(99, 186, 100, 0.10);
  --ki-line-faint: rgba(68, 139, 67, 0.14);
  --ki-card-border: #deeede;
  --ki-card-border-soft: #eef5ee;
  --ki-muted-2: #6a8a6a;
  --ki-muted-3: #8aaa8a;
  --ki-tab-inactive: #7a9a7a;
}

/* --------------------------------------------------------------------
   Shared: scroll triggered reveal, used by every block below the
   hero. Toggled to .in-view by kata-immune.js when an element scrolls
   into view. Same pattern as trs-lactea.css / polaris.css.
   -------------------------------------------------------------------- */

.dripem-ki-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.dripem-ki-reveal--d1 { transition-delay: 0.05s; }
.dripem-ki-reveal--d2 { transition-delay: 0.16s; }
.dripem-ki-reveal--d3 { transition-delay: 0.27s; }
.dripem-ki-reveal--d4 { transition-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .dripem-ki-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

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

/* Large full bleed hero photo as its own layer behind the copy card,
   not side by side with it: the photo is pinned to the right at 70%
   of the hero's width, the card sits on the left at roughly 40%, and
   the two overlap by about 10% in the middle, the card's shadow and
   solid background keeping it legible over the photo there. The card
   is the only element in normal flow (the photo is absolutely
   positioned, purely decorative), so the card's own content is what
   gives the hero its height and is never clipped, while the photo is
   sized by WIDTH (not height), so it can never balloon wider than its
   70% share regardless of how tall the hero ends up being. Because
   width/height both derive from that single width constraint plus
   the photo's own intrinsic ratio, the whole source photo is always
   shown, including the clear margin already built into it above the
   ears, so the head is never cropped; bottom: 0 then lands the
   photo's own bottom edge flush with the hero's bottom edge, since
   the source photo's chin already sits almost at its own frame edge
   (it reads as continuing past the frame, never as a picture that
   visibly ends with background showing beneath it). */
.dripem-kih-wrap {
  background: var(--bg-off-white);
  position: relative;
  overflow: hidden;
}

.dripem-kih-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 64px;
}

.dripem-kih-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-kih-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

/* No dedicated logo artwork yet (see pemix-s25-logo-img / trh-logo-img on
   the other product pages, both exported wordmark files), so the product
   name is set as real heading text instead, in a serif display face to
   read as a wordmark rather than a body heading. Loaded page-only via
   the pageFont front matter key in base.njk, not added to every page. */
.dripem-kih-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 64px);
  color: var(--dripem-darkest-green);
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 2px 0 14px;
}

.dripem-kih-title em {
  display: block;
  font-style: normal;
  font-weight: 900;
  color: var(--dripem-mid-green);
}

.dripem-kih-powered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0 0 24px;
}

/* "Powered by" and "POLARIS" need to stay on the same line: without
   this wrapper, the bare text and the <strong> were two separate
   flex items under the column layout above, which stacked them onto
   their own lines instead of reading as one phrase. Wrapping them in
   a single element makes that phrase one flex item again, so it only
   ever shares the row with the underline rule below it. */
.dripem-kih-powered-text {
  display: block;
  white-space: nowrap;
}

.dripem-kih-powered strong {
  color: var(--dripem-darkest-green);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dripem-kih-powered-line {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--dripem-mid-green);
}

.dripem-kih-tagline {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.dripem-kih-tagline-1 { color: var(--dripem-mid-green); }
.dripem-kih-tagline-2 { color: var(--dripem-dark-green); }

.dripem-kih-desc {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 32px;
}

.dripem-kih-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dripem-kih-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dripem-dark-green);
  border: 1.5px solid var(--ki-border-tint);
  background: var(--ki-bg-tint);
  padding: 5px 13px;
  border-radius: 100px;
}

/* "In Development" reads as a status, not a product attribute, so it is
   visually distinct from the other tags (muted, dashed border) rather
   than a solid brand colored pill. */
.dripem-kih-tag--soon {
  color: var(--ps-muted-label, #a8c2a5);
  background: transparent;
  border: 1.5px dashed var(--ki-border-tint);
}

/* No backdrop glow, just the cutout straight on the hero's own
   background. width: 70% (not a height based clamp) is what keeps
   this photo from ballooning past its share of the hero regardless of
   how tall the card ends up making the hero; see the comment above
   .dripem-kih-wrap for why that also means the full head is always
   shown and the bottom always lands flush. */
.dripem-kih-photo {
  position: absolute;
  right: clamp(-90px, -6vw, -20px);
  bottom: 0;
  width: 70%;
  z-index: 1;
  pointer-events: none;
}

.dripem-kih-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* site.css sets a blanket "img { max-width: 100% }" reset, which is
     redundant here (width is already 100% of this wrapper) but kept
     explicit as a safeguard since the whole point of this element is
     to render wider than the card next to it. */
  max-width: none;
  transform-origin: 50% 72%;
  animation: dripem-kih-breathe 5s ease-in-out infinite;
}

/* Subtle "alive" idle animation on the hero photo, same pattern used on
   the SVG hero illustrations elsewhere on the site (dripem-trh-breathe,
   dripem-pt-pulse), toned down slightly since this photo now renders
   much larger than the old small circle crop. */
@keyframes dripem-kih-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

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

/* Card: a layer of its own over the photo, on the left, with its own
   solid white background and shadow so the copy stays legible over
   whatever part of the photo it ends up overlapping. The only normal
   flow element in .dripem-kih-inner, so its own box (content + this
   margin) is what gives the hero its height. ~40% width plus the
   photo's 70% is the ~10% overlap in the middle. */
.dripem-kih-card {
  position: relative;
  z-index: 2;
  width: clamp(300px, 40%, 520px);
  margin-left: clamp(20px, 6vw, 60px);
  margin-bottom: 64px;
  background: var(--bg-white);
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(29, 63, 31, 0.16), 0 8px 22px rgba(29, 63, 31, 0.08);
  padding: clamp(28px, 3.6vw, 44px) clamp(26px, 3.6vw, 40px) clamp(24px, 3.2vw, 38px);
}

@media (max-width: 860px) {
  /* The overlap only works with room to spare on the sides; below
     860px the inner switches to a plain flex column instead, photo as
     a full width strip above the card, the two no longer overlapping
     at all (the card's shadow needs solid ground under it on a narrow
     screen, not photo). */
  .dripem-kih-inner {
    display: flex;
    flex-direction: column;
    padding: 0 24px 56px;
  }

  .dripem-kih-photo {
    position: relative;
    order: -1;
    right: auto;
    bottom: auto;
    width: calc(100% + 48px);
    height: clamp(240px, 62vw, 340px);
    margin: 0 -24px;
    overflow: hidden;
  }

  .dripem-kih-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
  }

  .dripem-kih-card {
    width: auto;
    margin: -36px 0 0;
  }
}

@media (max-width: 480px) {
  .dripem-kih-card { padding: 26px 22px 24px; }
}

/* --------------------------------------------------------------------
   Block 2: Product overview
   -------------------------------------------------------------------- */

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

.dripem-kio-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}

.dripem-kio-image-wrap {
  position: sticky;
  top: 32px;
  min-width: 0;
}

/* Also the available-forms carousel viewport, see .dripem-kio-image-slide
   below: display: grid stacks every slide in the same cell (sized to the
   tallest), so swapping the active form never changes this box's own
   height, and overflow: hidden keeps the crossfade and the arrow buttons
   fully inside this card's own rounded outline, nothing spills past it. */
.dripem-kio-image-card {
  position: relative;
  background: var(--bg-off-white);
  border: 1px solid var(--ki-card-border);
  border-radius: 20px;
  padding: 24px;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 260px;
  overflow: hidden;
}

.dripem-kio-image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* One form's photo. Every slide shares the same grid cell (see
   .dripem-kio-image-card above), crossfaded by kata-immune.js ("Product
   overview image carousel"). Pages with only one available form (none
   today, but kept generic) simply never get the arrows/second slide,
   see the JS guard. */
.dripem-kio-image-slide {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

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

.dripem-kio-image-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-white);
  border: 1.5px solid var(--ki-card-border);
  border-radius: 50%;
  color: var(--dripem-dark-green);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(29, 63, 31, 0.1);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.dripem-kio-image-arrow:hover {
  color: var(--dripem-mid-green);
  border-color: var(--dripem-mid-green);
}

.dripem-kio-image-arrow--prev { left: 10px; }
.dripem-kio-image-arrow--next { right: 10px; }

.dripem-kio-image-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ki-muted-2);
}

/* Scoped to this class rather than a bare "span" descendant selector,
   since the tag now also wraps its caption text in a span (see
   #dripem-kio-image-tag-text, swapped by the carousel JS), which a bare
   selector would squash down to a 6px dot too. */
.dripem-kio-image-tag-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

.dripem-kio-content {
  min-width: 0;
}

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

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

.dripem-kio-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 32px;
}

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

.dripem-kio-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--ki-card-border);
  margin-bottom: 28px;
  gap: 0;
}

.dripem-kio-tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--ki-tab-inactive);
  padding: 10px 18px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}

.dripem-kio-tab:hover { color: var(--dripem-mid-green); }
.dripem-kio-tab.active { color: var(--dripem-darkest-green); border-bottom-color: var(--dripem-mid-green); }

.dripem-kio-panel { display: none; }
.dripem-kio-panel.active { display: block; }

.dripem-kio-panel-text {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.75;
  margin-bottom: 20px;
}

.dripem-kio-panel-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dripem-kio-panel-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.dripem-kio-point-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dripem-mid-green);
  margin-top: 6px;
}

.dripem-kio-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.dripem-kio-spec {
  background: var(--bg-off-white);
  border: 1px solid var(--ki-card-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.dripem-kio-spec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ki-muted-3);
  margin-bottom: 4px;
}

.dripem-kio-spec-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--dripem-darkest-green);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .dripem-kio-wrap { padding: 60px 24px; }
  .dripem-kio-inner { grid-template-columns: 1fr; gap: 36px; }
  .dripem-kio-image-wrap { position: static; }
  .dripem-kio-image-card { min-height: 220px; padding: 18px; }
  .dripem-kio-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dripem-kio-tabs::-webkit-scrollbar { display: none; }
  .dripem-kio-tab { padding: 10px 14px 12px; }
}

@media (max-width: 520px) {
  .dripem-kio-wrap { padding: 48px 18px 32px; }
  .dripem-kio-inner { gap: 28px; }
  .dripem-kio-title { margin-bottom: 24px; }
  .dripem-kio-tab { font-size: 12px; padding: 9px 12px 11px; }
  .dripem-kio-specs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Block 3: How it works
   -------------------------------------------------------------------- */

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

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

.dripem-kiw-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-kiw-eyebrow-line {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--dripem-mid-green);
  flex-shrink: 0;
}

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

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

.dripem-kiw-intro {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 580px;
}

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

.dripem-kiw-card {
  background: var(--bg-white);
  border: 1px solid var(--ki-card-border);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dripem-kiw-card-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dripem-light-green);
}

.dripem-kiw-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dripem-darkest-green);
  line-height: 1.3;
}

.dripem-kiw-card-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.65;
  flex: 1;
}

.dripem-kiw-polaris {
  background: var(--dripem-darkest-green);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.dripem-kiw-polaris-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.dripem-kiw-polaris-divider {
  width: 1px;
  height: 36px;
  background: rgba(99, 186, 100, 0.25);
  flex-shrink: 0;
}

.dripem-kiw-polaris-text {
  font-size: 13.5px;
  color: #8fac8f;
  line-height: 1.6;
  flex: 1;
}

.dripem-kiw-polaris-text strong { color: #d8f0d8; font-weight: 600; }

.dripem-kiw-polaris-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(99, 186, 100, 0.3);
  background: rgba(99, 186, 100, 0.1);
  padding: 8px 16px;
  border-radius: 10px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.dripem-kiw-polaris-link:hover { background: rgba(99, 186, 100, 0.18); text-decoration: none; color: #fff; }

@media (max-width: 860px) {
  .dripem-kiw-wrap { padding: 60px 24px; }
  .dripem-kiw-grid { grid-template-columns: 1fr; }
  .dripem-kiw-polaris { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dripem-kiw-polaris-divider { display: none; }
}

/* --------------------------------------------------------------------
   Block 4: Who it is for
   -------------------------------------------------------------------- */

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

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

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

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

.dripem-kif-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

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

.dripem-kif-intro {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 620px;
}

.dripem-kif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.dripem-kif-card {
  background: var(--bg-white);
  border: 1px solid var(--ki-card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dripem-kif-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(29, 63, 31, 0.08);
}

.dripem-kif-animal-area {
  background: linear-gradient(160deg, var(--ki-bg-tint) 0%, var(--ki-line-faint) 100%);
  padding: 28px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dripem-kif-animal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dripem-dark-green);
  margin-top: 10px;
}

.dripem-kif-card-body { padding: 20px 22px 24px; }

.dripem-kif-phase {
  font-size: 15px;
  font-weight: 700;
  color: var(--dripem-darkest-green);
  margin-bottom: 10px;
  line-height: 1.3;
}

.dripem-kif-points {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dripem-kif-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.dripem-kif-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dripem-mid-green);
  margin-top: 5px;
}

.dripem-kif-divider { height: 1px; background: var(--ki-line-faint); margin-bottom: 14px; }

.dripem-kif-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dripem-dark-green);
  background: var(--ki-bg-tint);
  border: 1px solid var(--ki-border-tint);
  padding: 4px 10px;
  border-radius: 100px;
}

.dripem-kif-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dripem-mid-green);
  box-shadow: 0 0 0 2px rgba(68, 139, 67, 0.2);
}

@media (max-width: 700px) {
  .dripem-kif-wrap { padding: 64px 32px; }
  .dripem-kif-grid { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 380px) {
  .dripem-kif-wrap { padding: 48px 16px; }
  .dripem-kif-card-body { padding: 16px 16px 18px; }
}

/* --------------------------------------------------------------------
   Block 5: Product forms (available + coming soon, one mixed grid)
   -------------------------------------------------------------------- */

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

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

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

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

.dripem-kis-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

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

.dripem-kis-intro {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 620px;
}

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

.dripem-kis-card {
  background: var(--bg-off-white);
  border: 1px solid var(--ki-card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dripem-kis-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(29, 63, 31, 0.08);
}

/* The one shipping form reads as the clear default: solid card, no
   dashed treatment, a filled status pill instead of the muted outline
   used for everything still in development. */
.dripem-kis-card--available {
  background: var(--bg-white);
  border-color: var(--dripem-mid-green);
}

.dripem-kis-media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--ki-bg-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* Paste 15g / 30g: two photos stacked in the same spot, the syringe on
   its own showing by default and the boxed version cross fading in on
   hover, so one card can show both without needing a second card or a
   click. Pointer devices only: under 860px (the same "touch devices
   don't really hover" breakpoint used elsewhere on this page) the
   boxed photo is simply the one shown, see the media query below. */
.dripem-kis-media--swap img {
  position: absolute;
  inset: 0;
}

.dripem-kis-media-alt {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.dripem-kis-card:hover .dripem-kis-media-alt {
  opacity: 1;
}

/* Touch devices don't have a hover state to trigger the swap, so the
   boxed photo (the more informative of the two) is just shown as the
   default there, matching the "pointer devices only" note above. */
@media (hover: none) {
  .dripem-kis-media-alt { opacity: 1; }
}

/* The single sachet shot is mostly printed label text on a square
   canvas, so the default 16/11 cover crop zoomed in too far and sat
   right behind the Coming Soon pill. Shown smaller and nudged toward
   the top instead, fully uncropped. The shrink leaves a visible
   margin around the photo, so this card gets a plain white media
   background instead of the green ki-bg-tint used elsewhere, since
   that tint is only meant to read as a brief loading placeholder,
   not as visible framing around a photo. Only the default (non
   hover) photo is affected, the boxed hover photo still covers the
   whole card like the rest. */
.dripem-kis-media--sachet {
  background: var(--bg-white);
}

.dripem-kis-media--sachet img:not(.dripem-kis-media-alt) {
  width: 60%;
  height: 60%;
  top: 13%;
  left: 20%;
  right: auto;
  bottom: auto;
  object-fit: contain;
}

.dripem-kis-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ki-muted-2);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--ki-border-tint);
  padding: 5px 11px;
  border-radius: 100px;
}

.dripem-kis-status--available {
  color: #fff;
  background: var(--dripem-mid-green);
  border-color: var(--dripem-mid-green);
}

.dripem-kis-body {
  padding: 18px 20px 22px;
}

.dripem-kis-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dripem-darkest-green);
  margin-bottom: 6px;
}

.dripem-kis-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .dripem-kis-wrap { padding: 64px 32px; }
  .dripem-kis-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .dripem-kis-wrap { padding: 56px 20px; }
  .dripem-kis-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}