/** Shopify CDN: Minification failed

Line 1147:0 Unexpected "@media"

**/
/* ============================================================================
   ISELA THEME — Produktionsschicht (Phase A)
   ----------------------------------------------------------------------------
   Eine einzige Anpassungsebene über Dawn. Ersetzt fünf übereinandergestapelte
   Experimentalschichten (isela-premium, isela-3d, isela-spatial-pages,
   isela-level-100, isela-variant-studio – zusammen 196 KB mit 454 !important).

   REGELN DIESER DATEI
   1. Kein !important, ausser gegen ein bestehendes !important aus Dawn.
   2. Keine globale Manipulation von opacity oder visibility.
      Inhalte sind immer sichtbar; nichts hängt von JavaScript ab.
   3. Farben ausschliesslich über die Shopify-Farbschemata, damit der
      Theme-Editor wirksam bleibt.
   4. Jede Regel gehört zu einem benannten Abschnitt.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN-TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Vertikaler Rhythmus – vier Stufen statt beliebiger Section-Paddings */
  --isela-space-xs: clamp(1.2rem, 2vw, 2rem);
  --isela-space-s: clamp(2.4rem, 4vw, 4rem);
  --isela-space-m: clamp(3.6rem, 5.5vw, 6rem);
  --isela-space-l: clamp(5.6rem, 8vw, 9rem);

  /* Typografie: Display für Markenaussagen, Title für Produktnamen.
     Die Trennung ist bewusst – im Altbestand rendelte ein 67 Zeichen langer
     Produktname mit 60px Display-Grösse in einer 285px-Spalte. */
  --isela-display-l: clamp(3.6rem, 6.5vw, 7.2rem);
  --isela-display-m: clamp(2.8rem, 4.2vw, 4.4rem);
  --isela-title-l: clamp(2rem, 2.6vw, 2.8rem);
  --isela-title-m: clamp(1.6rem, 1.9vw, 2rem);
  --isela-title-s: 1.5rem;
  --isela-body: 1.6rem;
  --isela-caption: 1.4rem;
  --isela-micro: 1.3rem;

  --isela-kicker-size: 1.2rem;
  --isela-kicker-track: 0.16em;

  /* Form */
  --isela-line: 1px solid rgba(var(--color-foreground), 0.14);
  --isela-line-strong: 1px solid rgba(var(--color-foreground), 0.4);

  /* Bildverhältnisse */
  --isela-ratio-portrait: 3 / 4;
  --isela-ratio-editorial: 4 / 5;
  --isela-ratio-wide: 16 / 9;

  /* Motion – eine Kurve, drei Dauern. In Phase A nur für Hover und Fokus. */
  --isela-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --isela-fast: 180ms;
  --isela-base: 320ms;

  --isela-gap: clamp(0.8rem, 1.4vw, 1.6rem);
  --isela-gap-l: clamp(1.6rem, 2.6vw, 3.2rem);
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAFISCHE GRUNDLAGE
   ------------------------------------------------------------------------ */
.isela-kicker {
  margin: 0 0 1.2rem;
font-weight: 700;
text-transform: uppercase;
}

.isela-heading {
  margin: 0;
  font-size: var(--isela-display-m);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.isela-copy {
  font-size: var(--isela-body);
  line-height: 1.7;
  max-width: 60ch;
}

.isela-copy p:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   3. BUTTONS
   Ein einziges Buttonbild. Im Altbestand war der Kaufbutton eine grüne
   Verlaufs-Pille, während alle anderen Buttons flach und eckig waren.
   ------------------------------------------------------------------------ */
.button,
.shopify-payment-button__button--unbranded {
  min-height: 5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.product-form__submit {
  min-height: 5.4rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button {
    transition: transform var(--isela-fast) var(--isela-ease);
  }

  .button:hover {
    transform: translateY(-1px);
  }

  .button:active {
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   4. PRODUKTKARTEN
   Groesse, Umbruch, Hoehe und Hover stehen gebuendelt in C21.
   ------------------------------------------------------------------------ */
/* Titel und Preis dürfen die Rasterspalte nicht aufziehen. Produktgrids nutzen
   1fr-Spalten, deren Mindestbreite sich aus dem min-content der Inhalte ergibt. */
.card__information,
.card-information {
  min-width: 0;
}

/* --- Farb-Swatches auf der Karte ---------------------------------------- */
.isela-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.isela-swatch {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid rgba(var(--color-foreground), 0.3);
  border-radius: 50%;
  background-color: var(--isela-swatch, #d8d1ca);
  background-image: var(--isela-swatch-image, none);
  background-size: cover;
  background-position: center;
}

.isela-swatch--more {
  font-size: var(--isela-micro);
  opacity: 0.72;
}

/* ---------------------------------------------------------------------------
   5. FARBTABELLE FÜR SWATCHES
   Greift, wenn im Shopify-Admin keine Taxonomie-Swatches gepflegt sind.
   Ein gepflegter Swatch gewinnt, weil er inline gesetzt wird.
   ------------------------------------------------------------------------ */
[data-isela-color] { --isela-swatch: #d8d1ca; }
[data-isela-color='schwarz'], [data-isela-color='black'] { --isela-swatch: #161616; }
[data-isela-color='weiss'], [data-isela-color='white'] { --isela-swatch: #f5f3ef; }
[data-isela-color='grau'], [data-isela-color='gray'], [data-isela-color='grey'] { --isela-swatch: #8b8a86; }
[data-isela-color='beige'], [data-isela-color='sand'], [data-isela-color='creme'], [data-isela-color='cream'] { --isela-swatch: #d8c2a8; }
[data-isela-color='blau'], [data-isela-color='blue'] { --isela-swatch: #5377a8; }
[data-isela-color='hellblau'], [data-isela-color='saphirblau'] { --isela-swatch: #7fa9d0; }
[data-isela-color='navy'], [data-isela-color='dunkelblau'], [data-isela-color='marine'] { --isela-swatch: #283a55; }
[data-isela-color='gruen'], [data-isela-color='grun'], [data-isela-color='green'] { --isela-swatch: #5f7a5f; }
[data-isela-color='oliv'], [data-isela-color='olive'], [data-isela-color='khaki'] { --isela-swatch: #77784f; }
[data-isela-color='rosa'], [data-isela-color='rose'] { --isela-swatch: #dba7b5; }
[data-isela-color='pink'], [data-isela-color='pink-orange'] { --isela-swatch: #d9578c; }
[data-isela-color='rot'], [data-isela-color='red'] { --isela-swatch: #b2444a; }
[data-isela-color='bordeaux'], [data-isela-color='weinrot'], [data-isela-color='burgundy'] { --isela-swatch: #7d2f3c; }
[data-isela-color='lila'], [data-isela-color='purple'], [data-isela-color='violett'], [data-isela-color='dunkellila'] { --isela-swatch: #8f7bb0; }
[data-isela-color='braun'], [data-isela-color='mokka'], [data-isela-color='mocha'] { --isela-swatch: #75584a; }
[data-isela-color='gelb'], [data-isela-color='yellow'] { --isela-swatch: #d8bd57; }
[data-isela-color='snake-print'], [data-isela-color='zufallsfarbe'] { --isela-swatch: #b9ab97; }
[data-isela-color='orange'] { --isela-swatch: #d9793f; }
/* T-009.1: Farbnamen ohne eindeutige Grundfarbe (Mehrfarbiges, Lieferanten-Fantasienamen)
   zeigen keinen erfundenen Farbpunkt, sondern ein neutrales Muster. Der Name steht daneben. */
[data-isela-color='unbestimmt'] { --isela-swatch: #f7f1ec; --isela-swatch-image: repeating-linear-gradient(45deg, rgba(58, 51, 46, 0.24) 0 1.5px, transparent 1.5px 5px); }

/* ---------------------------------------------------------------------------
   6. VARIANTENAUSWAHL
   Wichtig: Dawn rendert die Span .label-unavailable in JEDEM Options-Label.
   Der Altbestand selektierte label:has(.label-unavailable) und markierte damit
   jede Farbe und jede Grösse als ausverkauft, obwohl alles lieferbar war.
   Hier wird ausschliesslich der tatsächliche Zustand des Inputs ausgewertet.
   ------------------------------------------------------------------------ */
.isela-option {
  margin: 0 0 var(--isela-space-xs);
  padding: 0;
  border: 0;
}

.isela-option__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 1rem;
  font-size: var(--isela-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.isela-option__value {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--isela-caption);
}

.isela-option__aside {
  margin-left: auto;
  font-size: var(--isela-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: inherit;
  text-underline-offset: 0.35rem;
  white-space: nowrap;
}

/* --- Farbwahl ------------------------------------------------------------ */
.isela-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.isela-colors input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.isela-color {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  /* 4.4rem Trefferfläche, auch wenn der Punkt kleiner wirkt */
  min-width: 4.4rem;
}

.isela-color__dot {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground), 0.25);
  background-color: var(--isela-swatch, #d8d1ca);
  background-image: var(--isela-swatch-image, none);
  background-size: cover;
  background-position: center;
  transition: box-shadow var(--isela-base) var(--isela-ease);
}

.isela-color__name {
  font-size: var(--isela-micro);
}

.isela-colors input:checked + .isela-color .isela-color__dot {
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3px rgb(var(--color-foreground));
}

.isela-colors input:focus-visible + .isela-color .isela-color__dot {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 3px;
}

/* Nur wirklich nicht wählbare Farben */
.isela-colors input:disabled + .isela-color {
  cursor: not-allowed;
  opacity: 0.45;
}

.isela-colors input:disabled + .isela-color .isela-color__dot::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* --- Grössenwahl --------------------------------------------------------- */
.isela-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.isela-sizes input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.isela-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  min-height: 4.4rem;
  padding: 0 1.4rem;
  border: var(--isela-line-strong);
  font-size: var(--isela-caption);
  cursor: pointer;
  transition:
    background var(--isela-fast) var(--isela-ease),
    color var(--isela-fast) var(--isela-ease);
}

.isela-sizes input:checked + .isela-size {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.isela-sizes input:focus-visible + .isela-size {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 2px;
}

.isela-sizes input:disabled + .isela-size {
  position: relative;
  overflow: hidden;
  cursor: not-allowed;
  opacity: 0.45;
}

/* Der Strich wird am Rahmen geklemmt, sonst ragt er heraus. */
.isela-sizes input:disabled + .isela-size::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: rotate(-16deg);
}

.isela-option__note {
  margin: 0.8rem 0 0;
  font-size: var(--isela-micro);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   7. HERO
   Getrennte Komposition für Desktop und Mobile, kein skaliertes Desktopbild.
   Kein opacity-Startzustand: der Hero ist sofort da.
   ------------------------------------------------------------------------ */
.isela-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62rem;
  overflow: hidden;
  background: rgb(var(--color-foreground));
}

.isela-hero--screen {
  min-height: min(82svh, 88rem);
}

.isela-hero__media {
  position: absolute;
  inset: 0;
  /* Eigener Stapelkontext - Begruendung beim Bild weiter unten. */
  z-index: 0;
}

.isela-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--isela-hero-focus, center 25%);
  display: block;
}

.isela-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, var(--isela-hero-dim, 0.5)) 0%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(0deg, rgba(0, 0, 0, var(--isela-hero-dim, 0.5)) 0%, rgba(0, 0, 0, 0) 46%);
}

.isela-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--isela-space-l);
  padding-bottom: var(--isela-space-m);
  color: #fff;
}

.isela-hero__inner {
  max-width: 54rem;
}

.isela-hero__title {
  margin: 0 0 1.8rem;
  font-size: clamp(5.2rem, 5vw, 8.8rem);
  line-height: 0.97;
  letter-spacing: -0.032em;
  color: inherit;
  text-wrap: balance;
}

.isela-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

.isela-hero .isela-kicker {
  color: inherit;
}

.isela-hero__title-mobile {
  display: none;
}

@media (max-width: 749px) {
  .isela-hero {
    min-height: 56rem;
  }

  .isela-hero--screen {
    min-height: min(78svh, 64rem);
  }

  .isela-hero__media img {
    object-position: var(--isela-hero-focus-mobile, center 30%);
  }

  /* Getrennte Headline: lange Markenclaims werden auf 375px sonst vierzeilig */
  .isela-hero__title-desktop {
    display: none;
  }

  .isela-hero__title-mobile {
    display: inline;
  }

  /* Daumenzone: beide Buttons volle Breite untereinander */
  .isela-hero__actions {
    display: grid;
    gap: 0.8rem;
  }

  .isela-hero__actions .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   8. USP-LEISTE
   ------------------------------------------------------------------------ */
.isela-usp {
  padding: var(--isela-space-s) 0;
  border-bottom: var(--isela-line);
}

.isela-usp__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
  padding: 0;
  list-style: none;
}

.isela-usp__item {
  display: flex;
}

.isela-usp__mark {
  display: grid;
  place-items: center;
border: var(--isela-line-strong);
  border-radius: 50%;
line-height: 1;
}

.isela-usp__item strong {
  display: block;
font-weight: 700;
text-transform: uppercase;
}

.isela-usp__item small {
  display: block;
line-height: 1.4;
}

.isela-usp__item a {
  color: inherit;
  text-underline-offset: 0.3rem;
}

@media (max-width: 989px) {
  .isela-usp__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   9. KATEGORIE-KACHELN
   ------------------------------------------------------------------------ */
.isela-cats {
  padding: var(--isela-space-l) 0;
}

.isela-cats__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--isela-gap-l);
  align-items: end;
  margin-bottom: var(--isela-space-s);
}

.isela-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--isela-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.isela-cat {
  position: relative;
  display: block;
  aspect-ratio: var(--isela-ratio-portrait);
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.08);
  color: #fff;
  text-decoration: none;
}

.isela-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--isela-ease);
}

.isela-cat::after {
  content: '';
  position: absolute;
  inset: 0;
}

.isela-cat__copy {
  position: absolute;
  z-index: 1;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.6rem;
}

.isela-cat__title {
  display: block;
  font-size: var(--isela-title-m);
line-height: 1.15;
}

.isela-cat__meta {
  display: block;
  margin-top: 0.4rem;
text-transform: uppercase;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .isela-cat:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 989px) {
  .isela-cats__head,
  .isela-cats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .isela-cats__head {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   10. MARKENVERSPRECHEN
   ------------------------------------------------------------------------ */
.isela-promise {
  padding: var(--isela-space-l) 0;
}

.isela-promise__head {
  max-width: 72rem;
}

.isela-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: var(--isela-line);
  padding-top: var(--isela-space-s);
}

.isela-promise__item h3 {
  margin: 0.8rem 0 0.6rem;
  font-size: var(--isela-title-m);
}

.isela-promise__item p {
  margin: 0;
  font-size: var(--isela-body);
  line-height: 1.6;
}

@media (max-width: 749px) {
  .isela-promise__grid {
    grid-template-columns: 1fr;
    gap: var(--isela-space-s);
  }
}

/* ---------------------------------------------------------------------------
   11. PRODUKTSEITE
   ------------------------------------------------------------------------ */
.isela-page-product .product__title h1 {
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (max-width: 749px) {
  .isela-page-product .product__title h1 {
    font-size: 2.4rem;
  }
}

.product__info-container .price {
  margin-top: 0.8rem;
}

/* --- Trustleiste --------------------------------------------------------- */
.isela-trust {
  padding: 0 0 var(--isela-space-s);
}

.isela-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

.isela-trust__item {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 1.4rem;
  border: var(--isela-line);
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: border-color var(--isela-base) var(--isela-ease);
}

a.isela-trust__item:hover {
  border-color: rgba(var(--color-foreground), 0.45);
}

.isela-trust__icon {
  display: grid;
  place-items: center;
  flex: 0 0 3.6rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-weight: 700;
}

.isela-trust__item strong {
  display: block;
  font-size: var(--isela-title-s);
}

.isela-trust__item small {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--isela-micro);
  line-height: 1.45;
  opacity: 0.72;
}

@media (max-width: 989px) {
  .isela-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 749px) {
  .isela-trust__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* --- Sticky Kaufleiste (Mobile) -----------------------------------------
   Eigene Section am Seitenende: im Produktcontainer scheitert position:fixed,
   sobald ein Vorfahre perspective oder backdrop-filter setzt. */
.isela-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: none;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--color-background), 0.96);
  color: rgb(var(--color-foreground));
  border-top: var(--isela-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(105%);
  transition: transform var(--isela-base) var(--isela-ease);
}

.isela-buybar.is-visible {
  transform: translateY(0);
}

.isela-buybar__info {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.isela-buybar__title {
  display: block;
  font-size: var(--isela-micro);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isela-buybar__price {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--isela-micro);
  opacity: 0.7;
}

.isela-buybar__action {
  flex: 0 0 auto;
  min-width: 14rem;
  min-height: 4.8rem;
  margin: 0;
}

@media (max-width: 749px) {
  .isela-buybar {
    display: flex;
  }

  body.isela-has-buybar .shopify-section-group-footer-group {
    padding-bottom: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .isela-buybar {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   12. COLLECTION
   ------------------------------------------------------------------------ */
.isela-collection-head {
  padding: var(--isela-space-s) 0 var(--isela-space-xs);
}

.isela-collection-head__title {
  margin: 0 0 1.2rem;
  font-size: var(--isela-display-m);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.isela-collection-head__desc {
  font-size: var(--isela-body);
  line-height: 1.7;
  max-width: 68ch;
}

.isela-collection-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: var(--isela-space-xs);
}

.isela-collection-links a {
  font-size: var(--isela-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  text-underline-offset: 0.5rem;
}

.isela-collection-links a[aria-current='page'] {
  text-decoration: underline;
}

@media (max-width: 749px) {
  /* Die Kollektionsbeschreibung darf das erste Produkt nicht unter die Falz
     drücken. Im Altbestand waren das 797px Text vor dem ersten Artikel. */
  .isela-collection-head__desc {
    font-size: var(--isela-caption);
  }

  .isela-collection-head__desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.isela-more {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--isela-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  cursor: pointer;
}

.isela-more[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   13. CART DRAWER
   ------------------------------------------------------------------------ */
.isela-ship {
  padding: 1.2rem 0 1.4rem;
  border-top: var(--isela-line);
}

.isela-ship__text {
  margin: 0 0 0.8rem;
  font-size: var(--isela-caption);
  line-height: 1.4;
}

.isela-ship__bar {
  height: 3px;
  background: rgba(var(--color-foreground), 0.14);
  overflow: hidden;
}

.isela-ship__fill {
  display: block;
  height: 100%;
  background: rgb(var(--color-foreground));
  transition: width 600ms var(--isela-ease);
}

/* ---------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------ */
.footer-block__heading {
  font-size: var(--isela-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.isela-footer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.isela-footer-toggle__icon {
  display: none;
}

@media (max-width: 749px) {
  .isela-footer-collapsible .footer-block__heading {
    margin: 0;
  }

  .isela-footer-collapsible .isela-footer-toggle {
    min-height: 4.8rem;
    cursor: pointer;
  }

  .isela-footer-collapsible .isela-footer-toggle__icon {
    position: relative;
    display: block;
    flex: 0 0 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
  }

  .isela-footer-collapsible .isela-footer-toggle__icon::before,
  .isela-footer-collapsible .isela-footer-toggle__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: currentColor;
    transition: transform var(--isela-base) var(--isela-ease);
  }

  .isela-footer-collapsible .isela-footer-toggle__icon::after {
    transform: rotate(90deg);
  }

  .isela-footer-collapsible.is-open .isela-footer-toggle__icon::after {
    transform: rotate(0deg);
  }

  /* Der 0fr-zu-1fr-Trick braucht GENAU EIN Kind. Hier ist das Element aber
     die <ul> selbst, und ihre <li> sind mehrere Kinder: das erste landet in
     der ausdruecklichen 0fr-Zeile und wird auf null Hoehe gequetscht, die
     uebrigen in impliziten auto-Zeilen. Ergebnis: der erste Link liegt unter
     dem zweiten - die gemeldete Ueberlagerung.

     Deshalb hier max-height. Der Wert ist bewusst grosszuegig ueber der
     laengsten Spalte (6 Links, rund 24rem) und wird nie sichtbar erreicht. */
  .isela-footer-collapsible .footer-block__details-content {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--isela-base) var(--isela-ease);
  }

  .isela-footer-collapsible.is-open .footer-block__details-content {
    max-height: 60rem;
    padding-bottom: 1.2rem;
  }

  .isela-footer-collapsible .footer-block__details-content li {
    padding-block: 0.2rem;
  }
}

/* ---------------------------------------------------------------------------
   15. FOKUS UND REDUZIERTE BEWEGUNG
   ------------------------------------------------------------------------ */
.isela-swatch:focus-visible,
.isela-more:focus-visible,
.isela-footer-toggle:focus-visible,
.isela-buybar__action:focus-visible,
.isela-option__aside:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .isela-cat img,
  .card__media .media img,
  .button,
  .isela-ship__fill,
  .isela-footer-collapsible .footer-block__details-content {
    transition: none;
  }

  .isela-cat:hover img,
  .card-wrapper:hover .card__media .media img {
    transform: none;
  }
}

/* ============================================================================
   PHASE C — PREMIUM VISUAL PASS
   ----------------------------------------------------------------------------
   Grundlage sind Messungen am gerenderten Theme (1440 Desktop / 375 Mobile),
   nicht Geschmacksurteile. Die jeweils gemessenen Ausgangswerte stehen dabei.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   C1. Editorialer Rhythmus
   GEMESSEN: Section-Paddings lagen bei 0 / 40 / 0 / 90 / 0 / 90 / 0 / 0 px.
   Dawn-Sections brachten 0 mit (spacing_sections = 0), eigene Sections 90.
   Ergebnis war kein Rhythmus, sondern Zufall. Jetzt ein durchgehender Takt,
   der auf Mobile enger wird, ohne zu kleben.
   ------------------------------------------------------------------------ */
.shopify-section-group-header-group + #MainContent > .shopify-section:first-child {
  margin-top: 0;
}

/* HIER STANDEN ID-SELEKTOREN, die jeder eigenen Section ein einheitliches
   padding-block gaben. Zwei Gruende, warum sie weg sind:

   1. Mit Spezifitaet 1,1,2 schlugen sie jede spaetere Klassenregel. In
      Phase E2 bekommt jede Section ihre eigene Dichte - kompakt, weit,
      bildstark - und die ID-Regel hat das stillschweigend ueberstimmt.
      Am gerenderten Shop gemessen: der Trust-Strip stand auf 90 px Padding
      oben und unten bei 39 px Inhalt, also 220 px fuer eine Servicezeile.

   2. Die zweite Regel war schlicht kaputt. Vor dem Kommentar stand ein
      haengengebliebenes Selektorfragment "#MainContent > .shopify-section >",
      das nach dem Entfernen des Kommentars mit dem naechsten Selektor
      verschmolz. Herausgekommen ist ein Selektor, der auf nichts passt -
      die Dawn-Sections haben ihre Untergrenze also nie bekommen.

   Der Rhythmus liegt jetzt vollstaendig in E2, ueber Klassen und die drei
   Dichte-Tokens. Die Dawn-Sections bekommen ihre Untergrenze hier, ohne ID. */

.shopify-section .collection,
.shopify-section .rich-text,
.shopify-section .collapsible-content {
  padding-block: var(--isela-space-m);
}

/* ---------------------------------------------------------------------------
   C2. Typografie – editorialer statt E-Commerce-Standard
   GEMESSEN: Kartentitel 14,5px, Preis 13px. Der Preis war kleiner als der
   Titel – in Fashion ist das die falsche Hierarchie.
   ------------------------------------------------------------------------ */
.isela-heading,
.collection .title,
.rich-text__heading,
.collapsible-content .title {
  font-size: var(--isela-display-m);
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* Section-Kopf einheitlich: Kicker, Headline, optionaler Beitext */
.collection .title-wrapper-with-link,
.isela-cats__head,
.isela-promise__head {
  align-items: end;
  padding-bottom: var(--isela-space-xs);
  border-bottom: var(--isela-line);
  margin-bottom: var(--isela-space-s);
}

/* ---------------------------------------------------------------------------
   C3. Header – Navigationsumbruch
   GEMESSEN: Die Navigation lief auf ZWEI Zeilen, Header 108px hoch.
   Ursache: mittiges Logo teilt die Breite in 492 / 74 / 492, die sechs
   Menuepunkte brauchten 505px. Loesung ohne Layoutwechsel: kompaktere
   Laufweite und Abstaende, damit die Leiste einzeilig bleibt.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu--inline {
    flex-wrap: nowrap;
    column-gap: 0;
  }

  .header__menu-item {
    padding-inline: 1rem;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* Bei sehr vielen Menuepunkten weiter verdichten, statt umzubrechen. */
  @media (max-width: 1200px) {
    .header__menu-item {
      padding-inline: 0.7rem;
      font-size: 1.3rem;
      letter-spacing: 0.06em;
    }
  }
}

/* ---------------------------------------------------------------------------
   C4. Produktkarten – Premium-Pass
   GEMESSEN (Mobile 375): Karte 168px breit, Titel 14,5px, Preis 13px,
   Quick-Add 50px hoch mit dem 18 Zeichen langen Text "Optionen auswaehlen"
   bei 12px. Das wirkt gequetscht.
   ------------------------------------------------------------------------ */
@media screen and (max-width: 749px) {
  /* Der lange CTA passt auf 168px nicht in eine Zeile. Kleinere Laufweite,
     etwas mehr Hoehe, Text darf umbrechen statt abgeschnitten zu werden. */
  .quick-add__submit {
    min-height: 4.4rem;
    padding-inline: 0.8rem;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: normal;
  }

}

/* ---------------------------------------------------------------------------
   C5. Bildzuschnitt und Hover
   ------------------------------------------------------------------------ */
.card__media,
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card__media .media img {
    transition: transform 640ms var(--isela-ease), opacity 320ms var(--isela-ease);
  }

  .card-wrapper:hover .card__media .media img {
    transform: scale(1.035);
  }

  /* Quick-Add erst beim Hovern einblenden – ruhigeres Raster im Ruhezustand */
  .card-wrapper .quick-add {
    opacity: 1;
    transition: opacity var(--isela-base) var(--isela-ease);
  }
}

/* ---------------------------------------------------------------------------
   C6. Buttons – eine Sprache
   ------------------------------------------------------------------------ */
.button,
.shopify-payment-button__button--unbranded {
  letter-spacing: 0.12em;
  font-size: 1.3rem;
}

.button--secondary {
  background: transparent;
}

@media screen and (max-width: 749px) {
  .button {
    min-height: 4.8rem;
  }
}

/* ---------------------------------------------------------------------------
   C7. MOTION-SYSTEM
   ----------------------------------------------------------------------------
   SICHERHEITSREGEL: Die verbergende Regel haengt an html.isela-motion.
   Diese Klasse setzt ausschliesslich isela-theme.js, und zwar erst nachdem
   der Observer steht. Ohne JavaScript, im Theme-Editor oder bei reduzierter
   Bewegung wird sie nie gesetzt – dann ist alles sichtbar.

   Genau diese Absicherung fehlte der Vorgaengerversion; dort blieben ganze
   Seiten leer, wenn der Observer nicht ausloeste.

   Dauern: 200-700ms, je nach Zweck. Nur zwei Eigenschaften werden animiert
   (opacity, transform) – beide laufen auf dem Compositor.
   ------------------------------------------------------------------------ */
html.isela-motion [data-isela-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.6rem, 0);
  transition:
    opacity 620ms var(--isela-ease) var(--isela-delay, 0ms),
    transform 620ms var(--isela-ease) var(--isela-delay, 0ms);
  will-change: opacity, transform;
}

html.isela-motion [data-isela-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Bild-Reveal: das Bild zieht sich aus einer leichten Vergroesserung zurueck,
   waehrend die Maske aufgeht. Ruhiger als ein Slide, wirkt fotografischer. */
html.isela-motion [data-isela-reveal-image] {
  overflow: hidden;
}

html.isela-motion [data-isela-reveal-image] img {
  transform: scale(1.06);
  transition: transform 900ms var(--isela-ease);
}

html.isela-motion [data-isela-reveal-image].is-in img {
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   C8. Header-Scroll-Zustand
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .section-header {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   C9. SHOP THE LOOK
   ----------------------------------------------------------------------------
   Grundzustand ohne JavaScript: Bild oben, darunter eine normale Produktliste.
   Vollstaendig bedienbar. Erst .isela-stl--interactive (von isela-theme.js
   gesetzt) macht daraus Popover bzw. Bottom Sheet.
   ------------------------------------------------------------------------ */
.isela-stl__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--isela-gap-l);
  align-items: end;
  padding-bottom: var(--isela-space-xs);
  border-bottom: var(--isela-line);
  margin-bottom: var(--isela-space-s);
}

.isela-stl__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(28rem, 0.9fr);
  gap: var(--isela-gap-l);
  align-items: start;
}

.isela-stl__stage {
  position: relative;
  aspect-ratio: var(--isela-ratio-editorial);
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.06);
}

.isela-stl__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Hotspot -------------------------------------------------------------
   Sichtbarer Punkt 1.4rem, Trefferflaeche 4.4rem – eine 14px-Scheibe waere
   auf Touch nicht zuverlaessig zu treffen. */
.isela-stl__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.isela-stl__pin-dot {
  position: relative;
border-radius: 50%;
transition: transform var(--isela-base) var(--isela-ease);
}

/* Ruhiger Puls, damit die Punkte auffallen, ohne zu blinken. */
@media (prefers-reduced-motion: no-preference) {
  .isela-stl__pin-dot::after {
    content: '';
    position: absolute;
    inset: -0.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.75);
    animation: isela-pulse 2.8s var(--isela-ease) infinite;
  }
}

@keyframes isela-pulse {
  0% { transform: scale(0.75); opacity: 0.9; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.isela-stl__pin:hover .isela-stl__pin-dot,
.isela-stl__pin:focus-visible .isela-stl__pin-dot,
.isela-stl__pin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Kartenliste (Grundzustand, ohne JS) --------------------------------- */
.isela-stl__list {
  display: grid;
  gap: var(--isela-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.isela-stl__card {
  position: relative;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.2rem;
  border: var(--isela-line);
  background: rgb(var(--color-background));
}

.isela-stl__thumb {
  display: block;
  aspect-ratio: var(--isela-ratio-portrait);
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.06);
}

.isela-stl__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.isela-stl__info {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.isela-stl__num {
  font-size: var(--isela-micro);
  letter-spacing: var(--isela-kicker-track);
  opacity: 0.68;
}

.isela-stl__name {
  font-size: var(--isela-title-s);
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.isela-stl__price {
  font-size: var(--isela-title-s);
  font-weight: 600;
}

.isela-stl__meta {
  font-size: var(--isela-micro);
  opacity: 0.72;
}

.isela-stl__cta {
  justify-self: start;
  margin-top: 0.6rem;
  min-height: 4.4rem;
}

.isela-stl__close {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: inherit;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

.isela-stl__scrim {
  display: none;
}

/* --- Interaktiver Zustand (nur mit JavaScript) --------------------------- */
@media screen and (min-width: 750px) {
  .isela-stl--interactive .isela-stl__card {
    transition: border-color var(--isela-base) var(--isela-ease);
  }

  .isela-stl--interactive .isela-stl__card.is-open {
    border-color: rgba(var(--color-foreground), 0.5);
  }

  .isela-stl--interactive .isela-stl__close {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .isela-stl__head,
  .isela-stl__layout {
    grid-template-columns: 1fr;
  }

  /* Ohne JS bleibt die Liste eine normale Liste unter dem Bild.
     Mit JS wird sie zum Bottom Sheet. */
  .isela-stl--interactive .isela-stl__list {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    padding: 0.8rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--color-background));
    border-top: var(--isela-line);
    transform: translateY(101%);
    transition: transform 380ms var(--isela-ease);
    pointer-events: none;
  }

  .isela-stl--interactive .isela-stl__card {
    border: 0;
    padding: 1.2rem 0;
  }

  .isela-stl--interactive.is-sheet-open .isela-stl__list {
    transform: translateY(0);
    pointer-events: auto;
    box-shadow: 0 -1.2rem 3.6rem rgba(0, 0, 0, 0.18);
  }

  .isela-stl--interactive .isela-stl__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms var(--isela-ease);
  }

  .isela-stl--interactive.is-sheet-open .isela-stl__scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .isela-stl__pin-dot,
  .isela-stl--interactive .isela-stl__list,
  .isela-stl--interactive .isela-stl__scrim {
    transition: none;
    animation: none;
  }

  .isela-stl__pin-dot::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   C10. EDITORIAL STORY
   ------------------------------------------------------------------------ */
.isela-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.4rem, 6vw, 8rem);
  align-items: center;
}

.isela-story__media {
  position: relative;
}

.isela-story__fig {
  margin: 0;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.06);
}

.isela-story__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.isela-story__fig--main {
  aspect-ratio: var(--isela-ratio-editorial);
}

/* Das Detailbild ueberlappt bewusst – das erzeugt editoriale Tiefe ohne
   ein zweites Raster. Es ragt in die Spaltenluecke, nicht aus der Seite. */
.isela-story__fig--sub {
  position: absolute;
  right: -7%;
  bottom: -8%;
  width: 40%;
  aspect-ratio: var(--isela-ratio-portrait);
  border: 0.8rem solid rgb(var(--color-background));
}

.isela-story__heading {
  margin: 0 0 1.6rem;
max-width: 18ch;
  text-wrap: balance;
}

.isela-story__text {
  font-size: var(--isela-body);
  line-height: 1.7;
}

.isela-story__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--isela-gap-l);
  margin: var(--isela-space-s) 0;
  padding-top: var(--isela-space-xs);
  border-top: var(--isela-line);
}

.isela-story__facts dt {
  font-size: var(--isela-micro);
  letter-spacing: var(--isela-kicker-track);
  text-transform: uppercase;
  opacity: 0.72;
}

.isela-story__facts dd {
  margin: 0.4rem 0 0;
}

/* Sticky-Layout: Bild bleibt stehen, der Text scrollt daran vorbei. */
@media screen and (min-width: 990px) {
  .isela-story--sticky .isela-story__media {
    position: sticky;
    top: calc(var(--isela-space-s) + 6rem);
  }

  .isela-story--sticky .isela-story__copy {
    padding-block: var(--isela-space-l);
  }
}

.isela-story--fullbleed .isela-story__grid {
  grid-template-columns: 1fr;
}

.isela-story--fullbleed .isela-story__fig--main {
  aspect-ratio: var(--isela-ratio-wide);
}

.isela-story--fullbleed .isela-story__fig--sub {
  display: none;
}

@media screen and (max-width: 989px) {
  /* Gestapelt statt verkleinert: die Ueberlappung funktioniert auf 375px
     nicht, das zweite Bild wird zum schmalen Akzent. */
  .isela-story__grid {
    grid-template-columns: 1fr;
    gap: var(--isela-space-s);
  }

  .isela-story__fig--sub {
    right: 0;
    bottom: -5%;
    width: 32%;
    border-width: 0.5rem;
  }

  .isela-story__heading {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   C11. SHOPPABLE REELS
   ------------------------------------------------------------------------ */
.isela-reels__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--isela-gap-l);
  align-items: end;
  padding-bottom: var(--isela-space-xs);
  border-bottom: var(--isela-line);
  margin-bottom: var(--isela-space-s);
}

.isela-reels__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--isela-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.isela-reel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.isela-reel__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.06);
  text-decoration: none;
}

.isela-reel__media img,
.isela-reel__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 640ms var(--isela-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .isela-reel__media:hover img,
  .isela-reel__media:hover video {
    transform: scale(1.04);
  }
}

.isela-reel__caption {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  color: #fff;
line-height: 1.35;
}

.isela-reel__shop {
  display: grid;
  gap: 0.25rem;
  padding-top: 1.1rem;
}

.isela-reel__name {
  font-size: var(--isela-title-s);
line-height: 1.3;
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.isela-reel__price {
  font-size: var(--isela-title-s);
  font-weight: 600;
}

.isela-reel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 4.4rem;
  font-size: var(--isela-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  text-underline-offset: 0.4rem;
}

@media screen and (max-width: 989px) {
  .isela-reels__head {
    grid-template-columns: 1fr;
  }

  /* Horizontales Snap-Rail: das Verhalten, das Besucherinnen aus TikTok und
     Instagram mitbringen. Die Karten laufen bis an den Rand, damit erkennbar
     bleibt, dass weitere folgen. */
  .isela-reels__wrap {
    overflow: hidden;
  }

  .isela-reels__rail {
    grid-auto-columns: 66vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .isela-reels__rail::-webkit-scrollbar {
    display: none;
  }

  .isela-reel {
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   C12  PRODUKTDETAILS-AKKORDEON
   Ersetzt die 1732 px hohe Textkachel isela-product-faq-table auf der PDP.
   Die Zeilen sind natives <details>. Der Pfeil dreht ueber :open, das
   Aufklappen macht der Browser. Deshalb funktioniert die Section ohne JS und
   ohne verborgenen Startzustand.
   ========================================================================== */

.isela-acc__inner {
  max-width: 78rem;
  margin-inline: auto;
}

.isela-acc__heading {
  margin: 0 0 var(--isela-space-m);
  font-size: var(--isela-title-m);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.isela-acc__list {
  border-top: 1px solid rgba(var(--color-foreground), 0.14);
}

.isela-acc__row {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
}

.isela-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2rem 0.2rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  list-style: none;
}

/* Safari zeigt sonst zusaetzlich das eigene Dreieck neben unserem Pfeil. */
.isela-acc__summary::-webkit-details-marker {
  display: none;
}

.isela-acc__summary:hover {
  color: rgb(var(--color-foreground));
}

.isela-acc__summary:focus-visible {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.4rem;
}

.isela-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
}

/* Plus aus zwei Strichen: der senkrechte verschwindet beim Oeffnen. */
.isela-acc__icon::before,
.isela-acc__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 260ms var(--isela-ease), opacity 200ms var(--isela-ease);
}

.isela-acc__icon::after {
  transform: rotate(90deg);
}

.isela-acc__row[open] .isela-acc__icon::after {
  transform: rotate(0deg);
  opacity: 0;
}

.isela-acc__body {
  padding: 0 0.2rem 2.4rem;
  max-width: 62ch;
  font-size: 1.5rem;
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.78);
}

.isela-acc__body > :first-child { margin-top: 0; }
.isela-acc__body > :last-child { margin-bottom: 0; }

.isela-acc__body a {
  color: inherit;
  text-underline-offset: 0.3em;
}

@media screen and (min-width: 750px) {
  .isela-acc__summary { padding: 2.4rem 0.2rem; font-size: 1.7rem; }
  .isela-acc__body { padding-bottom: 3rem; font-size: 1.6rem; }
}

/* ==========================================================================
   C13  CART DRAWER V2
   Dawn liefert Struktur und Verhalten, hier kommt nur die Anmutung dazu.
   Kein eigenes JS, kein Eingriff in das Oeffnen/Schliessen.

   backdrop-filter steht bewusst NUR am Overlay. Das Overlay ist ein
   Geschwister des Drawers, kein Vorfahre – sonst wuerde es fuer alles darin
   einen neuen Containing Block bilden und position:fixed brechen.
   ========================================================================== */

#CartDrawer-Overlay {
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cart-drawer .drawer__inner {
  padding: 0;
  box-shadow: -2.4rem 0 6rem rgba(0, 0, 0, 0.16);
}

.cart-drawer .drawer__header {
  padding: 2.4rem var(--isela-space-s) 1.6rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
}

.cart-drawer .drawer__heading {
  margin: 0;
  font-size: var(--isela-title-s);
  letter-spacing: -0.01em;
}

.cart-drawer .drawer__contents,
.cart-drawer .cart-drawer__form {
  padding-inline: var(--isela-space-s);
}

/* Zeile pro Artikel: Bild im Modeformat 3:4, Text linksbuendig daneben. */
.cart-drawer .cart-item {
  padding-block: 2rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  gap: 1.6rem;
}

.cart-drawer .cart-items thead,
.cart-drawer .cart-items .cart-item:last-child {
  border-bottom: 0;
}

.cart-drawer .cart-item__image {
  width: 9rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.2rem;
}

.cart-drawer .cart-item__name {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.cart-drawer .product-option {
  font-size: 1.35rem;
  color: rgba(var(--color-foreground), 0.72);
}

.cart-drawer .cart-item__totals .price {
  font-size: 1.5rem;
  font-weight: 500;
}

/* Der Footer traegt Versandbalken, Summe und CTA. Er bleibt beim Scrollen
   sichtbar, damit die Summe nie aus dem Bild rutscht. */
.cart-drawer .drawer__footer {
  padding: var(--isela-space-s);
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
  background: rgb(var(--color-background));
}

.cart-drawer .totals {
  align-items: baseline;
  margin-bottom: 0.6rem;
}

.cart-drawer .totals__subtotal {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-drawer .totals__subtotal-value {
  font-size: var(--isela-title-s);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cart-drawer .tax-note {
  font-size: 1.3rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.72);
}

.cart-drawer .cart__ctas .cart__checkout-button {
  min-height: 5.4rem;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

/* Der Versandbalken sitzt ueber der Summe und braucht dort etwas Luft. */
.cart-drawer .isela-ship {
  margin-bottom: 1.6rem;
}

.cart-drawer .drawer__inner-empty {
  padding: var(--isela-space-l) var(--isela-space-s);
}

@media screen and (min-width: 750px) {
  .cart-drawer .drawer__inner {
    max-width: 46rem;
  }
}

/* ==========================================================================
   C14  COLLECTION: FILTERLEISTE BLEIBT ERREICHBAR
   Auf dem Handy scrollt die Filterzeile sonst nach zwei Reihen weg und der
   Nutzer muss zum Aendern ganz nach oben zurueck.
   position:sticky funktioniert hier, weil <main> overflow-x:clip nutzt und
   damit keinen Scroll-Container bildet.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .facets-container {
    position: sticky;
    top: 0;
    z-index: 3;
    padding-block: 0.8rem;
    background: rgb(var(--color-background));
    box-shadow: 0 1px 0 rgba(var(--color-foreground), 0.1);
  }
}

/* ==========================================================================
   C15  HEADER: ZUSTAND BEIM SCROLLEN
   Die Klasse isela-scrolled setzt das Skript auf <html>. Ohne JS bleibt der
   Header schlicht in seinem Ruhezustand – er wird nie unsichtbar.

   Bewusst KEIN backdrop-filter am Header: er ist der positionierte Vorfahre
   von Suchdialog und Mobilmenue. Ein Filter dort wuerde einen neuen
   Containing Block bilden – genau die Falle, die weiter unten schon einmal
   position:sticky zerlegt hat.
   ========================================================================== */

.section-header {
  transition: box-shadow 320ms var(--isela-ease), background-color 320ms var(--isela-ease);
}

.isela-scrolled .section-header {
  box-shadow: 0 1px 0 rgba(var(--color-foreground), 0.1), 0 1.2rem 3.2rem rgba(0, 0, 0, 0.05);
}

/* Im Ruhezustand darf der Header luftig sein, beim Scrollen wird er kompakt,
   damit oberhalb der Ware moeglichst wenig Flaeche verloren geht. */
.header {
  transition: padding-block 320ms var(--isela-ease);
}

@media screen and (min-width: 990px) {
  .isela-scrolled .header {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .isela-scrolled .header__heading-logo {
    max-height: 3.4rem;
    transition: max-height 320ms var(--isela-ease);
  }
}

/* Menuepunkte: der Unterstrich waechst aus der Mitte statt hart zu erscheinen. */
.header__menu-item span {
  position: relative;
}

.header__menu-item span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 300ms var(--isela-ease);
}

.header__menu-item:hover span::after,
.header__menu-item[aria-expanded='true'] span::after {
  transform: scaleX(1);
}

/* Dawns eigener Unterstrich wuerde sich damit ueberlagern. */
.header__menu-item:hover span {
  text-decoration: none;
}

/* Warenkorb: kurze Ruecksprungbewegung, sobald sich die Anzahl aendert.
   Rein dekorativ, ohne Einfluss auf Fokus oder Bedienbarkeit. */
.cart-count-bubble {
  animation: isela-pop 420ms var(--isela-ease);
}

@keyframes isela-pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   C16  RAEUMLICHE TIEFE
   Tiefe entsteht ueber Perspektive, Schichtung und Schatten – nicht ueber
   erfundene 3D-Modelle. Es gibt zu diesem Katalog keine Model-3D-Medien,
   also wird auch keines vorgetaeuscht.

   perspective steht nur an Kartenhuellen. Diese enthalten nichts
   position:fixed, deshalb kann der neue Containing Block nichts brechen.
   ========================================================================== */

.isela-depth {
  perspective: 1200px;
}

.isela-depth > * {
  transform-style: preserve-3d;
  transition: transform 520ms var(--isela-ease), box-shadow 520ms var(--isela-ease);
}

@media (hover: hover) and (pointer: fine) {
  .card-wrapper {
    perspective: 1400px;
  }

  .card-wrapper .card__media {
    transition: transform 640ms var(--isela-ease), box-shadow 640ms var(--isela-ease);
  }

  /* Minimale Neigung plus Anheben. Mehr wirkt bei Modefotos wie ein Spielzeug. */
  .card-wrapper:hover .card__media {
    transform: translate3d(0, -0.6rem, 0) rotateX(1.4deg);
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.14);
  }

  .isela-stl__card {
    transition: transform 420ms var(--isela-ease);
  }

  .isela-stl__card:hover {
    transform: translate3d(0, -0.3rem, 0);
  }
}

/* Geschichtete Bildkanten: heller Rand oben, tiefer Schatten unten. Das ist
   der Effekt, der Flaechen von Objekten unterscheidet. */
.isela-stl__stage,
.isela-story__media {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3.2rem 6.4rem rgba(0, 0, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .isela-depth > *,
  .card-wrapper .card__media,
  .isela-stl__card,
  .cart-count-bubble,
  .header__menu-item span::after {
    transition: none;
    animation: none;
  }

  .card-wrapper:hover .card__media,
  .isela-stl__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   C17  MOBILE-LUECKEN GESCHLOSSEN
   Zwei Stellen hatten bisher nur Desktop-Regeln.
   ========================================================================== */

/* --- Breadcrumbs: bisher voellig ungestylt. Auf 375 px umbricht ein langer
   Pfad sonst auf drei Zeilen und schiebt die Ware nach unten. Deshalb eine
   Zeile mit seitlichem Schubsen statt Umbruch. --- */

.isela-breadcrumbs {
  padding-block: 1.2rem 0.4rem;
}

.isela-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.35rem;
  color: rgba(var(--color-foreground), 0.72);
}

.isela-breadcrumbs__list a {
  color: inherit;
  text-decoration: none;
}

.isela-breadcrumbs__list a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.isela-breadcrumbs__list li + li::before {
  content: '/';
  margin-right: 0.6rem;
  opacity: 0.45;
}

/* Das aktuelle, letzte Element traegt den Produktnamen und darf kuerzen. */
.isela-breadcrumbs__list li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .isela-breadcrumbs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .isela-breadcrumbs__list::-webkit-scrollbar {
    display: none;
  }

  .isela-breadcrumbs__list li {
    flex: 0 0 auto;
  }
}

/* --- Kategorien: das feste Vierspaltenraster ergibt auf dem Handy Kacheln
   von rund 80 px. Statt sie auf zwei Spalten zu stauchen, wird daraus eine
   waagerechte Schiene mit Einrastpunkten – das gleiche Bildformat bleibt
   erhalten und die naechste Kachel schaut heraus, was zum Wischen einlaedt. --- */

@media screen and (max-width: 989px) {
  .isela-cats__head {
    grid-template-columns: 1fr;
    gap: var(--isela-space-xs);
    align-items: start;
  }
}

@media screen and (max-width: 749px) {
  .isela-cats__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 68vw;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Die Schiene laeuft bis an den Bildschirmrand. Der negative Rand MUSS
       exakt dem Padding von .page-width entsprechen (1.5rem). Vorher stand
       hier --isela-space-s, mindestens 2.4rem - also 0.9rem Ueberstand pro
       Seite und damit waagerechtes Scrollen auf dem ganzen Dokument. */
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .isela-cats__grid::-webkit-scrollbar {
    display: none;
  }

  .isela-cats__grid > * {
    scroll-snap-align: start;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .isela-cats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   C18  ASSET-HINWEIS (nur Theme-Editor)
   Ersetzt die vier frueheren Platzhalterflaechen. Diese Kachel erscheint
   ausschliesslich bei request.design_mode, im Shop nie. Sie ist bewusst
   klein und technisch gehalten – sie ist ein Arbeitshinweis, kein Design.
   ========================================================================== */

.isela-assetnote {
  max-width: 62rem;
  margin: var(--isela-space-s) auto;
  padding: 2rem 2.4rem;
  border: 1px dashed rgba(var(--color-foreground), 0.4);
  border-radius: 0.2rem;
  background: rgba(var(--color-foreground), 0.03);
  color: rgb(var(--color-foreground));
}

.isela-assetnote p {
  margin: 0;
}

.isela-assetnote__tag {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: var(--isela-kicker-track);
  text-transform: uppercase;
  opacity: 0.75;
}

.isela-assetnote p.isela-assetnote__title {
  margin-top: 0.6rem;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.3;
}

.isela-assetnote p.isela-assetnote__spec,
.isela-assetnote p.isela-assetnote__hint {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.6;
  opacity: 0.8;
}

.isela-assetnote__hint {
  font-style: italic;
  opacity: 0.65;
}

/* ==========================================================================
   C19  SHOP THE LOOK – DESKTOP-POPOVER
   Bisher aenderte der interaktive Zustand auf dem Desktop nur die
   Rahmenfarbe der Karte. Jetzt sitzt die Karte tatsaechlich am Punkt.

   Die Koordinaten kommen als --x/--y aus derselben Blockeinstellung wie der
   Punkt, deshalb braucht das JavaScript nichts zu messen. clamp() haelt die
   Karte im Bild, damit ein Punkt am Rand sie nicht heraus schiebt.
   ========================================================================== */

@media screen and (min-width: 750px) {
  /* Sobald die Liste aus dem Fluss genommen wird, bliebe die zweite
     Rasterspalte als leere Haelfte stehen und der Bildkasten waere nur
     1,7/2,6 breit. Die Karte misst ihre Prozentwerte aber am Layoutkasten,
     die Punkte am Bildkasten - das Popover landete weit rechts neben
     seinem Punkt. Einspaltig fallen beide Kaesten zusammen. */
  .isela-stl--interactive .isela-stl__layout {
    position: relative;
    display: block;
  }

  .isela-stl--interactive .isela-stl__list {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    z-index: 4;
  }

  .isela-stl--interactive .isela-stl__stage {
    position: relative;
  }

  .isela-stl--interactive .isela-stl__card {
    position: absolute;
    width: 30rem;
    left: clamp(0rem, calc(var(--x) - 15rem), calc(100% - 30rem));
    top: clamp(0rem, calc(var(--y) + 2.4rem), calc(100% - 18rem));
    pointer-events: auto;
    box-shadow: 0 2.4rem 5.6rem rgba(0, 0, 0, 0.22);
    transform: translateY(-0.8rem);
    transition: opacity 240ms var(--isela-ease), transform 240ms var(--isela-ease);
  }

  /* Das Skript setzt hidden auf allen nicht geoeffneten Karten. Damit sind
     sie zugleich unsichtbar, nicht fokussierbar und fuer Screenreader weg –
     drei Dinge, die sonst einzeln auseinanderlaufen. */
  .isela-stl__card[hidden] {
    display: none;
  }

  .isela-stl--interactive .isela-stl__card.is-open {
    transform: translateY(0);
  }

  .isela-stl--interactive .isela-stl__close {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.8rem;
  }

  .isela-stl--interactive .isela-stl__card:focus-visible {
    outline: 0.2rem solid rgb(var(--color-foreground));
    outline-offset: 0.3rem;
  }
}

@media screen and (max-width: 749px) {
  /* Im Sheet steuert hidden die Sichtbarkeit, nicht mehr display:none ueber
     eine Klasse – sonst blieben geschlossene Karten fokussierbar. */
  .isela-stl--interactive .isela-stl__card {
    display: grid;
  }

  .isela-stl__card[hidden] {
    display: none;
  }
}

/* ==========================================================================
   C20  SECTION-RHYTHMUS
   Vorher liefen zwei Massstaebe nebeneinander: Isela-Sections mit
   --isela-space-l (bis 9 rem oben UND unten, also bis 18 rem Abstand
   zwischen zweien) und Dawn-Sections mit 44-52 px aus den Einstellungen.
   Das ergab auf dem Desktop abwechselnd riesige und knappe Luecken.

   Ab hier gibt es EINEN Wert fuer den vertikalen Sectionabstand. Er ist
   bewusst kleiner als vorher: Weissraum wirkt nur, wenn er gleichmaessig ist.
   ========================================================================== */

:root {
  --isela-section-y: clamp(4rem, 5.5vw, 5.6rem);
}

.isela-cats,
.isela-promise,
.isela-stl,
.isela-story,
.isela-reels,
.isela-acc {
  padding-block: var(--isela-section-y);
}

/* Zwei aufeinanderfolgende Sections addieren sonst ihre Innenabstaende.
   Beruehren sich zwei Flaechen derselben Farbe, reicht ein Abstand. */
.isela-cats + .isela-promise,
.isela-story + .isela-reels,
.isela-stl + .isela-story {
  padding-top: 0;
}

/* Der Abstand zwischen Ueberschrift und Inhalt einer Section ist der zweite
   Taktgeber. Er war je nach Section 24 bis 60 px. */
.isela-stl__head,
/* ==========================================================================
   C21  PRODUKTKARTEN – HIERARCHIE UND GLEICHE HOEHEN
   Die Karte hatte bisher Titel und Preis in derselben Groesse und demselben
   Gewicht. Das liest sich wie eine Tabelle, nicht wie eine Modekarte.

   Neue Rangfolge: Bild, dann Name (ruhig), dann Preis (bestimmt), dann
   Farben, dann erst der Handlungsknopf.
   ========================================================================== */

/* Gleiche Kartenhoehen im Raster: die Karte fuellt ihre Zelle, der untere
   Teil wird nach unten geschoben. Sonst tanzen die Knoepfe je nach
   Titellaenge auf drei verschiedenen Hoehen. */
.grid__item .card-wrapper,
.grid__item .card,
.grid__item .card__content {
  height: 100%;
}

.grid__item .card__content {
  display: flex;
  flex-direction: column;
}

.card-information {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.2rem;
  padding-top: 1.2rem;
}

.card__heading {
  font-size: var(--isela-title-s);
line-height: 1.35;
/* Umbruch nach Sinn statt nach Rand: verhindert die einsame Silbe
     in der zweiten Zeile. Browser ohne Unterstuetzung brechen normal um. */
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.card__heading a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}

.card-information > .price {
  font-size: var(--isela-title-s);
letter-spacing: -0.005em;
  margin-top: 0.5rem;
}

/* Farben stehen zwischen Preis und Knopf und sind der letzte ruhige Block. */
.card-information .isela-swatches {
  margin-top: 0.8rem;
}

/* Alles, was danach kommt, wird an den unteren Rand gedrueckt. Damit enden
   alle Karten einer Reihe auf derselben Linie. */
.card-information > :last-child {
  margin-bottom: 0;
}

.grid__item .quick-add {
  margin-top: auto;
  padding-top: 1rem;
}

/* Der Standard-Shopify-Knopf ist auf einer Modekarte zu laut. Er wird zur
   ruhigen Flaeche und tritt erst beim Zeigen hervor. */
.grid__item .quick-add__submit {
  --isela-qa-line: rgba(var(--color-foreground), 0.28);
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--isela-qa-line);
  color: rgb(var(--color-foreground));
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 260ms var(--isela-ease), border-color 260ms var(--isela-ease),
    color 260ms var(--isela-ease);
}

@media (hover: hover) and (pointer: fine) {
  .grid__item .quick-add__submit:hover {
    background: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
}

.grid__item .quick-add__submit:focus-visible {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}

/* ==========================================================================
   C22  FOOTER – VIER LINKSPALTEN NEBEN DER MARKE
   Dawn kennt nur Rasterstufen und wuerde den fuenften Block allein
   umbrechen lassen. Die Blockzahl steht jetzt als Klasse am Raster, damit
   die Markenspalte breiter bleibt als die vier Linkspalten.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .isela-footer-grid--5 {
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    column-gap: var(--isela-gap-l);
  }

  .isela-footer-grid--4 {
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    column-gap: var(--isela-gap-l);
  }
}

/* Vier schmale Spalten vertragen keine Zeilenumbrueche mitten im Linktext. */
@media screen and (min-width: 990px) {
  .isela-footer-grid .footer-block--menu a {
    display: inline-block;
    padding-block: 0.3rem;
    line-height: 1.4;
  }
}

/* Auf dem Tablet stehen die vier Linkspalten zu zweit, die Marke ueber
   voller Breite - sonst wird jede Spalte schmaler als ihre laengste Zeile. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .isela-footer-grid--5,
  .isela-footer-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .isela-footer-grid .footer-block:first-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   C23  FOOTER MOBIL – KOMPAKTER
   Der Footer war auf dem Handy die laengste Flaeche der Seite. Die
   Klappspalten liegen jetzt dichter beieinander, und die Zeilen zwischen
   Zahlungsarten, Sprachwahl und Rechtszeile bekommen weniger Luft.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .isela-footer-collapsible .footer-block__heading {
    padding-block: 1.4rem;
    margin: 0;
    font-size: 1.5rem;
  }

  .isela-footer-grid .footer-block {
    margin: 0;
  }

  .footer__content-bottom {
    padding-block: 1.6rem;
  }

  .footer__column--info {
    padding-block: 0.4rem;
    gap: 0.8rem;
  }

  .footer__payment {
    margin-block: 0.8rem;
  }

  .footer__content-bottom-wrapper {
    row-gap: 1rem;
  }

  /* Die Markenspalte steht oben und braucht keinen eigenen Klappmechanismus,
     aber auch keinen Abstand wie eine Section. */
  .isela-footer-grid .footer-block:first-child {
    margin-bottom: 1.2rem;
  }
}

/* ==========================================================================
   C24  VIDEO
   Der Rahmen traegt das Seitenverhaeltnis. Damit steht die Flaeche fest,
   bevor irgendetwas geladen ist – kein Nachrutschen des Layouts.

   Reihenfolge bewusst umgekehrt zum Naheliegenden: das POSTER liegt oben
   und blendet weg, sobald das Video laeuft. Andersherum muesste das Video
   im Ruhezustand opacity:0 tragen – ein Pflichtzustand, der ohne JS nie
   aufgehoben wuerde. So ist der Ruhezustand voll sichtbar und nur der
   Uebergang optional.
   ========================================================================== */

.isela-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--isela-video-ratio, 9 / 16);
  background: rgba(var(--color-foreground), 0.06);
}

.isela-video__poster,
.isela-video__el,
.isela-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.isela-video__el,
.isela-video video {
  z-index: 1;
  border: 0;
}

.isela-video__poster {
  z-index: 2;
  transition: opacity 520ms var(--isela-ease);
}

.isela-video.is-playing .isela-video__poster {
  opacity: 0;
}

/* Shopifys video_tag verpackt das Video in einen eigenen Wrapper. */
.isela-video .video-wrapper,
.isela-video deferred-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .isela-video__poster {
    transition: none;
  }

  /* Bei reduzierter Bewegung startet das Skript gar nicht erst. Falls doch
     ein Browser eigenmaechtig abspielt, bleibt hier das Poster stehen. */
  .isela-video.is-playing .isela-video__poster {
    opacity: 1;
  }
}

/* --- Hero: das Video liegt im vorhandenen Medienrahmen -------------------
   HIER STAND ".isela-hero__media { position: relative }". Weiter oben ist
   dieselbe Klasse bereits "position: absolute; inset: 0". Gleiche
   Spezifitaet, spaeter im Lauf - also gewann relative. Der Medienkasten
   verlor damit inset:0, wurde zum normalen Flusskind des Flex-Containers
   (align-items: flex-end) und schrumpfte auf Inhaltshoehe am unteren Rand.
   Genau das war die grosse dunkle Flaeche mit dem Bildstreifen unten.
   Die Regel entfaellt: absolute positioniert bildet ohnehin schon den
   Bezugsrahmen fuer das Video. */

.isela-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--isela-hero-focus, center 25%);
  display: block;
}

@media screen and (max-width: 749px) {
  .isela-hero__video {
    object-position: var(--isela-hero-focus-mobile, center 30%);
  }
}

/* Der Medienkasten braucht einen EIGENEN Stapelkontext.

   Ohne ihn stand er auf z-index:auto und bildete keinen. Dadurch trat das
   Bild darin (z-index 2, gleich unten) gegen .isela-hero__content (z-index 1)
   an und gewann - das Bild lag also UEBER der Ueberschrift.

   Aufgefallen ist das erst in Phase E1: auf dem Desktop lief das Video, das
   Standbild stand dabei auf opacity:0 und der Text schien durch. Sobald das
   Standbild sichtbar war, also auf dem Handy, verschwand die gesamte
   Hero-Typografie. Am gerenderten Frontend mit elementFromPoint nachgewiesen:
   an der Titelposition lag zuerst "img" obenauf, nach dem Fix der Titel. */
/* Das Hero-Standbild bleibt liegen und weicht erst, wenn das Video laeuft.
   Der Scrim liegt darueber, damit die Schrift in beiden Zustaenden traegt. */
.isela-hero__media img,
.isela-hero__media picture {
  position: relative;
  z-index: 2;
  transition: opacity 620ms var(--isela-ease);
}

.isela-hero__media.is-playing img,
.isela-hero__media.is-playing picture {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .isela-hero__media.is-playing img,
  .isela-hero__media.is-playing picture {
    opacity: 1;
  }
}

/* --- Story: optionaler Bewegtbild-Einschub ------------------------------- */
.isela-story__motion {
  margin-top: var(--isela-space-xs);
}

@media screen and (min-width: 990px) {
  /* Der Clip ist hochkant und sitzt als schmaler Streifen neben dem
     Hauptbild – dieselbe Rolle wie das Detailbild, nur bewegt. */
  .isela-story__motion {
    position: absolute;
    right: -2%;
    bottom: -4%;
    width: 34%;
    margin-top: 0;
    box-shadow: 0 2.4rem 5.6rem rgba(0, 0, 0, 0.2);
  }

  .isela-story--split .isela-story__media {
    position: relative;
  }
}

/* --- PDP: Bewegtbild unter der Galerie ----------------------------------- */
.isela-pdpvideo {
  padding-block: var(--isela-section-y);
}

.isela-pdpvideo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--isela-gap-l);
  align-items: center;
}

.isela-pdpvideo__frame {
  max-width: 42rem;
  width: 100%;
}

.isela-pdpvideo__copy > :first-child {
  margin-top: 0;
}

@media screen and (min-width: 750px) {
  .isela-pdpvideo__grid {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }
}

/* ==========================================================================
   D1  VIDEO IN VORGEFORMTEN RAHMEN
   Reel-Karte und PDP-Rahmen geben das Seitenverhaeltnis bereits vor. Wenn
   .isela-video dann NOCH einmal ein eigenes aspect-ratio aufmacht, koennen
   sich die beiden Hoehen um Rundungen unterscheiden - sichtbar als grauer
   Streifen. Im vorgeformten Rahmen fuellt das Video den Elternteil einfach.
   ========================================================================== */

.isela-reel__media .isela-video,
.isela-pdpvideo__frame .isela-video {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.isela-pdpvideo__frame {
  position: relative;
  aspect-ratio: 9 / 16;
}

/* Der Rahmen selbst traegt die Hintergrundfarbe. Solange das Poster laedt,
   ist das eine ruhige Flaeche statt eines weissen Lochs. */
.isela-reel__media,
.isela-pdpvideo__frame {
  background: rgba(var(--color-foreground), 0.06);
}

/* ==========================================================================
   D2  EDITORIAL STORY – BEWEGTBILD ALS AKZENT, NICHT ALS ZWEITES HERO
   Der Einschub lief auf dem Handy in voller Breite mit 9:16, also rund
   690 px Hoehe unter einem ohnehin schon 490 px hohen Bild. Er ist ein
   Akzent und bekommt jetzt dieselbe Rolle wie das Detailbild.
   ========================================================================== */

@media screen and (max-width: 989px) {
  .isela-story__motion {
    width: 42%;
    max-width: 22rem;
    margin-top: -12%;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    z-index: 2;
    border: 0.5rem solid rgb(var(--color-background));
    box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.16);
  }
}

/* ==========================================================================
   D3  KATEGORIEN – RASTER FOLGT DER ANZAHL
   Vier feste Spalten erzeugen bei drei gepflegten Kacheln einen leeren
   Slot. Mit auto-fit entstehen nur so viele Spalten, wie Kacheln da sind.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .isela-cats__grid {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  }
}

/* ==========================================================================
   D4  WAAGERECHTER UEBERSTAND – RIEGEL
   Einzeln behoben ist besser als pauschal abgeschnitten, deshalb steht
   dieser Riegel ganz am Ende und faengt nur noch Reste ab.

   overflow-x: clip statt hidden: clip bildet KEINEN Scroll-Container und
   laesst damit position:sticky im Header und in der Filterleiste intakt.
   Genau daran ist das schon einmal gescheitert.
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Medien duerfen nie breiter werden als ihre Spalte. */
img,
video,
iframe {
  max-width: 100%;
}

/* ==========================================================================
   D5  PRODUKTKARTEN – TOUCH UND VOLLSTAENDIGKEIT
   ========================================================================== */

/* Eine Karte darf nie angeschnitten enden: das Raster bekommt unten Luft,
   und die Karte selbst schneidet nichts ab. */
.grid__item .card-wrapper {
  overflow: visible;
}

@media screen and (max-width: 749px) {
  /* Fingerkuppe braucht 44 px. Titel und Preis sind Links im Fluss, der
     Handlungsknopf ist die eigentliche Trefferflaeche. */
  .grid__item .quick-add__submit {
    min-height: 4.4rem;
  }

  .card__heading a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-block: 0.2rem;
  }

  .isela-swatch {
    min-width: 2.4rem;
    min-height: 2.4rem;
  }
}

/* ==========================================================================
   D6  HERO MOBIL – LESBARKEIT
   In der Vorschau auf 360 px nachgemessen: die Ueberschrift lag mitten auf
   den blauen Leggings, und der zweite Knopf war heller Umriss auf hellem
   Grund - praktisch unsichtbar.

   Der Verlauf traegt jetzt bis rund 58 % Hoehe. Oben kommt eine leichte
   Abdunklung dazu, damit der Kopfbereich nicht ins Bild ausfranst.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .isela-hero__scrim {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0) 78%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 30%);
  }

  /* Der zweite Knopf steht auf dem Bild, nicht auf der Seitenfarbe. Er
     braucht deshalb einen eigenen hellen Umriss statt des Schemakontrasts. */
  .isela-hero__actions .button--secondary {
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   D7  GLEICHE KARTENHOEHEN – DIE EIGENTLICHE URSACHE
   In der Vorschau nachgemessen: die Karten einer Reihe waren 597, 619, 619
   und 617 px hoch. Grund ist nicht die Karte selbst, sondern ihr Elternteil:
   Dawns .grid ist ein Flex-Container, und .grid__item steht auf
   display:list-item. Ein list-item streckt sich nicht auf die Reihenhoehe,
   also lief das "height: 100%" der Karte gegen eine automatische Hoehe und
   blieb wirkungslos.

   Mit display:flex am Element streckt es wie vorgesehen, die Karte fuellt es
   aus. Nachgemessen: Spanne 22 px -> 0 px.

   NACHTRAG AUS DER SICHTPRUEFUNG IN DER VORSCHAU: die Regel stand zuerst auf
   .grid__item ohne Eingrenzung. Dawn benutzt dieselbe Klasse aber auch fuer
   das FAQ (collapsible-content). Dort wurde der Wrapper dadurch zum
   Flex-Container, das <details> schrumpfte auf Inhaltsbreite und die Fragen
   brachen auf ein Wort pro Zeile um. Gemessen bei 390 px: <summary> nur
   101 px statt 360 px, Titel 41 px breit und 126 px hoch statt 200x22.

   Deshalb jetzt an .product-grid gebunden. Beide Produktraster tragen diese
   Klasse, das FAQ nicht. Nachgemessen: FAQ wieder 360/200x22, Kartenspanne
   weiterhin 0 px.
   ========================================================================== */

.product-grid > .grid__item {
  display: flex;
}

.product-grid > .grid__item > .card-wrapper {
  flex: 1 1 auto;
}

/* ==========================================================================
   E1  HEADER, ANNOUNCEMENT BAR UND HERO – PREMIUM-PASS

   Alle Werte am gerenderten Frontend bei 1440 px nachgemessen, nicht
   geschaetzt. Ausgangslage:
     Wortmarke        14 px, Gewicht 400, 75 px breit
     Header           56 px hoch, 6 px Innenabstand oben und unten
     Announcement     38 px hoch, 14,3 px Text, 1 px Laufweite
     Hero-Textblock   620 px breit (Ziel 500-560)
     Hero-Schrift     weiss auf hellem Sand - praktisch unlesbar
   ========================================================================== */

/* --------------------------------------------------------------------------
   E1.1  ANNOUNCEMENT BAR
   Keine Werbeleiste, sondern eine ruhige Zeile. Kleiner Schriftgrad, weite
   Laufweite, echte vertikale Mitte statt zufaelliger Zeilenhoehe.
   -------------------------------------------------------------------------- */

.announcement-bar__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4rem;
  padding-block: 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.11em;
}

.announcement-bar__link:hover .announcement-bar__message {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   E1.2  HEADER – PROPORTIONEN UND WORTMARKE
   Die Wortmarke stand auf 14 px und ging neben sechs Menuepunkten unter.
   Als Versalsatz mit weiter Laufweite bekommt sie die Praesenz, die eine
   Modemarke an dieser Stelle braucht - ohne ein Logo-Asset zu erfinden.
   -------------------------------------------------------------------------- */

.header__heading-link {
  padding-block: 0.4rem;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.1;
  transition: font-size 320ms var(--isela-ease);
}

/* Der Balken bekommt Luft. 6 px oben und unten wirkten gedraengt. */
.header {
  padding-block: 1.6rem;
}

/* Sehr feine Trennlinie statt Rahmen oder Schatten im Ruhezustand. */
.section-header::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu--inline {
    column-gap: 0.4rem;
  }

  .header__menu-item {
    padding-inline: 1.3rem;
    font-size: 1.35rem;
    letter-spacing: 0.1em;
  }

  /* Kompaktzustand beim Scrollen: nur Hoehe und Wortmarke, keine Sprünge. */
  .isela-scrolled .header {
    padding-block: 0.9rem;
  }

  .isela-scrolled .header__heading-link {
    font-size: 1.75rem;
  }
}

/* --- Mobil: Zielhoehe 56-66 px, gleiche optische Gewichte ---------------- */
@media screen and (max-width: 989px) {
  .header {
    padding-block: 1.1rem;
  }

  .header__heading-link {
    font-size: 1.7rem;
    letter-spacing: 0.18em;
  }

  /* Beide Aussenseiten gleich schwer, damit die Wortmarke wirklich mittig
     sitzt und die Icons nicht gequetscht wirken. */
  .header__icons .header__icon,
  .header__icons .modal__toggle {
    width: 4.4rem;
    height: 4.4rem;
  }
}

/* ==========================================================================
   E1.3  HERO – HELLE EDITORIAL-DIREKTION
   Das vorhandene Motiv ist hell und sandfarben. Weisse Schrift darauf lag
   bei rund 1,6:1 - unlesbar. Statt das Bild abzudunkeln bekommt die linke
   Seite einen hellen Wash und die Schrift wird zu Tinte.
   Gemessen: Ueberschrift 15,1:1, Fliesstext 7,7:1, Knopf 10,1:1.
   ========================================================================== */

.isela-hero--tone-light .isela-hero__scrim {
  background:
    linear-gradient(96deg, rgba(250, 246, 242, 0.9) 0%, rgba(250, 246, 242, 0.74) 26%, rgba(250, 246, 242, 0.3) 46%, rgba(250, 246, 242, 0) 62%),
    linear-gradient(0deg, rgba(250, 246, 242, 0.35) 0%, rgba(250, 246, 242, 0) 26%);
}

.isela-hero--tone-light .isela-hero__content {
  color: #221c19;
}

.isela-hero--tone-light .isela-hero__text {
  color: rgba(34, 28, 25, 0.78);
}

/* --- Typografie ---------------------------------------------------------- */

.isela-hero .isela-kicker {
  margin-bottom: 1.8rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  opacity: 0.72;
}

/* --- Knoepfe: nur im Hero, Produktkarten bleiben unangetastet ------------- */

.isela-hero__actions .button {
  min-height: 5.2rem;
  padding-inline: 2.8rem;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  box-shadow: none;
  transition:
    background-color 200ms var(--isela-ease),
    border-color 200ms var(--isela-ease),
    color 200ms var(--isela-ease),
    transform 200ms var(--isela-ease);
}

.isela-hero--tone-light .isela-hero__actions .button {
  background: #dcc3bd;
  border: 1px solid #dcc3bd;
  color: #221c19;
}

.isela-hero--tone-light .isela-hero__actions .button--secondary {
  background: transparent;
  border-color: rgba(34, 28, 25, 0.42);
  color: #221c19;
}

@media (hover: hover) and (pointer: fine) {
  .isela-hero--tone-light .isela-hero__actions .button:hover {
    background: #cdb0a9;
    border-color: #cdb0a9;
    transform: translateY(-1px);
  }

  .isela-hero--tone-light .isela-hero__actions .button--secondary:hover {
    background: rgba(34, 28, 25, 0.06);
    border-color: rgba(34, 28, 25, 0.7);
  }
}

.isela-hero__actions .button:focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.3rem;
}

/* ==========================================================================
   E1.4  HERO MOBIL
   Nicht der verkleinerte Desktop: eigener Ausschnitt, eigene Schriftgroesse,
   Knoepfe in Daumenreichweite.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .isela-hero--screen {
    min-height: min(84svh, 68rem);
  }

  .isela-hero__inner {
    max-width: none;
  }

  .isela-hero__title {
    font-size: clamp(3.8rem, 11vw, 5.8rem);
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .isela-hero .isela-kicker {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
  }

  .isela-hero__text {
    font-size: 1.55rem;
    line-height: 1.55;
  }

  .isela-hero__actions {
    margin-top: 2.4rem;
    gap: 0.9rem;
  }

  .isela-hero__actions .button {
    min-height: 4.8rem;
    font-size: 1.2rem;
  }

  /* Der helle Wash laeuft mobil von unten, weil der Text dort sitzt. */
  .isela-hero--tone-light .isela-hero__scrim {
    background:
      linear-gradient(0deg, rgba(250, 246, 242, 0.94) 0%, rgba(250, 246, 242, 0.8) 30%, rgba(250, 246, 242, 0.28) 56%, rgba(250, 246, 242, 0) 76%),
      linear-gradient(180deg, rgba(250, 246, 242, 0.3) 0%, rgba(250, 246, 242, 0) 22%);
  }
}

/* ==========================================================================
   E1.5  REDUZIERTE BEWEGUNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .header,
  .header__heading-link,
  .isela-hero__actions .button {
    transition: none;
  }

  .isela-hero__actions .button:hover {
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   E1.2b  ENGSTELLE ZWISCHEN 990 UND 1200 px
   Bei 1024 px teilte sich der Kopf in 626 / 34 / 302. Die Wortmarke bekam
   also 34 px und brach auf ein Zeichen pro Zeile um - der Header wurde
   169 px hoch. Ursache: die groessere Wortmarke UND die weitere Navigation
   aus E1.2 passen dort zusammen nicht mehr in eine Zeile, und meine neue
   Regel hatte die bestehende Verdichtung ueberschrieben.

   Zwei Massnahmen: die Wortmarke bricht nie um, und zwischen 990 und 1200 px
   ruecken Navigation und Wortmarke wieder zusammen.
   -------------------------------------------------------------------------- */

.header__heading-link {
  white-space: nowrap;
}

@media screen and (min-width: 990px) and (max-width: 1200px) {
  .header__menu-item {
    padding-inline: 0.7rem;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
  }

  .header__heading-link {
    font-size: 1.6rem;
    letter-spacing: 0.14em;
  }

  .isela-scrolled .header__heading-link {
    font-size: 1.45rem;
  }
}

/* ==========================================================================
   E2  HOMEPAGE UNTERHALB DES HERO – EDITORIALES SYSTEM

   Ausgangsmessung am gerenderten Shop (1440 / 390):
     Trust-Strip      243 / 297 px   (Ziel 90-120 / 80-130)
     Shop the Look   1945 px, Buehne 1378x1723 - erschlaegt die Seite
     Picks           806 px  \  strukturell identisch, dadurch
     Seamless Edit   806 px  /  zwei gleiche Raster hintereinander
     Alle H2          44 / 28 px - keine Hierarchie
     Kicker           11,5 / 12 / 10 px - drei verschiedene Groessen
     Why ISELA        477 / 592 px

   Leitgedanke: der Rhythmus entsteht aus WECHSELNDER Dichte, nicht aus
   gleichmaessigen Abstaenden. Kompakt, weit, bildstark, kompakt, editorial.
   ========================================================================== */

:root {
  /* Drei Sectiondichten statt einer. Die Homepage wechselt bewusst. */
  --isela-sec-tight: clamp(3.2rem, 4vw, 4.8rem);
  --isela-sec: clamp(5.6rem, 7vw, 9rem);
  --isela-sec-wide: clamp(7.2rem, 9vw, 12rem);

  /* Eine Kickergroesse fuer die ganze Seite. */
  --isela-eyebrow: 1.15rem;
  --isela-eyebrow-track: 0.18em;
}

/* --------------------------------------------------------------------------
   E2.1  TYPOGRAFISCHE HIERARCHIE
   Vorher trugen Hero, Kategorien, Story, Reels und Why alle dieselbe
   Ueberschriftgroesse. Jetzt drei Stufen nach Gewicht der Section.
   -------------------------------------------------------------------------- */

.isela-kicker {
  font-size: var(--isela-eyebrow);
  letter-spacing: var(--isela-eyebrow-track);
}

/* Stufe 1: die grossen Bildmomente - Kategorien, Shop the Look, Story. */
.isela-cats .isela-heading,
.isela-stl .isela-heading,
.isela-story__heading {
  font-size: clamp(3.2rem, 3.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}

/* Stufe 2: Produktstrecken und Reels. */
.isela-reels .isela-heading,
.featured-collection .title,
[id$='__seamless'] .title {
  font-size: clamp(2.8rem, 2.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Stufe 3: informative Bloecke bleiben bewusst zurueckhaltend. */
.isela-promise .isela-heading {
  font-size: clamp(2.4rem, 2.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   E2.2  TRUST-STRIP
   Von 243 px auf eine ruhige Zeile. Kein Kasten, kein Rahmen um die Punkte,
   nur eine feine Linie unten und vier gleich gewichtete Angaben.
   -------------------------------------------------------------------------- */

.isela-usp {
  /* Gemessen: 84 px bei 2.2rem, Zielband 90-120. */
  padding-block: 2.6rem;
}

.isela-usp__list {
  gap: 1.2rem 3.2rem;
}

.isela-usp__item {
  align-items: center;
  gap: 0.9rem;
}

/* Der Kreis war eine 2,8rem-Scheibe mit Rahmen - zu viel Gewicht fuer eine
   Serviceangabe. Jetzt nur noch ein feiner Punkt. */
.isela-usp__mark {
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-width: 1px;
  border-color: rgba(var(--color-foreground), 0.28);
  font-size: 1rem;
}

.isela-usp__item strong {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

.isela-usp__item small {
  margin-top: 0.1rem;
  font-size: 1.2rem;
  opacity: 0.62;
}

@media screen and (max-width: 989px) {
  /* Waagerechte Schiene statt zweispaltigem Block: vier Angaben untereinander
     brauchten 297 px, quer sind es rund 100. */
  .isela-usp {
    padding-block: 1.6rem;
  }

  .isela-usp__list {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(21rem, auto);
    gap: 2.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .isela-usp__list::-webkit-scrollbar {
    display: none;
  }

  .isela-usp__item {
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   E2.3  PRODUKTSTRECKEN – KARTE OHNE KASTEN
   Das Bild soll tragen, nicht der Rahmen darum.
   -------------------------------------------------------------------------- */

.card--standard > .card__content .card__information,
.card--card,
.card-wrapper .card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.card__media,
.card--card .card__inner {
  background: rgba(var(--color-foreground), 0.035);
}

.card__inner {
  border-radius: 0;
}

/* Titel ruhig, Preis bestimmt - nicht beides gleich laut. */
.card__heading {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.card-information > .price {
  font-weight: 500;
}

/* Zweitbild beim Zeigen, wenn eines vorhanden ist. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card__media .media img {
    transition: transform 640ms var(--isela-ease), opacity 320ms var(--isela-ease);
  }

  .card-wrapper:hover .card__media .media img:first-child {
    transform: scale(1.03);
  }
}

/* --------------------------------------------------------------------------
   E2.4  KATEGORIEN – EDITORIALE KOMPOSITION
   Vier gleich grosse Kacheln lasen sich wie eine Kollektionsliste. Auf dem
   Desktop traegt jetzt eine hohe Kachel die Section, drei stuetzen sie.
   Die Bildausschnitte bleiben unveraendert 3:4 bzw. 4:5 - es wird nichts
   zerschnitten, nur anders verteilt.
   -------------------------------------------------------------------------- */

.isela-cats {
  padding-block: var(--isela-sec);
}

@media screen and (min-width: 990px) {
  /* Ein Band, feste Hoehe, bewusst ungleiche Spaltenbreiten.

     Der erste Versuch liess die fuehrende Kachel ueber zwei Zeilen laufen.
     Am gerenderten Shop gemessen wuchs die Section damit von 737 auf 1307 px,
     mit "1fr 1fr" sogar auf 2329 - Rasterhoehe und Kachelhoehe schaukelten
     sich gegenseitig auf.

     Jetzt steht die Bandhoehe fest. Keine Kachel kann die Section mehr
     aufziehen, die Komposition entsteht aus der Breite, und object-fit:cover
     haelt jeden Zuschnitt sauber. */
  .isela-cats__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    grid-auto-rows: clamp(38rem, 33vw, 50rem);
    gap: var(--isela-gap);
  }

  .isela-cats__grid .isela-cat {
    aspect-ratio: auto;
    height: 100%;
  }

  .isela-cats__grid > :first-child .isela-cat__title {
    font-size: var(--isela-title-l);
  }
}

/* Beschriftung ruhiger: kleinere Versalien, weniger Schatten. */
.isela-cat__title {
  font-weight: 500;
  letter-spacing: -0.005em;
}

.isela-cat__meta {
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  opacity: 0.78;
}

.isela-cat::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0) 62%);
}

/* --------------------------------------------------------------------------
   E2.5  SHOP THE LOOK – GEBAENDIGT
   Die Buehne lief ueber die volle Seitenbreite: 1378 px breit, 1723 px hoch,
   die Section damit 1945 px. Ein einzelnes Bild darf die Startseite nicht
   dominieren.

   Loesung ohne Eingriff in die Hotspot-Mathematik: der Kopftext wandert
   links neben die Buehne, die Buehne bekommt eine Maximalbreite. Die
   Prozentkoordinaten der Punkte beziehen sich weiterhin auf
   .isela-stl__layout, das unveraendert einspaltig bleibt.
   -------------------------------------------------------------------------- */

.isela-stl {
  padding-block: var(--isela-sec-wide);
}

@media screen and (min-width: 990px) {
  .isela-stl > .page-width {
    display: grid;
    grid-template-columns: minmax(26rem, 0.62fr) minmax(0, 1fr);
    gap: var(--isela-gap-l);
    align-items: center;
  }

  .isela-stl__head {
    display: block;
    margin-bottom: 0;
    position: sticky;
    top: 12rem;
  }

  .isela-stl__head .isela-copy {
    margin-top: 1.6rem;
  }

  /* Die Buehne bleibt einspaltig, wird aber begrenzt. 4:5 auf 52rem ergibt
     rund 650 px Hoehe statt 1723. */
  .isela-stl__layout {
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* Punkte: klein, hoher Kontrast, ohne Pulsieren. */
.isela-stl__pin-dot {
  width: 1.1rem;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.isela-stl__pin-dot::after {
  animation: none;
}

.isela-stl__pin.is-active .isela-stl__pin-dot {
  transform: scale(1.28);
  background: #fff;
}

/* --------------------------------------------------------------------------
   E2.6  SEAMLESS EDIT – ANDERER RHYTHMUS ALS DIE PICKS
   Beide Strecken waren 806 px hoch mit demselben Vierraster. Diese hier
   wird zur waagerechten Schiene mit grossem Titel daneben.
   Der Zugriff ueber die Section-Kennung ist stabil: Shopify haengt den
   Blocknamen aus index.json an die id.
   -------------------------------------------------------------------------- */

[id$='__seamless'] {
  padding-block: var(--isela-sec-tight);
}

@media screen and (min-width: 990px) {
  [id$='__seamless'] .collection {
    display: grid;
    grid-template-columns: minmax(24rem, 0.5fr) minmax(0, 1fr);
    gap: var(--isela-gap-l);
    align-items: start;
  }

  [id$='__seamless'] .collection > .title-wrapper-with-link {
    display: block;
    margin: 0;
    padding-top: 1rem;
  }

  [id$='__seamless'] .collection__title .title {
    margin-bottom: 1.6rem;
  }

  [id$='__seamless'] .collection > .slider-mobile-gutter,
  [id$='__seamless'] .collection > .grid {
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   E2.7  EDITORIAL STORY
   -------------------------------------------------------------------------- */

.isela-story {
  padding-block: var(--isela-sec-wide);
}

@media screen and (min-width: 990px) {
  .isela-story__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(4rem, 7vw, 9rem);
  }

  .isela-story__copy {
    padding-right: clamp(0rem, 3vw, 4rem);
  }
}

.isela-story__facts dd {
  font-size: var(--isela-title-m);
  font-weight: 500;
}

.isela-story__text {
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   E2.8  REELS
   -------------------------------------------------------------------------- */

.isela-reels {
  padding-block: var(--isela-sec);
}

/* Drei 9:16-Karten ueber die volle Seitenbreite ergaben 456x811 und damit
   eine 1257 px hohe Section - die hoechste der Startseite. Die Schiene
   bekommt eine Obergrenze, das Format bleibt unangetastet. */
@media screen and (min-width: 990px) {
  .isela-reels__rail {
    max-width: 110rem;
    margin-inline: auto;
  }
}

.isela-reel__caption {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.isela-reel__name {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   E2.9  WHY ISELA – NUMMERIERTE BELEGE STATT KACHELN
   Von 477 / 592 px auf eine ruhige Dreierreihe. Die Nummer ersetzt das
   Icon: sie ordnet, ohne Gewicht ins Layout zu bringen.
   -------------------------------------------------------------------------- */

.isela-promise {
  padding-block: var(--isela-sec);
}

.isela-promise__grid {
  counter-reset: isela-proof;
  gap: var(--isela-gap-l);
}

.isela-promise__item {
  counter-increment: isela-proof;
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.16);
}

.isela-promise__item::before {
  content: counter(isela-proof, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0.45;
}

.isela-promise__item .isela-kicker {
  font-size: var(--isela-eyebrow);
  letter-spacing: var(--isela-eyebrow-track);
}

.isela-promise__item h3,
.isela-promise__item strong {
  font-size: var(--isela-title-m);
  font-weight: 500;
  letter-spacing: -0.005em;
}

@media screen and (max-width: 749px) {
  .isela-promise__grid {
    gap: var(--isela-space-xs);
  }

  .isela-promise__item {
    padding-top: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   E2.10  FAQ
   -------------------------------------------------------------------------- */

[id$='__faq'] .accordion summary {
  padding-block: 2rem;
}

[id$='__faq'] .accordion__title {
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

[id$='__faq'] .accordion + .accordion {
  border-top: 0;
}

[id$='__faq'] .accordion {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
}

[id$='__faq'] .accordion .icon-caret {
  transition: transform 260ms var(--isela-ease);
}

[id$='__faq'] details[open] .icon-caret {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   E2.11  NEWSLETTER – DER ABSCHLUSS
   Ruhige, dunkle Schlussflaeche als Uebergang in den Footer statt einer
   weiteren hellen Section.
   -------------------------------------------------------------------------- */

.newsletter-section {
  padding-block: var(--isela-sec);
}

.newsletter__wrapper h2 {
  font-size: clamp(2.6rem, 2.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.newsletter__wrapper .newsletter__subheading {
  max-width: 46ch;
  margin-inline: auto;
  font-size: 1.55rem;
  opacity: 0.8;
}

.newsletter-form__field-wrapper {
  max-width: 46rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   E2.12  BEWEGUNG
   Nur dort, wo sie Politur bringt. Alles haengt am bestehenden Motion-Gate.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card__media .media img,
  .isela-stl__pin-dot,
  [id$='__faq'] .accordion .icon-caret {
    transition: none;
    animation: none;
  }

  .card-wrapper:hover .card__media .media img:first-child {
    transform: none;
  }
}

/* ==========================================================================
   E3  PRODUKTSEITE – PREMIUM-PASS

   Ausgangslage am gerenderten Frontend gemessen, nicht geschaetzt:
     Spalten 1440     845 / 455 px  = 65/35   (Ziel 58-62 / 38-42)
     Bild 1440        584 x 730 px  -> 261 px tote Flaeche neben dem Motiv
     Bild 1024        479 x 598 px  -> 112 px tote Flaeche
     Breakpoint 768   zwei Spalten a 326 px, Kaufbutton 276 px, keine Kaufleiste
     Beschreibung     1022 Zeichen gepflegt, 0 Zeichen sichtbar
   Die tote Flaeche kam von constrain_to_viewport: das Motiv wurde auf
   Viewporthoehe gedeckelt und dadurch schmaler als seine Spalte. Abgeschaltet
   im Template, nicht per CSS ueberschrieben - siehe templates/product.json.
   ========================================================================== */

/* --------------------------------------------------------------------------
   E3.1  SPALTENVERHAELTNIS AB 990 px
   Dawn liefert bei media_size "large" 65/35. Die Infospalte hatte dadurch bei
   1024 px nur 318 px und der Kaufbutton 278 px. 60/40 gibt der Kaufspalte
   Luft, ohne das Motiv kleinzumachen.
   Die Selektoren tragen .product zusaetzlich, weil Dawns Sectionsheet je nach
   Ladereihenfolge nach dieser Datei stehen kann - gleiche Spezifitaet wuerde
   dann verlieren. Kein !important noetig.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .product.product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 60%;
    width: calc(60% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .product.product--large:not(.product--no-media) .product__info-wrapper {
    max-width: 40%;
    width: calc(40% - var(--grid-desktop-horizontal-spacing) / 2);
    padding-left: clamp(3.2rem, 3.2vw, 5.6rem);
  }
}

/* --------------------------------------------------------------------------
   E3.2  EINSPALTIG BIS 989 px
   Dawn schaltet den Zweispalter schon bei 750 px. Ergebnis waren zwei Spalten
   a 326 px: Motiv zu klein zum Beurteilen, Kaufbutton zu schmal. Auf Tablet
   ist untereinander die bessere Loesung - das Motiv bekommt die volle Breite.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product.grid--2-col-tablet > .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .product .product__info-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .product .product__media-wrapper {
    margin-bottom: var(--isela-space-s);
  }

  /* Das Motiv bleibt lesbar, ohne die Seite endlos lang zu machen. */
  .product .product__media-list {
    max-width: 58rem;
    margin-inline: auto;
  }

  /* Der Kaufbutton verschwindet beim Scrollen ersatzlos, solange die
     Infospalte hier nicht sticky ist. Also gilt die Kaufleiste auch hier. */
  .isela-buybar {
    display: flex;
  }

  body.isela-has-buybar .shopify-section-group-footer-group {
    padding-bottom: 7.5rem;
  }
}

/* --------------------------------------------------------------------------
   E3.3  EINLEITUNGSTEXT
   Der erste Absatz der gepflegten Beschreibung, gesetzt zwischen Preis und
   Farbwahl. Die H2 der Beschreibung wird im Snippet entfernt, weil sie den
   Produktnamen wiederholt.
   -------------------------------------------------------------------------- */

.isela-lead {
  max-width: 46ch;
  margin: 0 0 var(--isela-space-xs);
  font-size: 1.55rem;
  line-height: 1.62;
  opacity: 0.8;
}

.isela-lead > :first-child { margin-top: 0; }
.isela-lead > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   E3.4  GALERIE MOBIL
   Das Motiv sass mit 348 von 390 px eingerueckt in der Seitenbreite und wirkte
   dadurch wie ein Katalogbild. Randlos wirkt es wie eine Kampagne. Die
   Thumbnailleiste bleibt eingerueckt und wird schlanker, damit der Produktname
   frueher erscheint - gemessen sass er bei 390 px erst auf 768 px Scrolltiefe.
   Die Randloesung nutzt exakt das Innenmass von .page-width (1,5 rem). Ein
   abweichender Wert hatte in Phase D 9 px Ueberstand erzeugt.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .product__media-wrapper .product__media-list {
    margin-inline: -1.5rem;
    width: calc(100% + 3rem);
  }

  .product__media-wrapper .thumbnail-list__item {
    flex: 0 0 6.4rem;
  }

  .product__media-wrapper .thumbnail-slider {
    margin-top: 1rem;
  }

  /* Ohne Rahmen wirkt der Bildstreifen ruhiger. */
  .product__media-wrapper .product__media {
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   E3.5  KAUFBLOCK
   Der Kaufbutton fuehrt ueber die volle Breite seiner Spalte. Die Menge steht
   unmittelbar davor und bleibt kompakt, damit sie den Blick nicht vom CTA
   wegzieht.
   -------------------------------------------------------------------------- */

.product-form__submit {
  width: 100%;
  min-height: 4.8rem;
}

.product__info-container .product-form__quantity {
  margin-bottom: var(--isela-space-xs);
}

/* --------------------------------------------------------------------------
   E3.6  DETAILS UND VERWANDTE PRODUKTE
   Nur Rhythmus und Schriftgrade, keine neue Struktur.
   -------------------------------------------------------------------------- */

.isela-acc__heading {
  font-size: clamp(2rem, 1.9vw, 2.6rem);
  letter-spacing: -0.012em;
}

[id$='__related'] .title {
  font-size: clamp(2.2rem, 2.1vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

[id$='__related'] .product-grid {
  row-gap: var(--isela-space-s);
}

/* ==========================================================================
   E4  PRODUKTSEITE – MERCHANDISING UND KAUFHIERARCHIE

   E4 aendert nur nachgemessene Schwaechen. Trustleiste (137 px, vier Spalten),
   Detailzeilen (4 x 79 px, 780 px Lesebreite), verwandte Produkte (4 Karten,
   alle 549 px, Ratio 4:5) und die Medienreihenfolge waren in Ordnung und
   bleiben unangetastet.

   Ausgangslage, am Frontend gemessen:
     Abstaende Infospalte  ueberall 15 px - Titel/Preis genauso weit
                           auseinander wie Groessenwahl/Menge, kein Rhythmus
     Preis                 18 px, Gewicht 400, dahinter die Steuerzeile mit
                           voller Deckkraft - der Preis fuehrt nicht
     Kaufbutton            transparent, Text in Rose. Dawn setzt
                           button--secondary, sobald Dynamic Checkout aktiv
                           ist; der 80 px hohe Bezahlblock dominierte damit
                           die wichtigste Handlung der Seite
     Kontrast              Markenrose mit weisser Schrift = 2,16:1 und faellt
                           damit durch. Tinte auf Grund = 11,07:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   E4.1  RHYTHMUS STATT GLEICHMASS
   Dawn setzt .product__info-container > * + * pauschal auf 1,5 rem. Dadurch
   wirkte die Infospalte wie eine Liste gleichwertiger Zeilen. Jetzt bilden
   Titel/Preis/Steuer eine Einheit, danach folgt der Text, und die Auswahl
   beginnt sichtbar als neuer Abschnitt.
   Der Reset auf 0 erledigt nebenbei zwei leere Huellen, die vorher je 15 px
   beigetragen haben - ohne :empty, das bei spaeter per JS gefuellten
   Containern gefaehrlich waere.
   -------------------------------------------------------------------------- */

.product .product__info-container > * + * {
  margin-block: 0;
}

/* Der Produkttitel bringt eine eigene Unterkante mit, die mit dem Preisabstand
   kollabiert waere und ihn auf 15 px gehalten haette. */
.product .product__info-container > .product__title {
  margin-bottom: 0;
}

.product .product__info-container .price {
  margin-top: 1rem;
}

.product .product__info-container .product__tax {
  margin-top: 0.4rem;
}

.product .product__info-container > .isela-lead {
  margin-top: 2rem;
}

.product .product__info-container > variant-selects {
  margin-top: 3.2rem;
}

.product .product__info-container > .product-form__input {
  margin-top: 2.4rem;
}

.product .product__info-container .product-form {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   E4.2  DER PREIS FUEHRT, DIE STEUERZEILE TRITT ZURUECK
   -------------------------------------------------------------------------- */

.product__info-container .price .price-item--regular,
.product__info-container .price .price-item--sale {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.product__info-container .product__tax {
  font-size: 1.2rem;
  opacity: 0.58;
}

/* --------------------------------------------------------------------------
   E4.3  DER KAUFBUTTON FUEHRT
   Dawn macht den Warenkorbbutton zu button--secondary, sobald Dynamic
   Checkout aktiv ist: Flaeche transparent, Schrift in Rose. Die Marke gibt
   fuer eine Vollflaeche nichts her - Rose mit Weiss liegt bei 2,16:1. Tinte
   auf Grund liegt bei 11,07:1 und ist zugleich die uebliche Setzung im
   Modehandel. Die Variablen werden am Element neu gesetzt, damit das Ganze
   dem Farbschema folgt und in einem dunklen Schema mitdreht.
   Am Dynamic Checkout selbst wird nichts veraendert.
   -------------------------------------------------------------------------- */

.product__info-container .product-form__submit {
  /* background als Kurzform, weil C-Phase .button--secondary auf transparent
     setzt und die Kurzform jede Variablenloesung schlaegt. */
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   E4.4  VERTRAUENSLEISTE OHNE KAESTCHEN
   Vier gerahmte Boxen wirkten wie App-Kacheln. Die Angaben bleiben identisch,
   nur der Rahmen weicht einer feinen Trennlinie.
   -------------------------------------------------------------------------- */

.isela-trust__item {
  border: 0;
  border-top: 1px solid rgba(var(--color-foreground), 0.16);
  padding: 1.4rem 0 0;
}

a.isela-trust__item:hover {
  border-top-color: rgba(var(--color-foreground), 0.45);
}

.isela-trust__icon {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  background: transparent;
  color: rgb(var(--color-foreground));
  border: 1px solid rgba(var(--color-foreground), 0.24);
  font-weight: 400;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   E4.5  VERWANDTE PRODUKTE MOBIL ALS WISCHBAHN
   Zwei Spalten zeigten vier Produkte in zwei Reihen. Als Bahn sind alle vier
   in Daumenreichweite und das Bildformat bleibt gross. Reines CSS mit
   Scroll-Snap, kein zusaetzliches JavaScript.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  [id$='__related'] .product-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }

  [id$='__related'] .product-grid::-webkit-scrollbar {
    display: none;
  }

  [id$='__related'] .product-grid > .grid__item {
    flex: 0 0 62%;
    max-width: 62%;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   E4.6  MOBIL: DIESELBE GRUPPIERUNG, ETWAS KOMPAKTER
   -------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .product .product__info-container > .isela-lead {
    margin-top: 1.6rem;
  }

  .product .product__info-container > variant-selects {
    margin-top: 2.6rem;
  }

  .product .product__info-container > .product-form__input {
    margin-top: 2rem;
  }

  .product__info-container .price .price-item--regular,
  .product__info-container .price .price-item--sale {
    font-size: 1.8rem;
  }
}

/* ===========================================================================
   E6 — TYPOGRAFISCHES SYSTEM
   ---------------------------------------------------------------------------
   Das E6-Audit hat 11 gerenderte Ueberschriftgroessen je Breakpoint gemessen
   (Desktop 72/49/44/37/32/26/20/18/17/15/13). Ursache war nicht ein Mangel an
   Tokens — die gab es unter Abschnitt 1 bereits — sondern dass Dawns eigene
   Klassen h0..h5 daran vorbeiliefen und der Editor-Multiplikator
   heading_scale:110 sie zusaetzlich streckte.

   Dieser Abschnitt bindet Dawns Klassen an sieben benannte Rollen. Er fuegt
   keine Groesse hinzu, er entfernt Groessen.

     Display  76 / 44   Kampagne, Hero
     H1       56 / 34   Seitentitel
     H2       40 / 26   Section-Ueberschrift
     H3       28 / 21   Karten, Bloecke
     Body     16 / 16   Fliesstext
     Small    14 / 14   Meta, Hilfstext
     Meta     13 / 13   Labels, Kicker

   Verhaeltnis Desktop 1,4 — Mobil 1,28. Zwei getrennte Enden derselben
   clamp-Kurve, damit Mobil eine eigene Komposition ist und keine
   geschrumpfte Desktopseite.
   ======================================================================== */
:root {
  --isela-fs-display: clamp(4.4rem, 5.6vw, 7.6rem);
  --isela-fs-h1: clamp(3.4rem, 4.2vw, 5.6rem);
  --isela-fs-h2: clamp(2.6rem, 3.1vw, 4rem);
  --isela-fs-h3: clamp(2.1rem, 2.1vw, 2.8rem);
  --isela-fs-body: 1.6rem;
  --isela-fs-small: 1.4rem;
  --isela-fs-meta: 1.3rem;
}

.h0 {
  font-size: var(--isela-fs-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h1,
.h1 {
  font-size: var(--isela-fs-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2,
.h2 {
  font-size: var(--isela-fs-h2);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

h3,
.h3 {
  font-size: var(--isela-fs-h3);
  line-height: 1.24;
  letter-spacing: -0.01em;
}

h4,
.h4 {
  font-size: var(--isela-fs-body);
  line-height: 1.4;
}

h5,
.h5,
h6 {
  font-size: var(--isela-fs-small);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   E6 — SCHRIFTZUWEISUNG
   ---------------------------------------------------------------------------
   Trirong traegt die Marke: Display, H1, H2 und redaktionelle Flaechen.
   Quattrocento Sans traegt den Handel: alles ab H3, Navigation, Karten,
   Preise, Buttons. Dawn setzt die Header-Schrift pauschal auf h1..h6; ab H3
   wird sie hier zurueckgeholt, weil ein Produktname in einer 285px-Spalte
   keine Serifen-Kampagnenschrift ist.
   ------------------------------------------------------------------------ */
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.card__heading,
.card__information .card__heading,
.product-card-wrapper .card__heading,
.price,
.product__title > h1 + .price,
.cart-item__name,
.facets__summary,
.facet-checkbox {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

/* ---------------------------------------------------------------------------
   E6 — ARIAL-RUECKFALL BESEITIGEN
   ---------------------------------------------------------------------------
   Das Audit fand rund 51 sichtbare Elemente in Arial. Ursache: <button>,
   <input>, <select> und <textarea> erben font-family nicht vom Dokument,
   und fuer die ISELA-Swatches sowie die nackten Formularfelder gab es keine
   Regel. Betroffen waren vor allem .isela-swatch und die Filterfelder.
   ------------------------------------------------------------------------ */
button,
input,
select,
textarea,
optgroup,
.isela-swatch,
.isela-swatch--more {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---------------------------------------------------------------------------
   E6 — KICKER / EYEBROW
   ------------------------------------------------------------------------ */
.isela-kicker {
  font-family: var(--font-body-family);
  font-size: var(--isela-fs-meta);
  letter-spacing: var(--isela-kicker-track);
  line-height: 1.3;
}

/* ==========================================================================
   T-010 MASTER DESIGN V2
   ========================================================================== */

/* V2.1 Überschriften ohne Kasten. isela-e6.css färbt Sections über
   [id*="__story"], [id*="__shop_the_look"] usw. ein. Dieselben Selektoren
   treffen auch Überschriften, deren ID den Teilstring enthält
   (IselaStory-…__story, IselaStl-…__shop_the_look, IselaLx-…__story) – daher
   die weißen bzw. sandfarbenen Kästen hinter den H2. Die Section-Flächen
   bleiben, nur die Überschriften werden durchsichtig. */
:is(h1, h2, h3)[id*='__']:not(.shopify-section) {
  background-color: transparent;
}

/* V2.2 Hero als Vollbild-Einstieg. Vorher 663 von 844 px (mobil) bzw.
   738 von 900 px (Desktop): Die Vertrauensleiste ragte in den ersten
   Bildschirm. Jetzt gehört der erste Bildschirm der Kampagne. */
.isela-hero.isela-hero--screen {
  min-height: min(88svh, 96rem);
}
@media screen and (max-width: 749px) {
  .isela-hero.isela-hero--screen {
    min-height: min(88svh, 80rem);
  }
}
@media screen and (min-width: 990px) {
  .isela-hero .isela-hero__inner {
    max-width: 72rem;
  }
  .isela-hero .isela-hero__title {
    font-size: clamp(6.4rem, 6.2vw, 10.4rem);
    line-height: 0.95;
  }
}

/* V2.5 Kollektionskopf am Desktop zweispaltig. Vorher standen 750 px Text
   vor dem ersten Produkt. Der Text bleibt vollständig im Dokument
   (crawlbar), steht aber neben statt unter der Überschrift. */
@media screen and (min-width: 990px) {
  .isela-collection-head .page-width {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(4rem, 6vw, 9.6rem);
    align-items: start;
  }
  .isela-collection-head .isela-kicker { grid-column: 1; grid-row: 1; }
  .isela-collection-head__title { grid-column: 1; grid-row: 2; }
  .isela-collection-links { grid-column: 1; grid-row: 3; }
  .isela-collection-head__desc {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: 72ch;
    font-size: var(--isela-caption);
  }
}

/* V2.6 Knöpfe: Kontrast und Form, shopweit für die hellen Schemata 1 und 2.
   Gemessen: Weiß auf Rosé #c9a9a6 = 2,16:1 („Weiter shoppen“, „Anwenden“,
   „Direkt zum Inhalt“, Buy Bar), Rosé-Links auf Elfenbein = 1,93:1. WCAG AA
   verlangt 4,5:1. Rosé bleibt Knopffläche, die Schrift wird Tinte
   (5,6:1); Sekundärknöpfe und Links werden Tinte (11,1:1). Die Form wird
   rund wie die Landing-Knöpfe. settings_data.json bleibt unverändert. */
:root,
.color-scheme-1,
.color-scheme-2 {
  --color-button-text: 58, 51, 46;
  --color-secondary-button-text: 58, 51, 46;
  --color-link: 58, 51, 46;
}
:root {
  --buttons-radius: 40px;
  --buttons-radius-outset: 41px;
}
.isela-hero__actions .button {
  border-radius: 999px;
}

/* ==========================================================================
   T-011 SEO / CORE WEB VITALS
   ========================================================================== */

/* Kollektionskopf mobil ohne Layout Shift: Die lange Beschreibung startet
   eingeklappt (Klasse aus dem Liquid). Für „Mehr lesen“, das isela-theme.js
   danach einfügt, ist die Höhe reserviert; der Knopf rückt in genau diesen
   Platz. Ausgeklappt gelten beide Regeln nicht mehr. */
@media screen and (max-width: 749px) {
  .isela-collection-head__desc.isela-clamp-pre.is-clamped {
    margin-bottom: 4.8rem;
  }
  .isela-collection-head__desc.isela-clamp-pre.is-clamped + .isela-more {
    display: flex;
    width: max-content;
    height: 4.8rem;
    min-height: 0;
    margin-top: -4.8rem;
  }
}