/** Shopify CDN: Minification failed

Line 10:6 Unexpected "10"
Line 53:7 Unexpected "{"
Line 53:24 Expected ":"
Line 56:175 Expected identifier but found whitespace

**/

heute 10:13

markdown(2).md eingefügt
Datei
Du müsstest ein Gespräch übernehmen weil ein anderer Chat bereits zu lange geworden ist

Wir erstellen aktuell Flow 2

Das war deine letzte Nachricht





Der Trigger ist korrekt. Als Nächstes musst du die Person finden, die das Formular abgeschickt hat.

## 1. Kundendaten abrufen

Unter dem Trigger auf **+** klicken:

**Aktion → Kundendaten abrufen / Get customer data**

Dann einstellen:

- **Daten sortieren nach:** Aktualisierungsdatum, neueste zuerst
- **Maximale Anzahl an Ergebnissen:** 1
- **Abfrage:** Erweitert

Im Abfragefeld:

1. email: eintippen.
2. Direkt dahinter auf das Variablen-Symbol </> klicken.
3. Auswählen:

text
Metaobject entry created
→ E-mail
→ value


Nicht den Variablennamen manuell schreiben. Flow setzt ihn selbst ein. Das Ergebnis sieht sinngemäß so aus:

liquid
email:{{ metaobjectEntry.email.value }}


Die Aktion „Kundendaten abrufen“ kann in jedem Workflow verwendet werden und gibt immer eine Liste von Kund:innen zurück, auch wenn maximal nur ein Ergebnis gesucht wird. citeturn130320search0turn130320search9

## 2. Gefundenen Kunden verarbeiten

Unter **Kundendaten abrufen** wieder auf **+** klicken:

**Aktion → Für jedes Element / For each**

Als Liste auswählen:

text
Kundendaten abrufen


Alle folgenden Schritte müssen innerhalb dieser Schleife liegen.

## 3. Prüfen, ob die Person bereits abonniert ist

Innerhalb von **Für jedes Element**:

**+ → Bedingung**

Variable auswählen:

text
Aktuelle Kundin bzw. aktueller Kunde
→ E-Mail-Marketing-Einwilligung
→ Marketingstatus


Bedingung:

text
ist gleich
SUBSCRIBED


Damit gilt:

- **Wahr:** Die Person war bereits Abonnent:in und darf sofort die rabattfreie Finder-Mail erhalten.
- **Falsch:** Keine Aktion. Bei neuen Personen übernimmt nach dem Double-Opt-in weiterhin Flow 1.

Der Metaobjekt-Trigger ist der von Shopify vorgesehene Weg, um jede einzelne Forms-Einreichung zu verarbeiten. citeturn130320search3

## 4. Im Wahr-Zweig

Unter **Wahr** kommt anschließend:

text
1 Minute warten
→ alte dynamische Finder-Tags entfernen
→ aktuelle Finder-Tags hinzufügen
→ 1 Minute warten
→ rabattfreie Finder-Mail senden


Baue zunächst die Schritte **Kundendaten abrufen**, **Für jedes Element** und die Bedingung SUBSCRIBED. Danach sehen wir anhand der angebotenen Kundenvariablen, wie wir die alten finder-product:, finder-room: und finder-title:-Tags am sichersten entfernen.

 ich habe kein <>

so?

Ok... wie gehts weiter?


geht das auch?

so?


so?

so korrekt?


so?







heute 19:40

theme_export__azullado-com-260727_horizont_finder__27JUL2026-0738pm.zip
ZIP-Archiv
Hier ist das gesamte Theme. Relevant sind die finder-Dateien - eine CSS, eine JS und eine liquid section.


Eingefügter Text(20).txt
Dokument
Das wäre der Custom-Pixel

Gib mir die überarbieteten Dateien und sag mir, was ich tun muss

image(152).png
lass uns eine kreative 404 machen. aktuell ist sie wie im screenshop. Sie sollte aber anschlussfähig sein, für Produkte, die ausverkauft sind.

image(153).png
404 würde ich auch als abgehakt betrachten

Dann ist auch die Herzanimation abgeschlossen.

Aktueller Stand:

Finder-Funktion und Darstellung fertig

Shopify Forms und beide Flows fertig

dynamische Ergebnis-Mails und Rabattlogik fertig

Matomo-Tracking geprüft

404-Seite fertig

Herzlogik und Animation final

Damit bleibt nur noch der Launch:

finale Finder-Dateien ins Live-Theme übernehmen

Finder-Seite veröffentlichen und verlinken

einmal mobil und am Desktop komplett testen

Finder → Formular → Flow → Mail → Produktseite/Warenkorb prüfen

Marketing starten

Der Finder ist damit technisch und inhaltlich launchfähig.


image(154).png
noch ein Schönheitsthema: Da ist ein bisschen viel Raum bis zum Formular. Wenn es befüllt werden soll, müsste es vermutlich besser sichtbar sein.

Ja, das würde ich auch straffen.
Aktuell wirkt der Abstand zu groß, vor allem weil das Formular ja eine gewünschte Folgeaktion ist und deshalb schneller ins Blickfeld kommen sollte.

Mein Eindruck
Im Moment passiert visuell das hier:

Produkt-Ergebnis

Trennlinie

viel Leerraum

dann erst „Noch nicht bereit?“ + Formular

Dadurch wirkt das Formular fast wie ein separater Bereich, obwohl es eigentlich direkt zur Ergebnisansicht gehört.

Meine Empfehlung
Ich würde das Formular deutlich näher an den Ergebnisbereich ziehen.

Zielbild
nach der Trennlinie nur noch ein moderater Abstand

„Noch nicht bereit?“ soll direkt als sanfter nächster Schritt lesbar sein

das Formular soll ohne weiteres Scrollen eher sichtbar werden, zumindest teilweise

Konkret würde ich es so lösen
Desktop
Den Abstand zwischen Trennlinie / Share-Bereich und Formular-Intro ungefähr auf:

60 bis 80 px

begrenzen.

Mobil
Noch etwas kompakter:

40 bis 56 px

Denn mobil ist Sichtbarkeit noch wichtiger.

Gestalterisch würde ich es so lesen
Der Ablauf sollte eher sein:

Produkt gefunden
→ CTA / Details / Teilen
→ Noch nicht bereit?
→ Formular
und nicht:

Produkt gefunden
→ viel Leere
→ irgendwann Formular
Inhaltlich passt die Formular-Position übrigens gut
„Noch nicht bereit?“ ist als Einstieg passend.
Gerade deshalb sollte der Bereich näher dran sein, weil die Mail-Anmeldung eine sehr logische Anschlussaktion ist.

Meine klare Empfehlung
Ja, weniger Leerraum.
Ich würde den Abstand spürbar reduzieren, aber nicht komplett zusammenschieben. Es soll weiter luftig wirken, nur eben nicht abgekoppelt.

Wenn du willst, kann ich dir im nächsten Schritt direkt sagen:

welcher CSS-Abstand ungefähr geändert werden sollte, oder

ich formuliere dir eine konkrete Änderungsanweisung für Claude/Cursor/anderen Dev-Chat, damit ihr es schnell im Theme anpasst.


Na du erstellst doch den Code. Kannst du das nicht anpassen oder muss ich das im Theme-Editor anpassen?

1m 16s nachgedacht
Das sollte im Code angepasst werden, nicht im Theme-Editor. Der große Abstand entstand durch zwei CSS-Abstände, die sich addieren: Unter dem Ergebnis lagen 64 px, danach vor dem Formular nochmals bis zu 84 px; mobil waren es 58 px plus 42 px. 

 


Ich habe es reduziert auf:

Desktop: 24 px unter dem Ergebnis + 24–38 px vor dem Formular

Mobil: 18 px unter dem Ergebnis + 28 px vor dem Formular

Damit bleibt eine klare Trennung erhalten, aber „Noch nicht bereit?“ rückt deutlich näher an das Ergebnis und wird schneller sichtbar.

Datei zum Ersetzen
azulejo-finder.css

Alternativ:

CSS-Update mit Anleitung als ZIP

Komplettes aktualisiertes Theme

Einbau
In Shopify:

Onlineshop
→ Themes
→ Code bearbeiten
→ Assets
→ azulejo-finder.css
Den gesamten Inhalt durch die neue CSS-Datei ersetzen und speichern. JS und Liquid bleiben unverändert. Danach die Finder-Seite mit einem Hard Reload neu laden.


azulejo-finder.css


.az-finder-section {
  position: relative;
  overflow: clip;
  background: #fff;
  color: var(--color-foreground);
}

.az-finder-section + .section-background,
.az-finder-section .section-background {
  display: none;
}

.az-finder {
  display: block;
  width: 100%;
}

.az-finder__shell {
  width: min(calc(100% - 32px), var(--az-finder-max-width));
  margin-inline: auto;
  padding-block: var(--az-finder-padding-top) var(--az-finder-padding-bottom);
}

.az-finder__header {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.az-finder[data-view='start'] .az-finder__header,
.az-finder[data-view='room'] .az-finder__header,
.az-finder[data-view='result'] .az-finder__header {
  display: none;
}

.az-finder__progress {
  width: min(100%, 330px);
  margin: 22px auto 0;
}

.az-finder__progress-text {
  margin: 0 0 7px;
  color: var(--color-foreground);
  font-family: var(--font-paragraph--family);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.3;
}

.az-finder__progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--color-foreground-rgb) / 0.11);
}

.az-finder__progress-value {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-button-background);
  transition: width 420ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.az-finder__heading,
.az-finder__start-heading,
.az-finder__result-heading,
.az-finder__conversion-heading,
.az-finder__product-title {
  color: var(--color-foreground-heading);
  font-family: var(--font-heading--family);
  font-style: var(--font-heading--style);
  font-weight: var(--font-heading--weight);
  text-wrap: balance;
}

.az-finder__heading {
  margin: 0;
  font-size: clamp(var(--az-heading-size-mobile), 4.2vw, var(--az-heading-size));
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.az-finder__subheading {
  max-width: 650px;
  margin: 14px auto 0;
  color: var(--color-foreground);
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-subheading-size-mobile), 1.35vw, var(--az-subheading-size));
  line-height: 1.48;
  text-wrap: balance;
}

.az-finder__stage {
  position: relative;
  min-height: 520px;
  margin-top: 32px;
  scroll-margin-top: 88px;
}

.az-finder[data-view='start'] .az-finder__stage,
.az-finder[data-view='result'] .az-finder__stage {
  margin-top: 0;
}

.az-finder__loading,
.az-finder__empty {
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--color-foreground-muted);
  text-align: center;
}

.az-finder__loading-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary-button-background);
  animation: az-finder-pulse 900ms ease-in-out infinite alternate;
}

/* Start */
.az-finder__start {
  min-height: min(680px, 72vh);
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1.08fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
  padding-block: 12px 40px;
  animation: az-finder-fade-up 420ms ease both;
}

.az-finder__start--without-image {
  grid-template-columns: minmax(0, 700px);
  justify-content: center;
  text-align: center;
}

.az-finder__start-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

.az-finder__start-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.az-finder__start-heading {
  margin: 0;
  font-size: clamp(var(--az-heading-size-mobile), 4vw, var(--az-heading-size));
  line-height: 1.08;
}

.az-finder__start-text {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--color-foreground);
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.25vw, var(--az-body-size));
  line-height: 1.62;
}

.az-finder__start--without-image .az-finder__start-text {
  margin-inline: auto;
}

.az-finder__start-button.button {
  min-width: min(100%, 230px);
  min-height: 50px;
  margin-top: 28px;
  font-size: clamp(var(--az-button-size-mobile), 1.2vw, var(--az-button-size));
}

/* Duel */
.az-finder__duel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3.5vw, 48px);
  max-width: 1040px;
  margin-inline: auto;
}

.az-finder__card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding: clamp(8px, 1.25vw, 15px);
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: transform 280ms ease, opacity 220ms ease;
}

.az-finder__card--favorite {
  transform: none;
  box-shadow: none;
}


.az-finder__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: #fff;
  isolation: isolate;
}


.az-finder__heart-slot {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.az-finder__favorite-hearts {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(5px);
}

.az-finder__heart-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.az-finder__heart {
  position: relative;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
}

.az-finder__heart svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linejoin: round;
}

.az-finder__heart.is-outline svg {
  fill: rgb(255 255 255 / 0.96);
  stroke: currentColor;
  stroke-width: 1.65;
}

.az-finder__heart-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-paragraph--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-0.3px);
}

.az-finder__heart.is-outline .az-finder__heart-number {
  color: var(--color-primary);
}

.az-finder__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.az-finder__title {
  min-height: 2.6em;
  display: grid;
  place-items: center;
  margin: 12px 4px 10px;
  color: var(--color-foreground-heading);
  font-family: var(--font-heading--family);
  font-size: clamp(var(--az-title-size-mobile), 1.65vw, var(--az-title-size));
  font-weight: var(--font-heading--weight);
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
}

.az-finder__choice.button,
.az-finder__add.button {
  font-size: clamp(var(--az-button-size-mobile), 1.2vw, var(--az-button-size));
}

.az-finder__choice.button {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  align-self: end;
}

.az-finder__choice:focus-visible,
.az-finder__room-button:focus-visible,
.az-finder__restart:focus-visible,
.az-finder__details:focus-visible,
.az-finder__share:focus-visible,
.az-finder__add:focus-visible,
.az-finder__gallery-nav:focus-visible,
.az-finder__gallery-thumb:focus-visible,
.az-finder__start-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}


.az-finder__duel.is-selecting .az-finder__card {
  opacity: 0.16;
  pointer-events: none;
}

.az-finder__duel.is-arriving .az-finder__card {
  opacity: 0;
}

.az-finder__duel.is-entering .az-finder__card--challenger {
  animation: az-finder-challenger-in 220ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.az-finder__animation-backdrop {
  position: fixed;
  z-index: 999;
  inset: 0;
  background: #fff;
  opacity: 1;
  pointer-events: none;
}

.az-finder__animation-clone {
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  margin: 0;
  border-radius: 5px;
  background: #fff;
  pointer-events: none;
  transform-origin: center;
  will-change: left, top, width, height, transform, opacity;
}

.az-finder__animation-clone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.az-finder__animation-hearts {
  position: fixed;
  z-index: 1001;
  width: min(410px, 92vw);
  min-height: 74px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.az-finder__animation-heart-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.az-finder__animation-heart-sequence {
  position: absolute;
  inset: 50% 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateY(-50%);
  white-space: nowrap;
}

.az-finder__animation-heart-sequence.is-simple {
  justify-content: center;
}

.az-finder__animation-heart-sequence.is-grouped {
  justify-content: flex-start;
  padding-inline-start: 12px;
}

.az-finder__animation-heart-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  will-change: transform, opacity;
}

.az-finder__animation-heart-item.is-anchor {
  z-index: 2;
}

.az-finder__animation-hearts .az-finder__heart-row {
  gap: 5px;
}

.az-finder__animation-hearts .az-finder__heart {
  width: 38px;
  height: 38px;
  filter:
    drop-shadow(0 0 1px rgb(255 255 255 / 1))
    drop-shadow(0 0 6px rgb(255 255 255 / 0.98))
    drop-shadow(0 0 13px rgb(255 255 255 / 0.72))
    drop-shadow(0 4px 9px rgb(0 0 0 / 0.22));
}

.az-finder__animation-hearts .az-finder__heart-number {
  font-size: 15px;
}

.az-finder__winner-orbit {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}

.az-finder__winner-orbit-heart {
  position: absolute;
  left: calc(var(--heart-x) * 100%);
  top: calc(var(--heart-y) * 100%);
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 1px rgb(255 255 255 / 1))
    drop-shadow(0 0 7px rgb(255 255 255 / 1))
    drop-shadow(0 0 16px rgb(255 255 255 / 0.82))
    drop-shadow(0 4px 9px rgb(0 0 0 / 0.24));
  will-change: left, top, transform, opacity;
}

.az-finder__winner-orbit-heart .az-finder__heart {
  width: 38px;
  height: 38px;
}

.az-finder__winner-orbit-heart .az-finder__heart-number {
  font-size: 13px;
}

.az-finder__winner-orbit-heart.is-collector {
  z-index: 2;
}

.az-finder__animation-clone.is-final-winner {
  overflow: visible;
}

/* Room question */
.az-finder__conversion {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  padding: 10px 10px 62px;
  background: #fff;
  animation: az-finder-fade-up 480ms ease both;
}

.az-finder__room-winner {
  min-width: 0;
}

.az-finder__winner-media {
  position: relative;
  overflow: visible;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.az-finder__winner-heart {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  display: inline-flex;
  pointer-events: none;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 7px rgb(255 255 255 / 0.92));
}

.az-finder__winner-heart .az-finder__heart {
  width: 34px;
  height: 34px;
}

.az-finder__winner-heart .az-finder__heart-number {
  font-size: 12px;
}

.az-finder__winner-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.az-finder__eyebrow,
.az-finder__section-label {
  margin: 0 0 9px;
  color: var(--color-primary);
  font-family: var(--font-accent--family);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.az-finder__conversion-heading {
  margin: 0;
  font-size: clamp(var(--az-result-heading-size-mobile), 3.1vw, var(--az-result-heading-size));
  line-height: 1.1;
}

.az-finder__conversion-text {
  margin: 13px 0 0;
  color: var(--color-foreground);
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.25vw, var(--az-body-size));
  line-height: 1.55;
}

.az-finder__winner-title {
  margin: 16px 0 0;
  color: var(--color-foreground-heading);
  font-family: var(--font-heading--family);
  font-size: clamp(var(--az-title-size-mobile), 1.8vw, var(--az-title-size));
  line-height: 1.2;
  text-align: center;
}

.az-finder__rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 24px;
}

.az-finder__room-button.button {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font-size: clamp(var(--az-body-size-mobile), 1.15vw, var(--az-body-size));
}

/* Result */
.az-finder__result {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding-bottom: 24px;
  animation: az-finder-fade-up 480ms ease both;
}

.az-finder__result-intro {
  max-width: 850px;
  margin: 0 auto 28px;
  text-align: center;
}

.az-finder__result-heading {
  margin: 0;
  font-size: clamp(var(--az-result-heading-size-mobile), 3.7vw, var(--az-result-heading-size));
  line-height: 1.08;
}

.az-finder__result-sentence {
  max-width: 760px;
  margin: 12px auto 0;
  color: var(--color-foreground);
  font-family: var(--font-heading--family);
  font-size: clamp(calc(var(--az-body-size-mobile) + 2px), 1.8vw, calc(var(--az-body-size) + 5px));
  line-height: 1.36;
  text-wrap: balance;
}

.az-finder__mockup-wrap {
  max-width: 1040px;
  margin-inline: auto;
}

.az-finder__room-scene {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #fff;
  isolation: isolate;
}

.az-finder__room-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.az-finder__room-scene--placeholder {
  background: #fff;
}


.az-finder__room-artwork {
  position: absolute;
  z-index: 1;
  left: var(--az-mockup-artwork-x);
  top: var(--az-mockup-artwork-y);
  width: var(--az-mockup-artwork-width);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background: transparent;
  box-shadow: none;
}

.az-finder__room-artwork img {
  position: absolute;
  left: var(--az-mockup-crop-x);
  top: var(--az-mockup-crop-y);
  width: var(--az-mockup-crop-zoom);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}

.az-finder__mockup-note {
  margin: 9px 0 0;
  color: var(--color-foreground-muted);
  font-family: var(--font-paragraph--family);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.az-finder__product-result {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(32px, 5.5vw, 76px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 88px);
}

.az-finder__actual-product {
  position: sticky;
  top: 28px;
}

.az-finder__gallery {
  width: 100%;
}

.az-finder__gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

.az-finder__gallery-main > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.az-finder__gallery-nav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-foreground-heading);
  background: rgb(255 255 255 / 0.9);
  transform: translateY(-50%);
  cursor: pointer;
}

.az-finder__gallery-nav--prev { left: 10px; }
.az-finder__gallery-nav--next { right: 10px; }

.az-finder__gallery-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.az-finder__gallery-thumbs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  margin-top: 12px;
  padding: 2px 0 5px;
  scrollbar-width: thin;
}

.az-finder__gallery-thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 160ms ease;
}

.az-finder__gallery-thumb.is-active {
  opacity: 1;
}

.az-finder__gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.az-finder__product-copy {
  min-width: 0;
}

.az-finder__product-title {
  margin: 0;
  font-size: clamp(calc(var(--az-title-size-mobile) + 4px), 2.3vw, calc(var(--az-title-size) + 8px));
  line-height: 1.16;
}

.az-finder__description {
  margin-top: 22px;
  color: var(--color-foreground);
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.2vw, var(--az-body-size));
  line-height: 1.62;
}

.az-finder__description > :first-child,
.az-finder__facts > :first-child {
  margin-top: 0;
}

.az-finder__description > :last-child,
.az-finder__facts > :last-child {
  margin-bottom: 0;
}

.az-finder__facts {
  margin-top: 24px;
  padding: 0;
  color: var(--color-foreground-heading);
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.15vw, var(--az-body-size));
  line-height: 1.5;
}

.az-finder__facts ul {
  margin: 0;
  padding-left: 1.2em;
}

.az-finder__facts li + li {
  margin-top: 7px;
}

.az-finder__purchase {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.13);
}

.az-finder__price {
  margin: 0;
  color: var(--color-foreground-heading);
  font-family: var(--font-paragraph--family);
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 400;
  line-height: 1.2;
}

.az-finder__scarcity {
  margin: 5px 0 0;
  padding: 0;
  color: var(--color-foreground);
  background: transparent;
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.1vw, var(--az-body-size));
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}

.az-finder__actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.az-finder__add.button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: clamp(12px, 2.2vw, 26px);
  font-size: clamp(12px, 1.05vw, var(--az-button-size));
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.az-finder__add.is-added {
  opacity: 0.86;
}

.az-finder__cart-success {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  text-align: center;
}

.az-finder__cart-success a,
.az-finder__details {
  color: var(--color-primary);
  font-family: var(--font-paragraph--family);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.az-finder__details {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
}

.az-finder__cart-success[hidden],
.az-finder__details[hidden] {
  display: none !important;
}

.az-finder__secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
}

.az-finder__secondary-actions .az-finder__details {
  justify-content: flex-start;
}

.az-finder__share {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  color: var(--color-primary);
  background: transparent;
  font: inherit;
  font-family: var(--font-paragraph--family);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  cursor: pointer;
}

.az-finder__share svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.az-finder__email-teaser {
  padding: 0;
  color: var(--color-foreground);
  background: transparent;
  font-family: var(--font-paragraph--family);
  font-size: clamp(var(--az-body-size-mobile), 1.12vw, var(--az-body-size));
  line-height: 1.52;
}

.az-finder__email-teaser p {
  margin: 0;
}

.az-finder__email-teaser p + p {
  margin-top: 5px;
}

.az-finder__email-heading {
  color: var(--color-foreground-heading);
  font-weight: 700;
}

.az-finder__reload {
  width: 100%;
  max-width: 1120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: clamp(28px, 5vw, 48px) auto 0;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.13);
  color: var(--color-foreground-muted);
  font-family: var(--font-paragraph--family);
}

.az-finder__reload-label {
  font-size: 13px;
  line-height: 1;
}

.az-finder__restart {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-foreground-muted);
  background: transparent;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 180ms ease, transform 180ms ease;
}

.az-finder__restart:hover {
  opacity: 1;
  transform: rotate(-12deg);
}

.az-finder__restart svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.az-finder__error {
  margin-top: 12px;
  color: #a32424;
  font-family: var(--font-paragraph--family);
  font-size: 14px;
  line-height: 1.45;
}

@keyframes az-finder-pulse {
  from { opacity: 0.35; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes az-finder-challenger-in {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes az-finder-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 749px) {
  .az-finder__secondary-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .az-finder__reload {
    margin-top: 30px;
    padding-top: 14px;
  }

  .az-finder__shell {
    width: min(calc(100% - 18px), var(--az-finder-max-width));
    padding-top: max(25px, calc(var(--az-finder-padding-top) * 0.7));
  }

  .az-finder__progress {
    width: min(74%, 260px);
    margin: 17px auto 0;
  }

  .az-finder__heading {
    font-size: var(--az-heading-size-mobile);
  }

  .az-finder__subheading {
    max-width: 34ch;
    margin-top: 10px;
    font-size: var(--az-subheading-size-mobile);
  }

  .az-finder__stage {
    min-height: 450px;
    margin-top: 25px;
  }

  .az-finder__start {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 0 38px;
    text-align: center;
  }

  .az-finder__start-media {
    width: min(84%, 420px);
    margin-inline: auto;
  }

  .az-finder__start-heading {
    font-size: var(--az-heading-size-mobile);
  }

  .az-finder__start-text {
    margin: 12px auto 0;
    font-size: var(--az-body-size-mobile);
  }

  .az-finder__start-button.button {
    width: min(100%, 280px);
    margin: 22px auto 0;
    font-size: var(--az-button-size-mobile);
  }

  .az-finder__duel {
    gap: 8px;
  }

  .az-finder__card {
    padding: 5px;
    border-radius: 7px;
  }

  .az-finder__card--favorite {
    transform: none;
    box-shadow: none;
  }

  .az-finder__duel:not(.az-finder__duel--first) .az-finder__heart-slot {
    position: static;
    min-height: 27px;
    margin: 0 2px 6px;
  }

  .az-finder__duel--first .az-finder__heart-slot {
    display: none;
  }

  .az-finder__favorite-hearts {
    position: static;
    max-width: 100%;
    padding: 2px 0;
    background: transparent;
    backdrop-filter: none;
  }

  .az-finder__heart-row {
    gap: 2px;
  }

  .az-finder__heart {
    width: 17px;
    height: 17px;
  }

  .az-finder__heart-number {
    font-size: 7px;
  }



  .az-finder__title {
    min-height: 3em;
    margin: 8px 2px 7px;
    font-size: var(--az-title-size-mobile);
    line-height: 1.14;
  }

  .az-finder__choice.button {
    min-height: 43px;
    padding: 7px 4px;
    font-size: var(--az-button-size-mobile);
    line-height: 1.18;
  }

  .az-finder__animation-hearts {
    width: min(360px, 94vw);
    min-height: 60px;
  }

  .az-finder__animation-heart-sequence.is-grouped {
    padding-inline-start: 8px;
  }

  .az-finder__animation-hearts .az-finder__heart {
    width: 30px;
    height: 30px;
  }

  .az-finder__animation-hearts .az-finder__heart-number {
    font-size: 12px;
  }

  .az-finder__winner-orbit-heart .az-finder__heart {
    width: 30px;
    height: 30px;
  }

  .az-finder__winner-orbit-heart .az-finder__heart-number {
    font-size: 10px;
  }

  .az-finder__winner-heart {
    top: 6px;
    left: 6px;
  }

  .az-finder__winner-heart .az-finder__heart {
    width: 30px;
    height: 30px;
  }

  .az-finder__add.button {
    padding-inline: 10px;
    font-size: clamp(11px, 3.3vw, var(--az-button-size-mobile));
  }


  .az-finder__conversion {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 6px 4px 58px;
  }

  .az-finder__winner-media {
    width: min(82%, 350px);
    margin-inline: auto;
  }

  .az-finder__conversion-copy {
    padding-inline: 5px;
    text-align: center;
  }

  .az-finder__conversion-heading {
    font-size: var(--az-result-heading-size-mobile);
  }

  .az-finder__conversion-text {
    font-size: var(--az-body-size-mobile);
  }

  .az-finder__rooms {
    gap: 9px;
  }

  .az-finder__room-button.button {
    min-height: 45px;
    padding: 9px 7px;
    font-size: var(--az-body-size-mobile);
  }

  .az-finder__result {
    padding-bottom: 18px;
  }

  .az-finder__result-intro {
    margin-bottom: 22px;
  }

  .az-finder__result-heading {
    font-size: var(--az-result-heading-size-mobile);
  }

  .az-finder__result-sentence {
    margin-top: 9px;
    font-size: calc(var(--az-body-size-mobile) + 2px);
  }

  .az-finder__room-scene {
    aspect-ratio: 3 / 2;
  }

  .az-finder__room-background {
    object-fit: contain;
  }

  .az-finder__mockup-note {
    font-size: 11px;
    text-align: left;
  }

  .az-finder__product-result {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 44px;
  }

  .az-finder__actual-product {
    position: static;
  }

  .az-finder__gallery {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .az-finder__section-label {
    text-align: center;
  }

  .az-finder__product-title {
    font-size: calc(var(--az-title-size-mobile) + 4px);
  }

  .az-finder__description,
  .az-finder__facts,
  .az-finder__scarcity,
  .az-finder__email-teaser,
  .az-finder__share-block > p {
    font-size: var(--az-body-size-mobile);
  }

  .az-finder__price {
    font-size: 25px;
  }

  .az-finder__share-block {
    align-items: flex-start;
    flex-direction: column;
  }

  .az-finder__share {
    padding-left: 0;
  }
}

@media screen and (max-width: 390px) {
  .az-finder__rooms {
    grid-template-columns: 1fr;
  }


  .az-finder__choice.button {
    min-height: 46px;
  }

  .az-finder__add.button {
    font-size: 11px;
    letter-spacing: -0.01em;
  }

  .az-finder__gallery-thumb {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-finder__progress-value,
  .az-finder__card,
  .az-finder__restart,
  .az-finder__gallery-thumb {
    transition: none;
  }

  .az-finder__loading-dot,
  .az-finder__animation-hearts,
  .az-finder__duel.is-entering .az-finder__card--challenger,
  .az-finder__conversion,
  .az-finder__result,
  .az-finder__start {
    animation: none;
  }
}

/* V4: tighter transition from result to email form */
/* Shopify Forms integration */
.az-finder__email-form-host {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -200vw;
  width: min(100%, 720px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.az-finder__email-form-host.is-visible {
  position: relative;
  inset: auto;
  display: block;
  width: min(calc(100% - 32px), 720px);
  margin: clamp(24px, 3.5vw, 38px) auto var(--az-finder-padding-bottom);
  padding-inline: clamp(0px, 2vw, 18px);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  font-family: var(--font-paragraph--family);
  color: var(--color-foreground);
}

.az-finder__email-intro {
  margin: 0 0 clamp(18px, 3vw, 30px);
  text-align: center;
}

.az-finder__email-intro p {
  max-width: 620px;
  margin: 8px auto 0;
  font-family: var(--font-paragraph--family);
  font-size: var(--az-body-size);
  line-height: 1.55;
}

.az-finder__email-heading {
  margin: 0;
  font-family: var(--font-heading--family);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: var(--font-heading--weight);
  line-height: 1.15;
}

.az-finder__email-form-app {
  width: 100%;
  min-height: 1px;
  margin: 0 auto;
}

.az-finder__email-form-app .shopify-block {
  width: 100%;
  margin: 0;
}

@media (max-width: 749px) {
  .az-finder__email-form-host.is-visible {
    width: min(calc(100% - 32px), 720px);
    margin-top: 28px;
    padding-inline: 0;
  }

  .az-finder__email-intro {
    text-align: left;
  }

  .az-finder__email-intro p {
    margin-inline: 0;
    font-size: var(--az-body-size-mobile);
  }

  .az-finder__email-heading {
    font-size: clamp(22px, 7vw, 29px);
  }
}


/* V2.18: show all hearts equally first, then move and enlarge the collector */
.az-finder__animation-heart-sequence.is-merge-all {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(330px, 90vw);
  height: 150px;
  display: block;
  transform: translate(-50%, -50%);
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-row {
  position: absolute;
  left: 50%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(-50%);
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-row.is-row-top {
  top: 4px;
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-row.is-row-bottom {
  bottom: 3px;
  min-height: 40px;
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-item {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  transform-origin: center;
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-item .az-finder__heart {
  width: 38px;
  height: 38px;
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-item.is-anchor {
  position: relative;
  z-index: 4;
}

.az-finder__animation-heart-sequence.is-merge-all .az-finder__animation-heart-item.is-anchor .az-finder__heart-number {
  font-size: 15px;
}

@media (max-width: 749px) {
  .az-finder__animation-heart-sequence.is-merge-all {
    width: min(300px, 92vw);
    height: 140px;
  }
}