@runwell/shopify-toolkit 0.17.4 → 0.18.0

package/modules/product-trio-medvi/README.md

@@ -0,0 +1,35 @@
+# product-trio-medvi
+
+3-product fan-layout showcase with a single soft-corner copy panel beside. Hero anchor for a product line. Reveals the actual product lineup that a `collection-block-medvi` introduces.
+
+Category: `branding`
+
+## Files
+
+- `sections/runwell-product-trio-medvi.liquid`
+- `assets/runwell-product-trio-medvi.css`
+
+## Layout
+
+Three products arranged in a fan: center product foregrounded (z-index above, slightly larger, vertically anchored at bottom), left and right products partially behind it. The composition is asymmetric on purpose; medvi's reference shot has the center product offset.
+
+The copy panel sits beside the products holding a single short headline (no body, no CTA). That's intentional: this component reveals products and anchors them with a one-line promise. Ad copy or extended CTA belong in adjacent components (`collection-block-medvi`, `editorial-block`, etc.).
+
+## Tokens consumed
+
+Brand: `--runwell-oat`, `--runwell-tertiary`, `--runwell-celadon`. Design system: `--runwell-radius-xl`. Typography: `--runwell-h3-size`.
+
+## Tenant overrides
+
+- Brand-block (`runwell.config.json`) flips global tokens. Panel background follows `--runwell-oat` by default.
+- Per-instance (Theme Editor): 6 image fields (3 products with uploaded image plus bundled-asset fallback for each), panel headline, panel background color, layout (products-left vs products-right), bg band.
+
+## Lineage
+
+Extracted from `https://home.medvi.org/` on 2026-05-06. Framer label: `3 Cards / Pill Image Group`. Scrape path: `_clients/capital-v/lushi/research/medvi-reference/site-scrape/`. The medvi reference shot uses 3 supplement jars (Colonix+ / BrainBloom / Colonix+) with a soft-cream panel saying "Doctor-formulated blends designed to support how your body works best."
+
+## Notes
+
+- Recommended product images are PNG with transparent background so the products float on top of the section's bg band. Document this in tenant onboarding.
+- Mobile: products row keeps horizontal arrangement but shrinks; panel stacks below.
+- This module pairs naturally with `collection-block-medvi`. Typical sequence: `collection-block-medvi` (introduces the category with benefits + lifestyle) then `product-trio-medvi` (reveals the products) then onward.

package/modules/product-trio-medvi/assets/runwell-product-trio-medvi.css

@@ -0,0 +1,119 @@
+/* Runwell product-trio-medvi.
+
+   3-product fan layout with center product foregrounded. Single
+   soft-corner copy panel beside.
+
+   Tokens: --runwell-oat, --runwell-tertiary, --runwell-radius-xl,
+   --runwell-h3-size.
+   Mobile-first: products row stays horizontal but shrinks; panel
+   stacks below at <768px.
+*/
+
+.runwell-product-trio-medvi {
+  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+}
+
+.runwell-product-trio-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-product-trio-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-product-trio-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+.runwell-product-trio-medvi__inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(2rem, 4vw, 4rem);
+  max-width: 1280px;
+  margin: 0 auto;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .runwell-product-trio-medvi__inner {
+    grid-template-columns: 1.2fr 1fr;
+  }
+
+  .runwell-product-trio-medvi--products-right .runwell-product-trio-medvi__inner {
+    direction: rtl;
+  }
+
+  .runwell-product-trio-medvi--products-right .runwell-product-trio-medvi__inner > * {
+    direction: ltr;
+  }
+}
+
+/* ----- Products fan ----- */
+
+.runwell-product-trio-medvi__products {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: clamp(0.25rem, 1vw, 0.75rem);
+  min-height: clamp(280px, 35vw, 480px);
+}
+
+.runwell-product-trio-medvi__product {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.runwell-product-trio-medvi__product img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+.runwell-product-trio-medvi__product--left,
+.runwell-product-trio-medvi__product--right {
+  flex: 0 1 28%;
+  max-width: 220px;
+  z-index: 1;
+}
+
+.runwell-product-trio-medvi__product--left {
+  margin-right: -3%;
+  transform: translateY(8%);
+}
+
+.runwell-product-trio-medvi__product--right {
+  margin-left: -3%;
+  transform: translateY(8%);
+}
+
+.runwell-product-trio-medvi__product--center {
+  flex: 0 1 36%;
+  max-width: 320px;
+  z-index: 2;
+}
+
+/* ----- Copy panel ----- */
+
+.runwell-product-trio-medvi__panel {
+  border-radius: var(--runwell-radius-xl, 32px);
+  padding: clamp(2rem, 4vw, 3.5rem);
+  display: flex;
+  align-items: center;
+  min-height: clamp(180px, 20vw, 280px);
+}
+
+.runwell-product-trio-medvi__panel-heading {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h3-size, clamp(2rem, 3vw, 2.8rem));
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0;
+  text-align: center;
+  width: 100%;
+}

package/modules/product-trio-medvi/module.json

@@ -0,0 +1,48 @@
+{
+  "name": "product-trio-medvi",
+  "version": "0.1.0",
+  "category": "branding",
+  "source": "medvi",
+  "base": "product-trio",
+  "qualifier": null,
+  "description": "3-product showcase, fan layout with center product foregrounded, soft-corner copy panel beside. Hero anchor for a product line.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-product-trio-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-product-trio-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "panel_heading": {
+        "type": "string",
+        "default": "Doctor-formulated blends designed to support how your body works best.",
+        "label": "Panel headline"
+      },
+      "panel_bg": {
+        "type": "string",
+        "default": "{{brand.oat}}",
+        "label": "Panel background tint"
+      },
+      "layout": {
+        "type": "string",
+        "default": "products-left",
+        "label": "Layout: products-left or products-right"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "3 Cards / Pill Image Group"
+  }
+}

package/modules/product-trio-medvi/sections/runwell-product-trio-medvi.liquid

@@ -0,0 +1,188 @@
+{%- comment -%}
+  Runwell product-trio-medvi.
+
+  3-product showcase: 3 product images in a fan layout with the center
+  product foregrounded; single soft-corner copy panel beside, holding
+  one short headline. Hero anchor for a product line.
+
+  Lineage: extracted from home.medvi.org (Framer label "3 Cards / Pill
+  Image Group"), generalised to Runwell brand tokens.
+{%- endcomment -%}
+
+{{ 'runwell-product-trio-medvi.css' | asset_url | stylesheet_tag }}
+
+{%- liquid
+  assign layout = section.settings.layout | default: 'products-left'
+  assign bg_band = section.settings.bg_band | default: 'white'
+  assign panel_bg = section.settings.panel_bg | default: 'var(--runwell-oat)'
+-%}
+
+<section
+  class="runwell-product-trio-medvi runwell-product-trio-medvi--{{ layout }} runwell-product-trio-medvi--bg-{{ bg_band }}"
+>
+  <div class="runwell-product-trio-medvi__inner">
+
+    <div class="runwell-product-trio-medvi__products">
+      <div class="runwell-product-trio-medvi__product runwell-product-trio-medvi__product--left">
+        {%- if section.settings.product_image_left != blank -%}
+          <img
+            src="{{ section.settings.product_image_left | image_url: width: 600 }}"
+            alt="{{ section.settings.product_image_left.alt | default: '' | escape }}"
+            width="{{ section.settings.product_image_left.width }}"
+            height="{{ section.settings.product_image_left.height }}"
+            loading="lazy"
+          >
+        {%- elsif section.settings.product_image_left_asset != blank -%}
+          <img
+            src="{{ section.settings.product_image_left_asset | asset_url }}"
+            alt=""
+            width="600"
+            height="800"
+            loading="lazy"
+          >
+        {%- endif -%}
+      </div>
+
+      <div class="runwell-product-trio-medvi__product runwell-product-trio-medvi__product--center">
+        {%- if section.settings.product_image_center != blank -%}
+          <img
+            src="{{ section.settings.product_image_center | image_url: width: 800 }}"
+            alt="{{ section.settings.product_image_center.alt | default: '' | escape }}"
+            width="{{ section.settings.product_image_center.width }}"
+            height="{{ section.settings.product_image_center.height }}"
+            loading="lazy"
+          >
+        {%- elsif section.settings.product_image_center_asset != blank -%}
+          <img
+            src="{{ section.settings.product_image_center_asset | asset_url }}"
+            alt=""
+            width="800"
+            height="1000"
+            loading="lazy"
+          >
+        {%- endif -%}
+      </div>
+
+      <div class="runwell-product-trio-medvi__product runwell-product-trio-medvi__product--right">
+        {%- if section.settings.product_image_right != blank -%}
+          <img
+            src="{{ section.settings.product_image_right | image_url: width: 600 }}"
+            alt="{{ section.settings.product_image_right.alt | default: '' | escape }}"
+            width="{{ section.settings.product_image_right.width }}"
+            height="{{ section.settings.product_image_right.height }}"
+            loading="lazy"
+          >
+        {%- elsif section.settings.product_image_right_asset != blank -%}
+          <img
+            src="{{ section.settings.product_image_right_asset | asset_url }}"
+            alt=""
+            width="600"
+            height="800"
+            loading="lazy"
+          >
+        {%- endif -%}
+      </div>
+    </div>
+
+    {%- if section.settings.panel_heading != blank -%}
+      <div
+        class="runwell-product-trio-medvi__panel"
+        style="background: {{ panel_bg }};"
+      >
+        <p class="runwell-product-trio-medvi__panel-heading">{{ section.settings.panel_heading }}</p>
+      </div>
+    {%- endif -%}
+
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Product trio (medvi)",
+  "tag": "section",
+  "class": "section-runwell-product-trio-medvi",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Products (3 images)"
+    },
+    {
+      "type": "image_picker",
+      "id": "product_image_left",
+      "label": "Left product image",
+      "info": "PNG with transparent background recommended."
+    },
+    {
+      "type": "text",
+      "id": "product_image_left_asset",
+      "label": "Left product image (asset filename)"
+    },
+    {
+      "type": "image_picker",
+      "id": "product_image_center",
+      "label": "Center product image (foregrounded)"
+    },
+    {
+      "type": "text",
+      "id": "product_image_center_asset",
+      "label": "Center product image (asset filename)"
+    },
+    {
+      "type": "image_picker",
+      "id": "product_image_right",
+      "label": "Right product image"
+    },
+    {
+      "type": "text",
+      "id": "product_image_right_asset",
+      "label": "Right product image (asset filename)"
+    },
+    {
+      "type": "header",
+      "content": "Copy panel"
+    },
+    {
+      "type": "text",
+      "id": "panel_heading",
+      "label": "Panel headline",
+      "default": "Doctor-formulated blends designed to support how your body works best."
+    },
+    {
+      "type": "color",
+      "id": "panel_bg",
+      "label": "Panel background tint",
+      "default": "#F5F0EE"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "layout",
+      "label": "Layout",
+      "options": [
+        { "value": "products-left", "label": "Products on left" },
+        { "value": "products-right", "label": "Products on right" }
+      ],
+      "default": "products-left"
+    },
+    {
+      "type": "select",
+      "id": "bg_band",
+      "label": "Background band",
+      "options": [
+        { "value": "white", "label": "White" },
+        { "value": "oat", "label": "Oat" },
+        { "value": "celadon-tint", "label": "Celadon tint" }
+      ],
+      "default": "white"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Product trio (medvi)"
+    }
+  ]
+}
+{% endschema %}

package/modules/testimonials-medvi/README.md

@@ -0,0 +1,44 @@
+# testimonials-medvi
+
+Interleaved photo card + quote card mosaic in a CSS grid. Magazine-spread feel. Blocks of type `quote` and `photo` are user-droppable in the Theme Editor; the designer controls visual rhythm by ordering blocks.
+
+Category: `social-proof`
+
+## Files
+
+- `sections/runwell-testimonials-medvi.liquid`
+- `assets/runwell-testimonials-medvi.css`
+
+## Layout
+
+- Header: centered eyebrow + 2-color split headline + lede.
+- Grid: responsive 1/2/4 columns at 320 / 768 / 1024 px breakpoints. Each cell has a 5:6 aspect ratio; photos and quote cards line up.
+- Cells flow naturally; designer arranges blocks in the Theme Editor for the photo + quote interleave.
+- Up to 12 blocks (max_blocks).
+
+## Tokens consumed
+
+Brand: `--runwell-oat`, `--runwell-primary`, `--runwell-tertiary`. Design system: `--runwell-radius-lg`. Typography: `--runwell-eyebrow-size`, `--runwell-h2-size`, `--runwell-body-size`, `--runwell-meta-size`, `--runwell-cta-size`.
+
+## Block types
+
+- **quote**: author, rating (range 0 to 5), quote (richtext). Renders as padded card with author + star rating row + quote body.
+- **photo**: image (uploaded) with image_asset fallback, image_focal (center / top / bottom). Renders as full-bleed portrait card with `object-fit: cover` driven by focal point.
+
+## Lineage
+
+Extracted from `https://home.medvi.org/` on 2026-05-06. Framer label: `What Our Clients Say Parallax Scroll Section`. Scrape path: `_clients/capital-v/lushi/research/medvi-reference/site-scrape/`.
+
+The medvi reference uses an interleaved row pattern: row 1 = `[photo, quote, quote, quote]`, row 2 = `[quote, quote, photo, quote]`. We keep the layout flexible (CSS grid plus block order) rather than encoding the pattern in code; designers reproduce the rhythm by ordering blocks.
+
+## Tenant overrides
+
+- `runwell.config.json` brand block: rewires the global tokens.
+- Per-instance Theme Editor: header copy, accent color, card background, star color, bg band, plus block ordering and content.
+
+## Notes
+
+- Photo focal point: medvi crops portraits tight with face at top of frame. Default is `center`; use `top` for headshots and `bottom` for full-body shots where the bottom should anchor the visual.
+- Star rating: ASCII `★` glyph in the configured color. Zero rating hides the star row.
+- Default preset includes 6 quote cards + 2 photo placeholders, using medvi's reference quotes (with anonymised first names). Tenants replace the preset content with their own customer testimonials post-launch.
+- Mobile: grid collapses to 1 column, then 2 columns at 768px, then 4 columns at 1024px.

package/modules/testimonials-medvi/assets/runwell-testimonials-medvi.css

@@ -0,0 +1,239 @@
+/* Runwell testimonials-medvi.
+
+   Two horizontal marquee rows. Each row scrolls continuously; row 2
+   reverses direction. Cards are landscape (~16:9), ~400px wide. Photos
+   fill cards with object-fit cover. Quote cards have tinted background,
+   padded interior with author + star row + quote body.
+
+   Loop: each row's content rendered twice in DOM. CSS animation
+   translates by -50% (one full set width) over the configured duration
+   (--rw-tm-duration). When set 1 leaves viewport, set 2 has taken its
+   place; loop is seamless.
+
+   Accessibility: pause on hover and on focus-within for users navigating
+   with keyboard. Stops entirely on prefers-reduced-motion.
+
+   Tokens: --runwell-oat, --runwell-primary, --runwell-tertiary,
+   --runwell-radius-lg.
+*/
+
+.runwell-testimonials-medvi {
+  padding: clamp(3rem, 8vw, 7rem) 0;
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+
+  /* css custom properties driven from Liquid; defaults below are fallbacks */
+  --rw-tm-duration: 60s;
+  --rw-tm-card-w: 400px;
+  --rw-tm-gap: 20px;
+}
+
+.runwell-testimonials-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-testimonials-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-testimonials-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+/* ----- Header ----- */
+
+.runwell-testimonials-medvi__header {
+  max-width: 760px;
+  margin: 0 auto clamp(2rem, 5vw, 4rem);
+  padding: 0 clamp(1.5rem, 4vw, 3rem);
+  text-align: center;
+}
+
+.runwell-testimonials-medvi__eyebrow {
+  font-size: var(--runwell-eyebrow-size, 0.78rem);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0 0 1rem;
+  opacity: 0.85;
+}
+
+.runwell-testimonials-medvi__headline {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h2-size, clamp(3rem, 5vw, 4.8rem));
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.runwell-testimonials-medvi__headline-pre,
+.runwell-testimonials-medvi__headline-post {
+  display: inline;
+}
+
+.runwell-testimonials-medvi__lede {
+  font-size: var(--runwell-body-size, 1.6rem);
+  line-height: 1.5;
+  opacity: 0.85;
+  margin: 1rem auto 0;
+  max-width: 50ch;
+}
+
+/* ----- Marquee rows ----- */
+
+.runwell-testimonials-medvi__rows {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.75rem, 1.5vw, 1.25rem);
+  width: 100%;
+}
+
+.runwell-testimonials-medvi__row {
+  position: relative;
+  width: 100%;
+  overflow: hidden;        /* clip the moving track at viewport edges */
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
+}
+
+.runwell-testimonials-medvi__track {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--rw-tm-gap, 20px);
+  width: max-content;
+  animation: runwell-tm-marquee var(--rw-tm-duration, 60s) linear infinite;
+  will-change: transform;
+}
+
+/* Row 2 direction: same (default, medvi-faithful) keeps both rows scrolling left.
+   `reverse` flips row 2 to create visual rhythm. */
+.runwell-testimonials-medvi__rows--row2-reverse .runwell-testimonials-medvi__row--2 .runwell-testimonials-medvi__track {
+  animation-direction: reverse;
+}
+
+.runwell-testimonials-medvi__row:hover .runwell-testimonials-medvi__track,
+.runwell-testimonials-medvi__row:focus-within .runwell-testimonials-medvi__track {
+  animation-play-state: paused;
+}
+
+@keyframes runwell-tm-marquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(calc(-50% - var(--rw-tm-gap, 20px) / 2)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runwell-testimonials-medvi__track {
+    animation: none;
+    transform: none;
+  }
+}
+
+/* ----- Items + cards ----- */
+
+.runwell-testimonials-medvi__item {
+  flex: 0 0 auto;
+  width: var(--rw-tm-card-w, 400px);
+}
+
+.runwell-testimonials-medvi__card {
+  margin: 0;
+  border-radius: var(--runwell-radius-lg, 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Per-card aspect ratios: photos default 16:9 (medvi-faithful native landscape),
+   quotes default 5:3 (taller for multi-line text). Either can be overridden
+   per-instance via section settings. */
+.runwell-testimonials-medvi__rows--photo-aspect-16-9 .runwell-testimonials-medvi__card--photo { aspect-ratio: 16 / 9; }
+.runwell-testimonials-medvi__rows--photo-aspect-5-3  .runwell-testimonials-medvi__card--photo { aspect-ratio: 5 / 3; }
+.runwell-testimonials-medvi__rows--photo-aspect-4-3  .runwell-testimonials-medvi__card--photo { aspect-ratio: 4 / 3; }
+.runwell-testimonials-medvi__rows--photo-aspect-1-1  .runwell-testimonials-medvi__card--photo { aspect-ratio: 1 / 1; }
+
+.runwell-testimonials-medvi__rows--quote-aspect-16-9 .runwell-testimonials-medvi__card--quote { aspect-ratio: 16 / 9; }
+.runwell-testimonials-medvi__rows--quote-aspect-5-3  .runwell-testimonials-medvi__card--quote { aspect-ratio: 5 / 3; }
+.runwell-testimonials-medvi__rows--quote-aspect-4-3  .runwell-testimonials-medvi__card--quote { aspect-ratio: 4 / 3; }
+.runwell-testimonials-medvi__rows--quote-aspect-1-1  .runwell-testimonials-medvi__card--quote { aspect-ratio: 1 / 1; }
+
+/* Quote card */
+.runwell-testimonials-medvi__card--quote {
+  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 2.6vw, 2.25rem);
+  justify-content: flex-start;
+  gap: 0.85rem;
+}
+
+.runwell-testimonials-medvi__card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.runwell-testimonials-medvi__card-author {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-body-size, 1.6rem);
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.runwell-testimonials-medvi__card-rating {
+  display: inline-flex;
+  gap: 0.15em;
+  font-size: var(--runwell-body-size, 1.6rem);
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.runwell-testimonials-medvi__star {
+  line-height: 1;
+}
+
+.runwell-testimonials-medvi__card-quote {
+  font-size: var(--runwell-cta-size, 1.5rem);
+  line-height: 1.5;
+  opacity: 0.85;
+  flex: 1 1 auto;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.runwell-testimonials-medvi__card-quote p {
+  margin: 0 0 0.4em;
+}
+
+.runwell-testimonials-medvi__card-quote p:last-child {
+  margin-bottom: 0;
+}
+
+/* Photo card */
+.runwell-testimonials-medvi__card--photo {
+  background: var(--runwell-oat, #F5F0EE);
+  padding: 0;
+}
+
+.runwell-testimonials-medvi__card--photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.runwell-testimonials-medvi__card--photo-focal-center img { object-position: center; }
+.runwell-testimonials-medvi__card--photo-focal-top img    { object-position: 50% 25%; }
+.runwell-testimonials-medvi__card--photo-focal-bottom img { object-position: 50% 75%; }
+
+/* Mobile: smaller card width but keep marquee */
+@media (max-width: 767px) {
+  .runwell-testimonials-medvi {
+    --rw-tm-card-w: 280px;
+  }
+}