/** Shopify CDN: Minification failed

Line 1955:0 Unexpected "}"

**/
/* ══════════════════════════════════════════════════════════
   FRUBBIES — Brand + Conversion Layer for Shopify Dawn
   Design system carried over 1:1 from frubbies_21.html
   ══════════════════════════════════════════════════════════ */

:root {
  /* ══ FARBSYSTEM, aus den Produkten abgeleitet (26.8.) ══════
     Die Töne stammen nicht aus dem Bauch, sondern aus den
     Produktfotos selbst, gemessen per Canvas:

       Strawbie, Melon Mel  #A02020  sattes Rot
       Sprinkles            #E06060  warmes Korallrosa
       Smiley               #E0C020  warmes Gelb
       Kiwino, Guacomo      #60A020  sattes Blattgrün

     Zwei Befunde führten zur Überarbeitung: Das alte Mint
     (#8ECBA8) kam in **keinem einzigen Produkt** vor, es war
     eine Farbe von außen. Und das alte Rosa (#EF9BB8) war ein
     kühles Babyrosa, während jeder Frubbie warm ist.

     Die Namen bleiben, damit nichts bricht. Inhaltlich sind es
     jetzt: Beere (pink), Blatt (mint), Sonne (yellow).
     Jede Textfarbe erreicht mindestens 4,5 auf Creme. */
  --fr-ink:      #1C1A17;
  --fr-cream:    #F5EFE6;

  /* Beere, aus Sprinkles und Strawbie */
  --fr-pink:     #F2A2A6;   /* Fläche, Knöpfe    */
  --fr-pink-dk:  #A8404F;   /* Text, Kontrast 4.9 */
  --fr-pink-lt:  #FCEEEF;   /* Sektionsgrund      */

  /* Blatt, aus Kiwino und Guacomo. Ersetzt das systemfremde Mint. */
  --fr-mint:     #A9CE8C;   /* Fläche             */
  --fr-mint-dk:  #3D6B26;   /* Text, Kontrast 5.1 */
  --fr-mint-lt:  #EDF4E4;   /* Sektionsgrund      */

  /* Sonne, aus Smiley. War bislang definiert, aber ungenutzt. */
  --fr-yellow:   #EBBB33;   /* Akzent             */
  --fr-yellow-dk:#7E5A0D;   /* Text, Kontrast 5.1 */

  --fr-surface:  #EDE7DC;
  /* Der Grundton der Produktfotografie, aus allen sechs Bildern
     gemittelt (Streuung 235-243, also praktisch einheitlich).
     Flächen in diesem Ton lassen die Fotos ohne Freistellen
     randlos aufgehen — der Kasten um das Produkt verschwindet,
     weil er dieselbe Farbe hat wie das, worauf er liegt. */
  --fr-photo:    #F1EADE;
  --fr-muted:    #71665D;
  --fr-on-mint:  #2E5220;   /* Text auf der Blattfläche */
  --fr-r:        18px;

  --fr-display: 'Libre Baskerville', Georgia, serif;
  --fr-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid page gutter — replaces the old fixed 64px */
  --fr-gutter: clamp(20px, 5vw, 64px);

  /* ── SCHRIFTSTUFEN ──────────────────────────────────────
     Vorher standen 29 feste Größen plus 8 fluide im
     Stylesheet: 13px neben 13.5px, 14px neben 14.5px, 16px
     neben 16.5px. Solche Halbschritte kann niemand
     unterscheiden, sie entstehen beim Bauen einzelner
     Bausteine und summieren sich zu einer Seite, die unruhig
     wirkt, ohne dass man sagen kann warum.

     Zum Vergleich gemessen: Glossier kommt mit acht Stufen
     aus, Wild mit 21. Hier sind es jetzt sieben feste, drei
     fluide für Überschriften und zwei für Emoji-Icons, die
     keine Schrift sind und deshalb nicht in die Textskala
     gehören.

     Wer eine neue Komponente baut, greift eine Stufe von hier
     und erfindet keine neue. Das ist der eigentliche Zweck. */
  --fr-t-xs:    11px;   /* Versalien-Labels, Badges          */
  --fr-t-sm:    13px;   /* Meta, Fußnoten, Tabellen          */
  --fr-t-base:  15px;   /* Fließtext, Buttons, Navigation    */
  --fr-t-md:    17px;   /* Lead-Absatz, Kartentitel          */
  --fr-t-lg:    20px;   /* kleine Überschriften              */
  --fr-t-xl:    24px;   /* Preise, mittlere Überschriften    */
  --fr-t-2xl:   30px;   /* Wortmarke im Header               */

  --fr-d-sm: clamp(22px, 2.4vw, 28px);   /* h3 */
  --fr-d-md: clamp(30px, 4.5vw, 48px);   /* h2 */
  --fr-d-lg: clamp(34px, 5.5vw, 64px);   /* h1, auch im Hero */

  --fr-ico:    20px;   /* Emoji in Textzeilen  */
  --fr-ico-lg: 32px;   /* Emoji als Blickfang  */
}

/* ── TYPE ─────────────────────────────────────────────── */
.fr { font-family: var(--fr-body); color: var(--fr-ink); }

.fr-logo {
  font-family: var(--fr-display); font-weight: 700;
  letter-spacing: -1px; line-height: 1;
  text-decoration: none; display: inline-block;
}
.fr-logo--hero { font-size: var(--fr-d-lg); }
.fr-logo--lg   { font-size: var(--fr-d-md); }
.fr-logo--sm   { font-size: var(--fr-t-2xl); }

.fr-tagline {
  font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 4px; text-transform: uppercase;
}

/* Fluid headings — the old fixed 64px/48px broke on small screens */
.fr-h1 { font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-d-lg); line-height: 1.02; letter-spacing: -1px; }
.fr-h2 { font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-d-md); line-height: 1.06; letter-spacing: -0.5px; }
.fr-h3 { font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-d-sm); line-height: 1.15; letter-spacing: -0.3px; }

.fr-label {
  font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 3px; text-transform: uppercase;
  display: block;
}

.fr-body-lg { font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-md); line-height: 1.65; }
.fr-body-md { font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-base); line-height: 1.65; }
.fr-body-sm { font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm); line-height: 1.55; }

.fr-price {
  font-family: var(--fr-display); font-weight: 700;
  font-size: var(--fr-t-xl); letter-spacing: -0.3px; color: var(--fr-ink);
}
.fr-price--was {
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-base);
  color: var(--fr-muted); text-decoration: line-through; margin-left: 8px;
}

/* ── BUTTONS ──────────────────────────────────────────── */
.fr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 100px;
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base);
  letter-spacing: 0.2px; text-decoration: none; border: none;
  cursor: pointer; transition: transform .15s, filter .15s, background .2s;
  min-height: 48px; /* touch target */
}
.fr-btn:hover  { transform: translateY(-2px); }
.fr-btn:active { transform: scale(.98); }
.fr-btn:focus-visible { outline: 3px solid var(--fr-mint-dk); outline-offset: 3px; }

.fr-btn--ink   { background: var(--fr-ink);   color: var(--fr-cream); }
.fr-btn--pink  { background: var(--fr-pink);  color: var(--fr-ink); }
.fr-btn--mint  { background: var(--fr-mint);  color: var(--fr-ink); }
.fr-btn--ghost { background: transparent; color: var(--fr-cream); border: 1.5px solid rgba(245,239,230,.28); }
.fr-btn--ghost:hover { border-color: rgba(245,239,230,.6); }
.fr-btn--ink:hover   { filter: brightness(1.14); }
.fr-btn--pink:hover  { filter: brightness(1.06); }
.fr-btn--block { width: 100%; }
.fr-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ── SECTION SHELL ────────────────────────────────────── */
.fr-sec { padding: clamp(56px, 8vw, 100px) var(--fr-gutter); }
.fr-sec--cream { background: var(--fr-cream); }
.fr-sec--ink   { background: var(--fr-ink); }
.fr-sec--pinklt{ background: var(--fr-pink-lt); }
.fr-sec--mint  { background: var(--fr-mint); }
.fr-sec-hd { margin-bottom: clamp(32px, 5vw, 52px); }
.fr-sec-hd-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

/* ══ HERO ═════════════════════════════════════════════════
   Rebuilt: product photo visible on mobile, price + rating
   above the fold, ONE primary CTA.
   ═══════════════════════════════════════════════════════ */
.fr-hero {
  background: var(--fr-ink);
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 6vw, 80px) var(--fr-gutter);
  position: relative; overflow: hidden;
}
.fr-hero__bg {
  display: block !important;   /* something in Dawn's cascade hides bare divs here */
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  background-image: var(--fr-bg-lg);
}
.fr-hero__scrim {
  display: block !important;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right,
    rgba(28,26,23,.92) 0%, rgba(28,26,23,.80) 42%,
    rgba(28,26,23,.32) 68%, rgba(28,26,23,.10) 100%);
}
.fr-hero__left, .fr-hero__right { position: relative; z-index: 2; }

.fr-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(142,203,168,.14);
  border: 1px solid rgba(142,203,168,.3);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 24px;
  color: var(--fr-mint);
}
.fr-hero__sub {
  color: rgba(245,239,230,.62);
  max-width: 440px; margin: 18px 0 26px;
}
.fr-hero__sub strong { color: var(--fr-cream); }

/* Price + rating block — the single biggest hero fix */
.fr-hero__meta {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.fr-hero__price {
  font-family: var(--fr-display); font-weight: 700;
  font-size: var(--fr-t-xl); color: var(--fr-cream); letter-spacing: -.3px;
}
/* Headline carries the hero now — big, serif, and it says what the thing is */
.fr-hero__h1 {
  font-family: var(--fr-display); font-weight: 700;
  font-size: var(--fr-d-lg); line-height: 1.04;
  letter-spacing: -1.5px; color: var(--fr-cream);
  margin: 0; max-width: 12ch;
}

/* Primary button first, downsell as a quiet line underneath — side by side
   they compete, and the cheap option wins arguments it shouldn't. */
.fr-hero__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}

.fr-hero__right { display: flex; justify-content: center; }
.fr-hero__shot {
  width: 100%; max-width: 460px; border-radius: 28px;
  overflow: hidden; background: var(--fr-cream);
}
.fr-hero__shot img { width: 100%; height: auto; display: block; }

/* Glass tiles — the original design's pills, real photos instead of emojis */
.fr-hero__tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; width: 100%; max-width: 520px;
}
/* Sticker-Kacheln: Cream-Karte, Foto verschmilzt randlos mit dem
   Kartenhintergrund (gleiches Cream), Name in Ink darunter.
   Kein Milchglas mehr — das wurde über dem bunten Foto trüb. */
.fr-hero__tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 20px;
  background: var(--fr-cream);
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(28,26,23,.5);
  transition: transform .25s, box-shadow .25s;
}
.fr-hero__tile:hover {
  transform: translateY(-6px) rotate(1.5deg);
  box-shadow: 0 22px 44px -16px rgba(28,26,23,.55);
}
.fr-hero__tile:nth-child(even):hover { transform: translateY(-6px) rotate(-1.5deg); }
.fr-hero__tile img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; display: block;
}
.fr-hero__tile span {
  font-family: var(--fr-display); font-weight: 700;
  font-size: var(--fr-t-base); letter-spacing: -.2px; color: var(--fr-ink);
  padding-bottom: 2px;
}

/* Rating stars */
.fr-stars { display: inline-flex; align-items: center; gap: 6px; }
.fr-stars__glyphs { color: var(--fr-yellow); font-size: var(--fr-t-base); letter-spacing: 2px; }
.fr-stars__count {
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-sm);
  color: rgba(245,239,230,.55);
}
.fr-stars--onlight .fr-stars__count { color: var(--fr-muted); }

/* ══ TRUST BAR ════════════════════════════════════════════ */
.fr-trust {
  background: var(--fr-mint-lt);
  border-bottom: 1.5px solid rgba(28,26,23,.06);
  padding: 16px var(--fr-gutter);
}
.fr-trust__row {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(16px, 4vw, 48px); flex-wrap: wrap;
}
.fr-trust__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-sm);
  color: var(--fr-ink);
}
.fr-trust__ico { font-size: var(--fr-ico); line-height: 1; }

/* ══ MARQUEE ══════════════════════════════════════════════ */
.fr-marquee {
  background: var(--fr-pink); overflow: hidden;
  border-top: 2px solid var(--fr-pink-dk);
  border-bottom: 2px solid var(--fr-pink-dk);
  padding: 12px 0;
}
.fr-marquee__track { display: flex; white-space: nowrap; animation: fr-march 24s linear infinite; }
.fr-marquee__track span {
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-lg);
  color: var(--fr-ink); padding: 0 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.fr-marquee__track span::after { content: '✦'; font-size: var(--fr-t-sm); opacity: .4; }
@keyframes fr-march { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══ PRODUCT GRID ═════════════════════════════════════════ */
.fr-grid {
  display: grid; gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: repeat(3, 1fr);
}
.fr-card {
  border-radius: 28px; overflow: hidden;
  /* Fotoward statt Flächenton: das Produktfoto läuft randlos in
     die Karte, statt eine sichtbare Kante zu ziehen. */
  background: var(--fr-photo);
  border: 1.5px solid rgba(28,26,23,.07);
  transition: transform .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.fr-card:hover { transform: translateY(-8px); border-color: var(--fr-pink); }
.fr-card:nth-child(3n+2):hover { border-color: var(--fr-mint); }
.fr-card:nth-child(3n):hover   { border-color: var(--fr-yellow); }

.fr-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; display: block; }
.fr-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; display: block;
}
.fr-card:hover .fr-card__media img { transform: scale(1.05); }
.fr-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--fr-ink); color: var(--fr-cream);
  font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
}
.fr-card__badge--sold { background: var(--fr-muted); }
.fr-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.fr-card__title { text-decoration: none; color: var(--fr-ink); }
.fr-card__desc { color: var(--fr-muted); margin: 5px 0 14px; flex: 1; }
.fr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-card__add {
  background: var(--fr-ink); color: var(--fr-cream);
  border: none; border-radius: 100px; padding: 11px 20px;
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-sm);
  cursor: pointer; transition: background .2s, transform .15s;
  min-height: 48px; /* 48px + 16px clearance = +49% tap-through (Baymard/mobile CTA research) */
}
.fr-card__add:hover { background: var(--fr-pink-dk); transform: scale(1.04); }
.fr-card__add[disabled] { background: var(--fr-muted); cursor: not-allowed; transform: none; }

/* ══ BUNDLES — the AOV engine ═════════════════════════════ */
.fr-bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fr-bundle {
  position: relative; background: #fff;
  border: 2px solid rgba(28,26,23,.09);
  border-radius: 24px; padding: 30px 26px 26px;
  display: flex; flex-direction: column; text-align: center;
  transition: border-color .2s, transform .2s;
}
.fr-bundle:hover { transform: translateY(-4px); border-color: rgba(28,26,23,.22); }
.fr-bundle:hover .fr-bundle__link { color: var(--fr-pink-dk); }

/* Stretched link: der Titel-Link deckt die ganze Karte ab, damit jeder
   Klick zur Produktseite führt — Buttons liegen per z-index darüber. */
.fr-bundle__link { color: inherit; text-decoration: none; transition: color .15s ease; }
.fr-bundle__link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; z-index: 1; }
.fr-bundle__cta { position: relative; z-index: 2; }

/* Mix-and-match-Zeile unter den drei Karten */
.fr-bundles__mix {
  margin: 26px auto 0; max-width: 640px; text-align: center;
  font-size: var(--fr-t-base); line-height: 1.55; color: #5A4F44;
}
.fr-bundles__mix a {
  color: var(--fr-pink-dk); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; margin-left: 6px;
}
.fr-bundles__mix a:hover { color: var(--fr-ink); }

/* Was im Set steckt — die eigentliche Frage bei einem Bundle */
.fr-bundle__contents {
  margin: 8px 0 0; font-size: var(--fr-t-sm); line-height: 1.45;
  color: var(--fr-muted);
}
/* Namen nie mitten im Wort trennen — nur an den Trennpunkten umbrechen */
.fr-bundle__contents span { white-space: nowrap; }
.fr-bundle__details {
  display: inline-block; margin-top: 12px;
  font-size: var(--fr-t-sm); color: var(--fr-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s ease;
}
.fr-bundle__details:hover { color: var(--fr-ink); }
.fr-bundle--featured { border-color: var(--fr-pink-dk); box-shadow: 0 12px 40px rgba(196,96,126,.14); }
.fr-bundle__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--fr-pink-dk); color: #fff;
  font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; white-space: nowrap;
}
.fr-bundle__qty { font-size: var(--fr-ico-lg); margin-bottom: 6px; }
.fr-bundle__save {
  display: inline-block; margin: 8px auto 0;
  background: var(--fr-mint-lt); color: var(--fr-mint-dk);
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-sm);
  padding: 5px 14px; border-radius: 100px;
}
.fr-bundle__unit { color: var(--fr-muted); margin-top: 6px; }
/* margin-top:auto — die Buttons stehen über alle drei Karten auf einer
   Linie, egal wie lang die Inhaltsliste darüber ausfällt. */
.fr-bundle__cta { margin-top: auto; padding-top: 20px; }

/* ══ WHY / FEATURES ═══════════════════════════════════════ */
.fr-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px, 5vw, 52px); }
.fr-why__card {
  background: rgba(245,239,230,.04);
  border: 1px solid rgba(245,239,230,.09);
  border-radius: var(--fr-r); padding: 30px 26px;
  transition: background .2s, border-color .2s;
}
.fr-why__card:hover { background: rgba(245,239,230,.08); border-color: rgba(245,239,230,.18); }
.fr-why__ico { font-size: var(--fr-ico-lg); margin-bottom: 14px; }
.fr-why__card .fr-h3 { color: var(--fr-cream); margin-bottom: 8px; }
.fr-why__card .fr-body-sm { color: rgba(245,239,230,.55); }

/* ══ EDITORIAL BANNER ═════════════════════════════════════ */
.fr-editorial { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; overflow: hidden; }
.fr-editorial__img { display: block !important; background-size: cover; background-position: center; min-height: 320px; }
.fr-editorial__text {
  background: var(--fr-mint);
  padding: clamp(44px, 6vw, 80px) var(--fr-gutter);
  display: flex; flex-direction: column; justify-content: center;
}

/* ══ REVIEWS ══════════════════════════════════════════════ */
.fr-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fr-review {
  background: #fff; border: 1.5px solid rgba(28,26,23,.07);
  border-radius: 20px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.fr-review__text { color: #4A423A; }
.fr-review__who {
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-sm); color: var(--fr-ink);
}
.fr-review__verified {
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-xs);
  color: var(--fr-mint-dk); letter-spacing: .4px;
}

/* ══ FAQ ══════════════════════════════════════════════════ */
.fr-faq { max-width: 760px; margin: 0 auto; }
.fr-faq__item {
  border-bottom: 1.5px solid rgba(28,26,23,.09);
}
.fr-faq__q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; text-align: left;
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-md);
  color: var(--fr-ink); letter-spacing: -.2px;
}
.fr-faq__q::-webkit-details-marker { display: none; }
.fr-faq__item[open] .fr-faq__q { color: var(--fr-pink-dk); }
.fr-faq__sign { font-size: var(--fr-t-lg); font-family: var(--fr-body); font-weight: 400; flex-shrink: 0; }
.fr-faq__item[open] .fr-faq__sign { transform: rotate(45deg); }
.fr-faq__sign { transition: transform .2s; display: inline-block; }
.fr-faq__a { padding: 0 0 24px; color: var(--fr-muted); max-width: 640px; }

/* ══ FORMS ════════════════════════════════════════════════ */
.fr-form {
  background: #fff; border-radius: 24px;
  padding: clamp(24px, 4vw, 36px); border: 1.5px solid rgba(28,26,23,.07);
}
.fr-field { margin-bottom: 14px; }
.fr-field label {
  display: block; font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 1.5px; text-transform: uppercase;
  color: #8A7A6E; margin-bottom: 6px;
}
.fr-field input, .fr-field select, .fr-field textarea {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid rgba(28,26,23,.12); border-radius: 10px;
  font-family: var(--fr-body); font-size: var(--fr-t-base); font-weight: 600; /* 16px = no iOS zoom */
  color: var(--fr-ink); background: var(--fr-cream); outline: none;
  transition: border-color .2s;
}
.fr-field input:focus, .fr-field select:focus, .fr-field textarea:focus { border-color: var(--fr-pink-dk); }
.fr-field textarea { resize: vertical; min-height: 96px; }
.fr-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fr-form__note { color: var(--fr-muted); margin-top: 12px; text-align: center; }
.fr-form__success {
  background: var(--fr-mint-lt); border: 1.5px solid var(--fr-mint);
  border-radius: 14px; padding: 18px 20px; color: var(--fr-mint-dk);
  font-family: var(--fr-body); font-weight: 700; margin-bottom: 18px;
}
.fr-form__error {
  background: #FDECEF; border: 1.5px solid var(--fr-pink);
  border-radius: 14px; padding: 18px 20px; color: var(--fr-pink-dk);
  font-family: var(--fr-body); font-weight: 700; margin-bottom: 18px;
}

/* ══ PDP — product detail page ════════════════════════════ */
.fr-pdp {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px) var(--fr-gutter) clamp(56px, 7vw, 90px);
  background: var(--fr-cream);
  align-items: start;
}
.fr-pdp__media { position: sticky; top: 90px; }
.fr-pdp__main-img {
  border-radius: 28px; overflow: hidden; background: var(--fr-photo);
  aspect-ratio: 1/1;
}
.fr-pdp__main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fr-pdp__thumb {
  width: 72px; height: 72px; border-radius: 14px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: var(--fr-photo);
  padding: 0;
}
.fr-pdp__thumb[aria-current="true"] { border-color: var(--fr-pink-dk); }
.fr-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fr-pdp__price-row { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 6px; }
.fr-pdp__desc { color: #5A4F44; margin: 18px 0 24px; }

/* Bundle selector on PDP */
.fr-optbox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.fr-opt {
  display: flex; align-items: center; gap: 14px;
  border: 2px solid rgba(28,26,23,.10); border-radius: 16px;
  padding: 15px 18px; cursor: pointer; background: #fff;
  transition: border-color .18s, background .18s;
}
.fr-opt:has(input:checked) { border-color: var(--fr-pink-dk); background: var(--fr-pink-lt); }
.fr-opt input { accent-color: var(--fr-pink-dk); width: 18px; height: 18px; flex-shrink: 0; }
.fr-opt__label { font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base); }
.fr-opt__sub { font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm); color: var(--fr-muted); }
.fr-opt__price { margin-left: auto; font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-md); }
.fr-opt__tag {
  background: var(--fr-mint-lt); color: var(--fr-mint-dk);
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-xs);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; margin-left: 8px;
}

/* Shopifys eingespritzter Express-Button (Buy it now / Shop Pay) */
.fr-pdp .shopify-payment-button { margin-top: 14px; display: block; }
.fr-pdp .shopify-payment-button__button--unbranded {
  background-color: var(--fr-ink);
  color: var(--fr-cream);
}

.fr-pdp__assure {
  list-style: none; padding: 22px 0 0; margin: 22px 0 0;
  border-top: 1.5px solid rgba(28,26,23,.09);
  display: flex; flex-direction: column; gap: 11px;
}
.fr-pdp__assure li {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-base); color: #4A423A;
}
.fr-pdp__assure b { font-weight: 800; color: var(--fr-ink); }

/* Size reference — stands in until there's a hand-held photo */
.fr-size {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--fr-mint-lt); border-radius: 16px;
  padding: 14px 18px; margin-bottom: 22px;
}
.fr-size__ico { font-size: var(--fr-ico); line-height: 1.4; flex-shrink: 0; }
.fr-size__val {
  display: block; font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-base); color: var(--fr-ink);
}
.fr-size__cmp {
  display: block; font-family: var(--fr-body); font-weight: 600;
  font-size: var(--fr-t-sm); color: var(--fr-mint-dk); margin-top: 2px;
}

/* Gift note */
.fr-giftnote { margin-bottom: 16px; }
.fr-giftnote__toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-base);
  color: var(--fr-ink); padding: 6px 0; min-height: 44px;
}
.fr-giftnote__toggle input { width: 18px; height: 18px; accent-color: var(--fr-pink-dk); }
.fr-giftnote__body { margin-top: 8px; }
.fr-giftnote__body[hidden] { display: none; }
.fr-giftnote__body textarea {
  width: 100%; padding: 12px 14px; min-height: 76px; resize: vertical;
  border: 1.5px solid rgba(28,26,23,.12); border-radius: 12px;
  font-family: var(--fr-body); font-size: var(--fr-t-base); font-weight: 600;
  color: var(--fr-ink); background: #fff; outline: none;
}
.fr-giftnote__body textarea:focus { border-color: var(--fr-pink-dk); }
.fr-giftnote__hint {
  font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm);
  color: var(--fr-muted); margin-top: 6px;
}

/* Sticky add-to-cart — desktop and mobile.
   Shows only once the real button has scrolled out of view. */
.fr-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(245,239,230,.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1.5px solid rgba(28,26,23,.1);
  padding: 12px max(16px, calc((100vw - 1180px) / 2)) calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
  transform: translateY(110%); transition: transform .25s ease;
}
.fr-sticky-atc.is-visible { transform: translateY(0); }
.fr-sticky-atc__img {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover;
  background: var(--fr-surface); flex: none;
}
.fr-sticky-atc__title {
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-md);
  color: var(--fr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-sticky-atc__price { font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-lg); white-space: nowrap; margin-left: auto; }
.fr-sticky-atc .fr-btn { flex: none; min-width: 220px; }

/* ══ CART UPSELL (drawer + cart page) ═════════════════════ */
.fr-upsell {
  margin: 16px 0 4px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--fr-surface);
  border: 1.5px solid rgba(28,26,23,.08);
}
.fr-upsell__hd {
  margin: 0 0 12px;
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-base);
  color: var(--fr-ink); letter-spacing: -.2px;
}
.fr-upsell__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fr-upsell__item { display: flex; align-items: center; gap: 12px; }
.fr-upsell__media {
  width: 54px; height: 54px; flex: none; border-radius: 14px; overflow: hidden;
  background: #fff; display: block;
}
.fr-upsell__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-upsell__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fr-upsell__name {
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-base); color: var(--fr-ink);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-upsell__name:hover { color: var(--fr-pink-dk); }
.fr-upsell__price { font-size: var(--fr-t-base); color: var(--fr-muted); }
.fr-upsell .fr-atc { flex: none; }
.fr-btn.fr-upsell__btn {
  min-height: 40px; padding: 0 20px; font-size: var(--fr-t-base);
}

/* Quantity stepper */
.fr-qty {
  display: inline-flex; align-items: center; margin: 0 0 16px;
  border: 1.5px solid rgba(28,26,23,.14); border-radius: 100px;
  background: #fff; overflow: hidden;
}
.fr-qty__btn {
  width: 46px; height: 46px; border: none; background: none; cursor: pointer;
  font-size: var(--fr-t-lg); line-height: 1; color: var(--fr-ink);
  transition: background .15s ease;
}
.fr-qty__btn:hover { background: rgba(28,26,23,.05); }
.fr-qty__input {
  width: 46px; height: 46px; border: none; background: none; text-align: center;
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-md); color: var(--fr-ink);
  -moz-appearance: textfield;
}
.fr-qty__input::-webkit-outer-spin-button,
.fr-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fr-qty__input:focus { outline: none; }

/* Secure-checkout row with the real payment icons */
.fr-paysafe {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 16px; padding-top: 15px;
  border-top: 1.5px solid rgba(28,26,23,.08);
}
.fr-paysafe__txt { font-size: var(--fr-t-sm); color: var(--fr-muted); }
.fr-paysafe__icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fr-paysafe__icon { height: 23px; width: auto; border-radius: 4px; }

/* Delivery window + free-shipping nudge, right above the button */
.fr-deliver {
  display: flex; flex-direction: column; gap: 7px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--fr-surface);
  border: 1.5px solid rgba(28,26,23,.08);
}
.fr-deliver__row {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0; font-size: var(--fr-t-base); line-height: 1.45; color: #5A4F44;
}
.fr-deliver__row b { color: var(--fr-ink); }
.fr-deliver__row.is-free b { color: var(--fr-mint-dk); }
.fr-deliver__row:empty { display: none; }

/* ══ WHOLESALE PERKS ══════════════════════════════════════ */
.fr-ws { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 5vw, 52px); }
.fr-perks { display: flex; flex-direction: column; gap: 10px; }
.fr-perk {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border-radius: 14px; padding: 15px 18px;
  border: 1px solid rgba(28,26,23,.06);
}
.fr-perk__ico { font-size: var(--fr-ico); flex-shrink: 0; margin-top: 1px; }
.fr-perk__t { font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base); color: var(--fr-ink); }
.fr-perk__s { font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm); color: #8A7A6E; margin-top: 2px; }

/* ══ ANNOUNCEMENT BAR ═════════════════════════════════════ */
.fr-announce {
  background: var(--fr-ink); color: var(--fr-cream);
  text-align: center; padding: 10px 16px;
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-sm);
  letter-spacing: .2px;
}
.fr-announce[data-bg="mint"] { background: var(--fr-mint); color: var(--fr-ink); }
.fr-announce[data-bg="pink"] { background: var(--fr-pink); color: var(--fr-ink); }
.fr-announce a { color: inherit; text-underline-offset: 3px; }
.fr-announce__item[hidden] { display: none; }

/* ══ FREE-SHIPPING PROGRESS BAR ═══════════════════════════ */
.fr-ship { padding: 14px 16px 16px; }
.fr-ship__msg {
  font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm);
  color: var(--fr-ink); margin-bottom: 9px; text-align: center;
}
.fr-ship__msg b { font-weight: 800; }
.fr-ship__track {
  height: 8px; border-radius: 100px; overflow: hidden;
  background: rgba(28,26,23,.10);
}
.fr-ship__fill {
  height: 100%; border-radius: 100px;
  background: var(--fr-pink-dk);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s;
  min-width: 2px;
}
.fr-ship__fill.is-complete { background: var(--fr-mint-dk); }

/* ══ COMPARISON TABLE ═════════════════════════════════════ */
.fr-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fr-compare {
  width: 100%; max-width: 860px; margin: 0 auto;
  border-collapse: separate; border-spacing: 0;
  font-family: var(--fr-body); min-width: 520px;
}
.fr-compare th, .fr-compare td {
  padding: 17px 20px; text-align: left; vertical-align: top;
  border-bottom: 1.5px solid rgba(28,26,23,.08);
}
.fr-compare thead th { border-bottom-width: 2px; padding-bottom: 14px; }
.fr-compare tbody th {
  font-weight: 800; font-size: var(--fr-t-base); color: var(--fr-ink); width: 30%;
}
.fr-compare td { font-weight: 600; font-size: var(--fr-t-base); }
.fr-compare__brand {
  font-family: var(--fr-display); font-weight: 700;
  font-size: var(--fr-t-lg); letter-spacing: -.5px; color: var(--fr-ink);
}
.fr-compare__them { color: var(--fr-muted); }
.fr-compare thead .fr-compare__them {
  font-weight: 800; font-size: var(--fr-t-sm); text-transform: uppercase; letter-spacing: 1.5px;
}
/* The "us" column is visually the hero — tinted, rounded, slightly forward */
.fr-compare thead .fr-compare__us { background: var(--fr-pink-lt); border-radius: 16px 16px 0 0; }
.fr-compare tbody .fr-compare__us { background: var(--fr-pink-lt); }
.fr-compare tbody tr:last-child .fr-compare__us { border-radius: 0 0 16px 16px; }
.fr-compare__mark { font-weight: 800; margin-right: 8px; }
.fr-compare__mark--yes { color: var(--fr-mint-dk); }
.fr-compare__mark--no  { color: #C9BEB2; }
.fr-compare__val { display: inline; }

/* ══ VIDEO DEMO ═══════════════════════════════════════════ */
.fr-video-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.fr-video-grid--reverse .fr-video-copy { order: 2; }
.fr-video-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fr-video-points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-base); color: #4A423A;
}
/* Die Video-Sektion steht auf fast schwarzem Grund. Dort ist
   die dunkle Blattfarbe unlesbar (2,75 zu 1), es braucht die
   helle Variante. */
.fr-video-points li span { color: var(--fr-mint); font-weight: 800; flex-shrink: 0; }

.fr-video-frame {
  border-radius: 28px; overflow: hidden;
  background: var(--fr-surface);
  aspect-ratio: 4 / 5; max-height: 620px;
  display: flex; align-items: center; justify-content: center;
}
.fr-video-frame video,
.fr-video-frame iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.fr-video-embed { width: 100%; height: 100%; }
.fr-video-empty {
  text-align: center; padding: 40px 32px; color: var(--fr-muted);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.fr-video-empty__ico { font-size: var(--fr-ico-lg); }
.fr-video-empty b { color: var(--fr-ink); }

/* ══ UGC GALLERY ══════════════════════════════════════════ */
.fr-ugc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fr-ugc__item { margin: 0; border-radius: 20px; overflow: hidden; position: relative; background: var(--fr-surface); }
/* !important, weil Dawns Bild-Regeln später laden und das Seitenverhältnis
   sonst kippt: eine Kachel wurde 1050px hoch, die anderen 391px. */
.fr-ugc__item img {
  width: 100% !important; height: auto !important;
  aspect-ratio: 4/5 !important; object-fit: cover !important;
  object-position: center; display: block;
  transition: transform .4s ease;
}
.fr-ugc__item:hover img { transform: scale(1.05); }
.fr-ugc__empty {
  aspect-ratio: 4/5; display: grid; place-items: center;
  font-size: var(--fr-ico-lg); opacity: .3;
  border: 2px dashed rgba(28,26,23,.15); border-radius: 20px;
}
.fr-ugc__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(28,26,23,.75));
  color: var(--fr-cream); padding: 26px 14px 12px;
  font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-sm);
}

/* ══ CROSS-SELL — "complete the set" ══════════════════════ */
.fr-crosssell { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fr-mini {
  background: var(--fr-surface); border: 1.5px solid rgba(28,26,23,.07);
  border-radius: 20px; padding: 12px 12px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; transition: border-color .2s, transform .2s;
}
.fr-mini:hover { border-color: var(--fr-pink); transform: translateY(-4px); }
.fr-mini__media { display: block; width: 100%; border-radius: 14px; overflow: hidden; }
.fr-mini__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.fr-mini__name {
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-base);
  color: var(--fr-ink); text-decoration: none; letter-spacing: -.2px; margin-top: 4px;
}
.fr-mini__price { font-family: var(--fr-body); font-weight: 700; font-size: var(--fr-t-sm); color: var(--fr-muted); }
.fr-mini__add {
  margin-top: 4px; width: 100%;
  background: var(--fr-ink); color: var(--fr-cream);
  border: none; border-radius: 100px; padding: 9px 12px;
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-sm);
  cursor: pointer; transition: background .2s; min-height: 48px;
}
.fr-mini__add:hover { background: var(--fr-pink-dk); }
.fr-mini__add[disabled] { background: var(--fr-muted); cursor: not-allowed; }

.fr-crosssell-nudge {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--fr-pink-lt); border: 1.5px solid var(--fr-pink);
  border-radius: 16px; padding: 14px 20px; text-decoration: none;
  transition: transform .2s;
}
.fr-crosssell-nudge:hover { transform: translateY(-2px); }
.fr-crosssell-nudge__t { font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base); color: var(--fr-ink); }
.fr-crosssell-nudge__p { font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-lg); color: var(--fr-ink); }

/* ══ GIFTING ══════════════════════════════════════════════ */
.fr-gift {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.fr-gift__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fr-gift__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-base); color: #2C5040;
}
.fr-gift__list b { font-weight: 800; color: var(--fr-ink); }
.fr-gift__ico { font-size: var(--fr-ico); flex-shrink: 0; line-height: 1.4; }

.fr-gift__card {
  background: var(--fr-cream); border-radius: 28px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(28,26,23,.12);
}
.fr-gift__img { display: block; }
.fr-gift__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.fr-gift__body { padding: 22px 24px 26px; }

/* ══ DAWN HEADER — brand pass ═════════════════════════════
   Dawn's header keeps its own markup (menu, search, cart,
   drawers all work), we only restyle it to match the system:
   cream bar, Libre Baskerville wordmark, Nunito menu. */
/* Warm white instead of page-cream: the bar was invisible against the
   page and read as "gray". Now it floats — no hard border, soft shadow. */
.header-wrapper {
  background: #FFFBF4;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(28,26,23,.04), 0 12px 32px -20px rgba(28,26,23,.28);
}
.header { background: #FFFBF4; }

/* Wordmark: brand is lowercase "frubbies" — force it, whatever
   the store name field says */
.header__heading-link {
  font-family: var(--fr-display) !important;
  font-weight: 700 !important;
  font-size: var(--fr-t-2xl) !important;
  letter-spacing: -1px !important;
  text-transform: lowercase;
  color: var(--fr-ink) !important;
}
.header__heading-link:hover { color: var(--fr-ink) !important; }

/* Menu links: Nunito 700, muted until hovered — same as preview nav */
.header__menu-item {
  font-family: var(--fr-body) !important;
  font-weight: 700 !important;
  font-size: var(--fr-t-base) !important;
  color: var(--fr-ink) !important;
  opacity: .55;
  transition: opacity .2s;
}
.header__menu-item:hover { opacity: 1; text-decoration: none; }
.header__active-menu-item { opacity: 1; text-decoration: none !important; }

/* Icons: ink, comfortable tap size */
.header__icon { color: var(--fr-ink); }
.header__icon:hover .icon { transform: scale(1.06); }
.cart-count-bubble {
  background: var(--fr-pink);
  color: var(--fr-ink);
  font-family: var(--fr-body); font-weight: 800;
}

/* ══════════════════════════════════════════════════════════
   DAWN COMPONENT PASS — every stock Dawn component restyled
   to the frubbies system. Pills everywhere, no hairlines,
   no square boxes. Scoped to Dawn's own class names so it
   survives theme updates without touching Dawn's files.
   ══════════════════════════════════════════════════════════ */

/* ── Buttons: every Dawn button becomes a frubbies pill ── */
.button,
.shopify-payment-button__button--unbranded,
button.shopify-payment-button__button,
.customer button,
.cart__checkout-button {
  border-radius: 100px !important;
  font-family: var(--fr-body) !important;
  font-weight: 800 !important;
  font-size: var(--fr-t-base) !important;
  letter-spacing: .2px;
  min-height: 48px;
  background-color: var(--fr-ink);
  color: var(--fr-cream);
  border: none !important;
  box-shadow: none !important;
  transition: transform .15s, filter .15s, background .2s;
}
.button::after,
.shopify-payment-button__button--unbranded::after { box-shadow: none !important; }
.button:hover,
.shopify-payment-button__button--unbranded:hover,
.cart__checkout-button:hover { transform: translateY(-2px); filter: brightness(1.14); }

/* Primary purchase actions get the pink treatment */
.product-form__submit,
.cart__checkout-button,
#CartDrawer .cart__checkout-button {
  background-color: var(--fr-pink) !important;
  color: var(--fr-ink) !important;
}
.product-form__submit:hover,
.cart__checkout-button:hover { filter: brightness(1.06); }

/* Secondary buttons: soft outline pill, but never a hairline */
.button--secondary,
.button--tertiary {
  background-color: transparent;
  color: var(--fr-ink);
  border: 1.5px solid rgba(28,26,23,.25) !important;
}
.button--secondary:hover,
.button--tertiary:hover { border-color: var(--fr-ink) !important; filter: none; }

/* ── Quantity selector: rounded capsule, no square box ── */
.quantity {
  border-radius: 100px !important;
  border: 1.5px solid rgba(28,26,23,.15) !important;
  background: #fff;
  min-height: 48px;
  overflow: hidden;
}
.quantity__button { color: var(--fr-ink); }
.quantity__button svg { width: 11px; }
.quantity__input {
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base);
  color: var(--fr-ink);
}
.quantity:before, .quantity:after { box-shadow: none !important; background: transparent !important; }

/* ── Inputs & selects: rounded, cream, thick focus ── */
.field__input,
.select__select,
.text-area,
.customer .field input,
.search__input,
.cart-note__input {
  border-radius: 12px !important;
  border: 1.5px solid rgba(28,26,23,.12) !important;
  background-color: #fff;
  font-family: var(--fr-body) !important;
  font-weight: 600;
  font-size: var(--fr-t-base);   /* no iOS zoom */
  color: var(--fr-ink);
  box-shadow: none !important;
}
.field__input:focus,
.select__select:focus,
.text-area:focus,
.search__input:focus {
  border-color: var(--fr-pink-dk) !important;
  outline: none !important;
  box-shadow: none !important;
}
.field:after, .select:after, .text-area:after,
.field:before, .select:before, .text-area:before { box-shadow: none !important; }
.field__label { font-family: var(--fr-body) !important; font-weight: 700; color: var(--fr-muted); }

/* ── Links: no default underline clutter ── */
.link, .underlined-link, .customer a {
  font-family: var(--fr-body);
  font-weight: 700;
  color: var(--fr-pink-dk);
  text-underline-offset: 3px;
}
.underlined-link { text-decoration-thickness: 1.5px; }
.link:hover, .underlined-link:hover { color: var(--fr-ink); }

/* ── Cart page & drawer ── */
.cart__footer .totals__total,
.totals__total {
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-base);
  letter-spacing: .5px; text-transform: uppercase; color: var(--fr-muted);
}
.totals__total-value {
  font-family: var(--fr-display) !important; font-weight: 700;
  font-size: var(--fr-t-xl); letter-spacing: -.3px; color: var(--fr-ink);
}
.cart-item__name {
  font-family: var(--fr-display) !important; font-weight: 700;
  font-size: var(--fr-t-md); letter-spacing: -.2px; color: var(--fr-ink);
  text-decoration: none;
}
.cart-item__name:hover { color: var(--fr-pink-dk); }
.cart-items th {
  font-family: var(--fr-body); font-weight: 800; font-size: var(--fr-t-xs);
  letter-spacing: 2px; color: var(--fr-muted);
}
.cart-item__image,
.cart-item__media img,
.cart-item__media .media,
#CartDrawer .cart-item__image {
  border-radius: 18px !important;   /* Dawns Regel lädt später — Nachdruck nötig */
  overflow: hidden;
}
.cart-remove-button .icon-remove { width: 14px; }
.tax-note {
  font-family: var(--fr-body); font-weight: 600; font-size: var(--fr-t-sm);
  color: var(--fr-muted);
}
/* Drawer surface */
#CartDrawer .drawer__inner { background-color: var(--fr-cream); }
#CartDrawer .drawer__heading {
  font-family: var(--fr-display); font-weight: 700; font-size: var(--fr-t-lg);
  letter-spacing: -.3px;
}

/* ── Dawn product cards (collection/search/related): match fr-card ── */
/* !important nötig: Dawns component-card.css lädt nach dieser Datei */
.card--standard > .card__inner {
  border-radius: 28px !important;
  overflow: hidden;
  border: 1.5px solid rgba(28,26,23,.07) !important;
  background-color: var(--fr-surface) !important;
  transition: transform .25s, border-color .25s;
}
.card-wrapper:hover .card--standard > .card__inner {
  transform: translateY(-6px);
  border-color: var(--fr-pink) !important;
}
.card__media, .card__media .media, .card__media img { border-radius: inherit !important; }
.card--card { border-radius: 28px !important; }
.card__heading, .card__heading a {
  font-family: var(--fr-display) !important;
  letter-spacing: -.3px;
  text-decoration: none;
}
.card__heading a:hover { color: var(--fr-pink-dk); }
.card-information .price {
  font-family: var(--fr-body); font-weight: 700; color: var(--fr-muted);
}
/* Toolbar über dem Grid (Sortierung, Produktzähler) */
.facets-container, .collection .facets__form {
  font-family: var(--fr-body);
}
.facet-filters__label, .collection-product-count {
  font-family: var(--fr-body) !important; font-weight: 700; color: var(--fr-muted);
}
.facet-filters__sort {
  border-radius: 100px !important;
  border: 1.5px solid rgba(28,26,23,.12) !important;
  font-family: var(--fr-body) !important; font-weight: 700;
}

/* ── Header: wordmark left, everything else right ──
   Old layout: logo + menu clumped left, lost in the bar.
   New layout: brand anchors left, nav sits right beside the
   icons — one visual group for everything actionable. */
.header { padding-top: 16px; padding-bottom: 16px; }
.header--middle-left {
  grid-template-columns: auto 1fr auto;
  column-gap: 16px;
}
.header--middle-left .header__inline-menu {
  justify-self: end;
  margin-right: 2px;
}
.header__menu-item {
  padding: 10px 16px;
  border-radius: 100px;
  transition: background .2s, color .2s;
}
.header__menu-item:hover { background: rgba(28,26,23,.05); }
.header__menu-item span { transition: none; }
/* Aktiver Punkt als sanfte Pille statt Unterstreichung */
.header__active-menu-item {
  background: rgba(28,26,23,.06);
  text-decoration: none !important;
}
.header__icon,
.header__icon.link,
a.header__icon.link {
  width: 44px; height: 44px;
  border-radius: 100px;
  transition: background .2s;
  color: var(--fr-ink);   /* beats the pink .link rule below */
}
.header__icon:hover { background: rgba(28,26,23,.06); }
.header__icon .icon { width: 20px; height: 20px; }
/* Optische Parität: der Korb wirkt bei gleicher Boxgröße kleiner als Lupe/Kopf */
.header__icon--cart .icon { width: 23px; height: 23px; }
.header__active-menu-item { text-decoration: none; }
.menu-drawer__menu-item {
  font-family: var(--fr-body) !important; font-weight: 700 !important;
  color: var(--fr-ink);
}
.menu-drawer { background-color: var(--fr-cream); }

/* ── Footer: ink block like the brand footer ── */
.footer {
  background-color: var(--fr-ink) !important;
  border-top: none;
}
.footer__content-top { padding-bottom: 32px; }
.footer-block__heading {
  font-family: var(--fr-body) !important; font-weight: 800 !important;
  font-size: var(--fr-t-xs) !important; letter-spacing: 3px; text-transform: uppercase;
  color: var(--fr-mint) !important;
}
.footer a, .footer .list-menu__item--link, .footer__copyright, .footer .caption {
  color: rgba(245,239,230,.55);
  font-family: var(--fr-body);
}
.footer a:hover { color: var(--fr-cream); }
.footer .field__input {
  background-color: rgba(245,239,230,.07);
  border-color: rgba(245,239,230,.2) !important;
  color: var(--fr-cream);
  border-radius: 100px !important;
}
.footer .field__button { color: var(--fr-cream); }
.footer .copyright__content, .footer .copyright__content a { color: rgba(245,239,230,.35); }

/* ── Odds and ends ── */
.badge {
  border-radius: 100px;
  font-family: var(--fr-body); font-weight: 800;
  font-size: var(--fr-t-xs); letter-spacing: 1.5px; text-transform: uppercase;
  border: none;
}
.loading-overlay__spinner .path { stroke: var(--fr-pink-dk); }
.product__title, .product__title h1 {
  font-family: var(--fr-display) !important; letter-spacing: -.5px;
}
/* Dawn's focus ring → brand mint, generous offset */
*:focus-visible { outline: 3px solid var(--fr-mint-dk) !important; outline-offset: 2px; box-shadow: none !important; }

/* Screen-reader-only, used by the comparison table caption */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* On phones the tile grid becomes one swipeable row under the CTA:
     the six shapes are the product, and hiding them left the hero
     wordy and colourless above the fold. */
  .fr-hero__tiles {
    display: flex; flex-wrap: nowrap; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 4px 0 8px;
  }
  .fr-hero__tiles::-webkit-scrollbar { display: none; }
  .fr-hero__tile { flex: 0 0 116px; scroll-snap-align: start; }
  .fr-hero__tile img { height: 76px; }
  .fr-hero { grid-template-columns: 1fr; text-align: left; gap: 18px; padding-top: 28px; padding-bottom: 36px; }
  /* min-width:0 — without it a scrolling flex row makes its grid column
     wider than the screen and drags the headline off the right edge. */
  .fr-hero__right { order: 0; display: block; min-width: 0; }
  .fr-hero__left { min-width: 0; }
  .fr-hero__shot { max-width: 190px; border-radius: 20px; }
  .fr-hero__eyebrow { margin-bottom: 12px; padding: 5px 13px; }
  .fr-hero__sub { margin: 10px 0 16px; font-size: var(--fr-t-base); line-height: 1.5; }
  .fr-hero__meta { margin-bottom: 18px; gap: 12px; }
  .fr-hero__h1 { letter-spacing: -1px; max-width: 100%; }
  .fr-hero__bg { background-image: var(--fr-bg-sm); }
  .fr-hero__scrim {
    background: linear-gradient(to bottom, rgba(28,26,23,.70) 0%, rgba(28,26,23,.9) 55%);
  }
  .fr-pdp { grid-template-columns: 1fr; }
  .fr-pdp__media { position: static; }
  .fr-editorial { grid-template-columns: 1fr; }
  .fr-ws { grid-template-columns: 1fr; }
  .fr-grid, .fr-why { grid-template-columns: repeat(2, 1fr); }
  .fr-bundles, .fr-reviews { grid-template-columns: 1fr; }
  .fr-video-grid { grid-template-columns: 1fr; }
  .fr-video-grid--reverse .fr-video-copy { order: 0; }
  .fr-video-frame { aspect-ratio: 1/1; max-height: 460px; }
  .fr-gift { grid-template-columns: 1fr; }
  .fr-crosssell { grid-template-columns: repeat(3, 1fr); }
  .fr-crosssell-nudge { width: 100%; }
  .fr-bundle--featured { order: -1; }          /* anchor first on mobile */
}
@media (max-width: 620px) {
  .fr-tagline { letter-spacing: 2.5px; }
  .fr-grid, .fr-why { grid-template-columns: 1fr; }
  .fr-ugc { grid-template-columns: repeat(2, 1fr); }
  .fr-crosssell { grid-template-columns: repeat(2, 1fr); }
  .fr-frow { grid-template-columns: 1fr; }
  /* On phones the bar is thumb-reach only: photo + price + button */
  .fr-sticky-atc__title { display: none; }
  .fr-sticky-atc__img { width: 40px; height: 40px; }
  .fr-sticky-atc .fr-btn { flex: 1; min-width: 0; }
  .fr-marquee__track span { font-size: var(--fr-t-base); padding: 0 16px; }
}

/* ---- Bundle cards: real product photos as overlapping stickers ---- */
.fr-bundle__thumbs { display: flex; justify-content: center; margin-bottom: 10px; }
.fr-bundle__thumbs img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--fr-cream); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(28,26,23,.12);
  margin-left: -16px;
}
.fr-bundle__thumbs img:first-child { margin-left: 0; }
.fr-bundle__thumbs[data-n="6"] img { width: 54px; height: 54px; margin-left: -12px; }

/* ---- Hero: quiet downsell text link under the primary CTA ---- */
.fr-hero__sublink {
  align-self: flex-start;
  margin-left: 4px;
  color: rgba(245,239,230,.85);
  font-size: var(--fr-t-base);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.fr-hero__sublink:hover { color: var(--fr-cream); }

@media (prefers-reduced-motion: reduce) {
  .fr-marquee__track { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ══ MOBILE CONVERSION PASS (26.8.) ═══════════════════════
   Gemessen auf 375×812. Vorher lag der Kaufbereich auf der
   Produktseite bei y=1307, also zwei Bildschirme unter der
   Falte, hinter 317px Beschreibungstext. Alles hier zieht den
   Weg zum Kauf nach oben und macht Ziele daumentauglich. */
@media (max-width: 749px) {

  /* --- Produktseite: Kaufen vor Lesen ---------------------
     Reihenfolge mobil: Titel, Preis, Kaufbereich, Sicherheit,
     dann erst Größe, Beschreibung und Zusagen. Die DOM-Folge
     bleibt unangetastet, deshalb liest ein Screenreader
     weiter Beschreibung vor Button. Der Abstand zwischen den
     umsortierten Blöcken ist klein genug, dass das trägt. */
  .fr-pdp__info { display: flex; flex-direction: column; }
  /* Grundstellung: alles Unbekannte landet hinten, nie vorne.
     Ohne diese Zeile bekommt jedes neu hinzugefügte Element
     die Vorgabe 0 und springt damit vor die Überschrift. */
  .fr-pdp__info > *                  { order: 20; }
  .fr-pdp__info > .fr-label          { order: 1; }
  .fr-pdp__info > .fr-h1             { order: 2; }
  .fr-pdp__info > .fr-pdp__price-row { order: 3; }
  .fr-pdp__info > .fr-atc            { order: 4; }
  .fr-pdp__info > .fr-pdp__mix       { order: 5; }
  .fr-pdp__info > .fr-paysafe        { order: 6; margin-top: 4px; }
  /* Erst kaufen können, dann der Charakter, dann die Details */
  .fr-pdp__info > .fr-voice          { order: 7; }
  .fr-pdp__info > .fr-size           { order: 8; }
  .fr-pdp__info > .fr-pdp__desc      { order: 9; }
  .fr-pdp__info > .fr-pdp__assure    { order: 10; }

  /* Galerie: eine wischbare Reihe statt zwei Zeilen Kacheln.
     Spart rund 82px, also genau die Höhe, die Titel und Preis
     vorher unter den Sticky-Balken gedrückt hat. */
  .fr-pdp__thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-left: calc(var(--fr-gutter) * -1);
    margin-right: calc(var(--fr-gutter) * -1);
    padding-left: var(--fr-gutter);
    padding-right: var(--fr-gutter);
  }
  .fr-pdp__thumbs::-webkit-scrollbar { display: none; }
  .fr-pdp__thumb { flex: 0 0 auto; scroll-snap-align: start; }
  .fr-pdp { padding-top: 16px; }
  .fr-pdp__media { min-width: 0; }

  /* Der fixierte Kaufbalken darf den Seitenschluss nicht
     verdecken. Nur dort greifen, wo es ihn wirklich gibt. */
  body:has(.fr-sticky-atc) .shopify-section-group-footer-group {
    padding-bottom: 84px;
  }
  .fr-sticky-atc { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .fr-sticky-atc .fr-btn { min-height: 50px; }

  /* --- Daumentaugliche Ziele -----------------------------
     Apple und Google setzen 44px an. Diese Links lagen bei
     21 bis 31px, alle vier sind Wege in den Kauf. */
  .fr-hero__sublink,
  .fr-bundle__details,
  .fr-bundles__mix a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fr-hero__sublink { margin-top: 2px; }
  .fr-bundles__mix a { padding: 0 2px; }

  /* Fußzeilen-Links: Dawn stapelt sie mit 31px Höhe eng.
     Rechtliches muss auf dem Handy antippbar sein. */
  .footer__content-bottom .policies a,
  .footer__content-bottom .list-menu__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Das kleinste Label im Shop lag bei 9px. */
  .fr-card__badge { font-size: var(--fr-t-xs); }
}

/* Warenkorb-Summe: „$9.99 USD" brach auf dem Handy in zwei
   Zeilen. Der Währungscode ist inzwischen aus, das hier hält
   die Zeile auch bei dreistelligen Beträgen zusammen. */
@media (max-width: 749px) {
  .drawer__footer .totals { flex-wrap: nowrap; gap: 12px; align-items: baseline; }
  .drawer__footer .totals__total,
  .drawer__footer .totals__total-value { white-space: nowrap; }
  .drawer__footer .totals__total-value { font-size: var(--fr-t-xl); }
}

/* ══ STICKY CHECKOUT — Warenkorbseite, nur Handy ══════════
   Der echte Checkout-Button liegt dort bei einem Artikel
   schon 1,2 Bildschirme unter der Falte. */
.fr-sticky-co { display: none; }

@media (max-width: 749px) {
  .fr-sticky-co {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 14px;
    background: rgba(245,239,230,.97);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1.5px solid rgba(28,26,23,.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .fr-sticky-co.is-visible { transform: translateY(0); }
  .fr-sticky-co__sum { display: flex; flex-direction: column; line-height: 1.15; }
  .fr-sticky-co__count { font-size: var(--fr-t-sm); color: #6C6157; }
  .fr-sticky-co__price {
    font-family: var(--fr-display); font-weight: 700;
    font-size: var(--fr-t-lg); white-space: nowrap;
  }
  .fr-sticky-co__btn { flex: 1; min-width: 0; min-height: 50px; }

  /* Platz, damit die Leiste den Seitenschluss nicht deckt */
  body:has(.fr-sticky-co) .shopify-section-group-footer-group { padding-bottom: 84px; }
}

/* ══ PRODUKTRASTER auf dem Handy: zwei Spalten ════════════
   Einspaltig brauchte die Startseite sechs Bildschirme für
   sechs Produkte, jede Karte fast bildschirmfüllend. Zwei
   Spalten zeigen vier auf einmal, machen den Vergleich
   möglich und halbieren den Weg. Die Kartenbeschreibung
   entfällt dabei, sie stand ohnehin abgeschnitten mit „…"
   und der eigentliche Text steht auf der Produktseite. */
@media (max-width: 620px) {
  .fr-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fr-card__body { padding: 12px 12px 14px; }
  .fr-card__desc { display: none; }
  .fr-card__title .fr-h3 { font-size: var(--fr-t-lg); letter-spacing: -.4px; }
  .fr-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
  }
  .fr-card__foot .fr-price { font-size: var(--fr-t-lg); }
  .fr-card__add {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--fr-t-base);
  }
  /* Der Hover-Lift ist auf Touch sinnlos und macht Karten wacklig */
  .fr-card:hover { transform: none; }
}

/* Der Höhenausgleich auf der Single-Karte ist kein Link.
   Ohne das zeigte er auf dem Handy einen unterstrichenen
   Strich, sobald die Zeile eine Mindesthöhe bekam. */
.fr-bundle__details--spacer {
  text-decoration: none;
  pointer-events: none;
  color: transparent;
}

/* Der „Add" im Warenkorb-Upsell war 68x40 und damit unter der
   Daumenschwelle, obwohl er direkt Umsatz bringt. */
@media (max-width: 749px) {
  .fr-upsell__btn { min-height: 44px; padding-left: 20px; padding-right: 20px; }
  .fr-upsell__name { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════
   UX-SCHICHT (26.8.)
   Leitgedanke: Frubbies sind weich und drückbar. Das darf
   man dem Interface anmerken. Nichts hier ist Dekoration um
   ihrer selbst willen, jeder Effekt beantwortet eine Frage:
   Ist etwas passiert? Wo bin ich? Was kann ich anfassen?

   Wer im Betriebssystem „weniger Bewegung" gewählt hat,
   bekommt am Ende dieses Blocks alles wieder abgeschaltet.
   ══════════════════════════════════════════════════════════ */

/* ── Auftauchen beim Scrollen ───────────────────────────── */
.fr-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.fr-rise.fr-in { opacity: 1; transform: none; }

/* ── Bilder blenden ein ─────────────────────────────────── */
.fr-img-fade { opacity: 0; transition: opacity .45s ease; }
.fr-img-fade.fr-img-in { opacity: 1; }

/* ── Das Drücken ────────────────────────────────────────────
   Der Kern der Sache. Alles Klickbare gibt beim Antippen
   kurz nach und federt zurück, wie ein Schwamm. Die Kurve
   ist bewusst nicht linear: erst schnell weich werden,
   dann langsam zurück. */
.fr-btn,
.fr-card__add,
.fr-bundle__cta,
.fr-upsell__btn,
.button,
.cart__checkout-button,
.shopify-payment-button__button {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              background-color .2s ease,
              box-shadow .2s ease !important;
}
.fr-btn:active,
.fr-card__add:active,
.fr-bundle__cta:active,
.fr-upsell__btn:active,
.button:active,
.cart__checkout-button:active,
.shopify-payment-button__button:active {
  transform: scale(.955);
}
/* Karten und Kacheln geben ebenfalls nach */
.fr-card:active,
.fr-bundle:active,
.fr-hero__tile:active,
.fr-pdp__thumb:active,
.fr-ugc__item:active { transform: scale(.985); }
.fr-card, .fr-bundle, .fr-hero__tile, .fr-pdp__thumb, .fr-ugc__item {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              border-color .2s ease, box-shadow .25s ease;
}

/* ── Bestätigung im Kaufmoment ──────────────────────────── */
.fr-added {
  background: var(--fr-mint-dk) !important;
  color: #fff !important;
}
@keyframes fr-cart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28) rotate(-7deg); }
  60%  { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1); }
}
.fr-cart-pop { animation: fr-cart-pop .5s cubic-bezier(.34,1.56,.64,1); }

/* ── Produktgalerie ─────────────────────────────────────── */
#fr-main-img { transition: opacity .2s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
#fr-main-img.fr-swap { opacity: .25; }
/* Ganz leichtes Heranfahren beim Überfahren, nur mit Zeigegerät */
@media (hover: hover) and (pointer: fine) {
  .fr-pdp__main-img { cursor: zoom-in; }
}
.fr-pdp__thumb {
  transition: border-color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.fr-pdp__thumb[aria-current="true"] { transform: translateY(-2px); }

/* ── Video: Steuerung und Zustände ──────────────────────── */
.fr-video-frame { position: relative; background: var(--fr-ink); }
.fr-video--js video { transition: opacity .5s ease; }
.fr-video--js:not(.is-playing) video { opacity: .55; }
.fr-video--js.is-playing video { opacity: 1; }

.fr-video__play,
.fr-video__sound {
  position: absolute;
  border: 0; cursor: pointer;
  background: rgba(245,239,230,.94);
  color: var(--fr-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(28,26,23,.28);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.fr-video__play:active,
.fr-video__sound:active { transform: scale(.92); }

/* Die große Abspieltaste erscheint nur, wenn der Browser
   das automatische Abspielen verweigert hat. */
.fr-video__play {
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%;
  font-size: var(--fr-t-xl); line-height: 1;
  display: none;
  padding-left: 5px;                 /* das Dreieck optisch mitteln */
}
.fr-video--js.is-blocked .fr-video__play { display: block; }
.fr-video__play:active { transform: translate(-50%,-50%) scale(.92); }

.fr-video__sound {
  right: 14px; bottom: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: var(--fr-t-md); line-height: 1;
  opacity: 0; pointer-events: none;
}
.fr-video--js.is-playing .fr-video__sound { opacity: .9; pointer-events: auto; }
.fr-video--js.is-playing .fr-video__sound:hover { opacity: 1; }

/* ── Versandfortschritt ─────────────────────────────────── */
.fr-ship__fill { transition: width .7s cubic-bezier(.22,.61,.36,1); }
@keyframes fr-ship-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142,203,168,0); }
  40%      { box-shadow: 0 0 0 7px rgba(142,203,168,.42); }
}
.fr-ship--done .fr-ship__track { animation: fr-ship-glow 1.1s ease-out 1; border-radius: 999px; }
.fr-ship--done .fr-ship__msg b { color: var(--fr-mint-dk); }

/* ── Laufschrift hält an, wenn man hinsieht ─────────────── */
.fr-marquee:hover .fr-marquee__track { animation-play-state: paused; }

/* ── Tastaturbedienung sichtbar machen ──────────────────── */
.fr-kb :focus-visible {
  outline: 3px solid var(--fr-pink-dk);
  outline-offset: 3px;
  border-radius: 6px;
}
html:not(.fr-kb) :focus { outline: none; }

/* ── Sanfteres Ein- und Ausfahren der Kaufleisten ───────── */
.fr-sticky-atc, .fr-sticky-co {
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}

/* ── Wer weniger Bewegung möchte, bekommt weniger ───────── */
@media (prefers-reduced-motion: reduce) {
  .fr-rise { opacity: 1 !important; transform: none !important; }
  .fr-img-fade { opacity: 1 !important; }
  .fr-cart-pop { animation: none !important; }
  .fr-ship--done .fr-ship__track { animation: none !important; }
  .fr-pdp__main-img:hover #fr-main-img { transform: none !important; }
  .fr-btn:active, .fr-card:active, .fr-bundle:active,
  .fr-hero__tile:active, .fr-pdp__thumb:active { transform: none !important; }
}

/* ── Mengenvorteil auf der Produktseite ─────────────────────
   Sitzt bewusst unter dem Kaufbereich: erst kaufen können,
   dann erfahren, dass drei günstiger sind. Andersherum wird
   aus einem klaren Angebot eine Rechenaufgabe. */
.fr-pdp__mix {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 2px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--fr-mint);
  color: var(--fr-ink);
  text-decoration: none;
  font-size: var(--fr-t-base); font-weight: 600; line-height: 1.35;
  border: 1.5px solid transparent;
  transition: border-color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.fr-pdp__mix:hover { border-color: var(--fr-mint-dk); }
.fr-pdp__mix:active { transform: scale(.985); }
.fr-pdp__mix__ico { color: var(--fr-mint-dk); font-size: var(--fr-ico); flex: none; }

/* ── Die Stimme des Frubbie ─────────────────────────────────
   Aus den Steckbriefkarten. Bewusst in Libre Baskerville
   kursiv statt in einer Handschrift: das Markensystem hat
   zwei Schriften, und eine dritte einzuführen ist eine
   Entscheidung fürs ganze Haus, nicht für eine Zeile. */
.fr-voice {
  margin: 16px 0 4px;
  padding: 16px 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fr-surface);
  border-radius: 18px;
  border-left: 3px solid var(--fr-pink);
}
/* Die Zeichnung liegt auf weißem Grund. multiply lässt das
   Weiß im Beige des Kastens verschwinden, ohne dass jedes
   Motiv von Hand freigestellt werden muss. */
.fr-voice__face {
  width: 86px; height: 86px;
  flex: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.fr-voice__body { min-width: 0; }
.fr-voice__text {
  margin: 0;
  font-family: var(--fr-display);
  font-style: italic;
  font-size: var(--fr-t-md);
  line-height: 1.5;
  color: var(--fr-ink);
}
.fr-voice__by {
  margin-top: 8px;
  font-size: var(--fr-t-sm);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fr-pink-dk);
}
@media (max-width: 749px) {
  .fr-voice { padding: 15px 16px 14px 40px; }
  .fr-voice__text { font-size: var(--fr-t-base); }
}

/* Auf dem Handy rückt die Figur nach oben neben den Namen,
   damit der Text die volle Breite behält. */
@media (max-width: 480px) {
  .fr-voice { gap: 12px; padding: 14px 14px 14px 12px; }
  .fr-voice__face { width: 64px; height: 64px; }
}


/* ══ SPRECHENDE FIGUR ═══════════════════════════════════════
   Ein Bauteil für alle Stellen, an denen sonst nur eine
   Systemmeldung stünde: leerer Warenkorb, 404, Bestätigung
   der Anmeldung, Ende der FAQ. Die Sorte sagt etwas und
   unterschreibt, wie das Zitat auf der Produktseite auch.

   Die Zeichnungen liegen auf weißem Grund. multiply lässt
   das Weiß im Creme aufgehen, ohne dass jedes Motiv von
   Hand freigestellt werden muss. */
.fr-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 0 auto;
  max-width: 460px;
}
.fr-mascot__face {
  width: 120px; height: 120px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.fr-mascot__quote {
  margin: 6px 0 0;
  font-family: var(--fr-display);
  font-style: italic;
  font-size: var(--fr-t-md);
  line-height: 1.45;
  color: var(--fr-ink);
}
.fr-mascot__name {
  margin: 6px 0 0;
  font-size: var(--fr-t-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fr-pink-dk);
}
.fr-mascot__link {
  margin-top: 10px;
  color: var(--fr-pink-dk);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fr-mascot--lg .fr-mascot__face { width: 168px; height: 168px; }
.fr-mascot--lg .fr-mascot__quote { font-size: var(--fr-t-lg); }
.fr-mascot--sm .fr-mascot__face { width: 76px; height: 76px; }
.fr-mascot--sm .fr-mascot__quote { font-size: var(--fr-t-base); }

/* Im dunklen Footer scheitern beide Blendmodi: multiply frisst
   die Figur mit, screen lässt ein weißes Rechteck stehen.
   Also bekommt sie einen hellen Kreis, in dem sie sitzen darf. */
.fr-mascot--dark .fr-mascot__face {
  mix-blend-mode: normal;
  background: var(--fr-cream);
  border-radius: 50%;
  padding: 5px;
}
.fr-mascot--dark .fr-mascot__quote { color: rgba(245,239,230,.94); }
.fr-mascot--dark .fr-mascot__name { color: var(--fr-mint); }

/* Auf der FAQ steht die Figur neben dem Text, nicht darüber */
.fr-faq__outro {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 34px auto 0;
  padding: 18px 24px;
  background: var(--fr-surface);
  border-radius: 20px;
}
.fr-faq__outro .fr-mascot {
  flex-direction: row;
  text-align: left;
  gap: 18px;
  max-width: none;
}
.fr-faq__outro .fr-mascot__quote { margin-top: 0; font-size: var(--fr-t-md); }

@media (max-width: 620px) {
  .fr-mascot__face { width: 96px; height: 96px; }
  .fr-mascot--lg .fr-mascot__face { width: 130px; height: 130px; }
  .fr-mascot__quote { font-size: var(--fr-t-md); }
  .fr-mascot--lg .fr-mascot__quote { font-size: var(--fr-t-md); }
  .fr-faq__outro { padding: 18px; }
  .fr-faq__outro .fr-mascot { flex-direction: column; text-align: center; gap: 8px; }
}

/* ── Fußzeilen-Navigation ───────────────────────────────────
   Dawn färbt diese Links aus seinem Farbschema heraus fast
   schwarz. Auf unserem dunklen Footer lag der Kontrast bei
   1,12 zu 1, gefordert sind 4,5. Sie waren damit praktisch
   unsichtbar. */
.footer .footer-block__details-content .list-menu__item--link,
.footer .footer-block__details-content a {
  color: rgba(245, 239, 230, .82) !important;
  transition: color .18s ease;
}
.footer .footer-block__details-content a:hover,
.footer .footer-block__details-content a:focus-visible {
  color: var(--fr-cream) !important;
}
.footer .footer-block__heading {
  color: var(--fr-mint) !important;
}

/* Auf der Mint-Fläche braucht es einen eigenen, dunkleren Ton:
   mint-dk auf mint kam nur auf 2,25 zu 1. */
.fr-pdp__mix__ico { color: var(--fr-on-mint); }
.fr-size__cmp { color: var(--fr-on-mint); }

/* ── Zwei Restposten aus dem Kontrast-Durchgang ─────────────
   Das ✕ in der Konkurrenzspalte war mit 1,6 zu 1 praktisch
   unsichtbar. Es soll zurücktreten, aber lesbar bleiben, denn
   es trägt die halbe Aussage der Tabelle. */
.fr-compare__mark--no { color: #75695B; }

/* Das Feldlabel im dunklen Footer stand in Grau auf Schwarz. */
.footer-block__newsletter .field__label,
.footer__newsletter .field__label {
  color: #A79B8F;
}

/* ══ SAMMEL-FORTSCHRITT ═════════════════════════════════════
   Die sechs Formen als Reihe, gefüllt was im Warenkorb liegt.
   Fehlende bleiben als blasser Umriss stehen, denn der Reiz
   beim Sammeln ist die Lücke. */
.fr-collect {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--fr-mint-lt);
}
/* Flachere Fassung für den Drawer: dort zählt jede Zeile. */
.fr-collect--compact { margin: 0; padding: 10px 12px; border-radius: 14px; }

.fr-collect__row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.fr-collect--compact .fr-collect__row { margin-bottom: 6px; }

/* Die Punkte sind 44px groß, nicht 38. Das ist die Größe, die
   ein Finger sicher trifft; bei den fehlenden sind sie Knöpfe,
   und ein Knopf, den man zweimal anfassen muss, ist keiner. */
.fr-collect__dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px dashed rgba(28,26,23,.22);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
  padding: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s ease;
}
.fr-collect__dot img {
  width: 100%; height: 100%;
  object-fit: cover;
  grid-area: 1 / 1;
  opacity: .2;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}
.fr-collect__dot.is-in {
  border-style: solid;
  border-color: var(--fr-mint-dk);
  transform: scale(1.06);
}
.fr-collect__dot.is-in img { opacity: 1; filter: none; }

/* Der Haken sitzt als kleine Scheibe in der Ecke des gefüllten
   Punktes. Er belohnt sichtbar, ohne das Foto zu verdecken. */
.fr-collect__haken {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--fr-mint-dk);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
}

/* Die fehlenden Punkte sind Knöpfe. Das Plus macht das sichtbar,
   ohne Text zu brauchen, und liegt über dem blassen Foto. */
.fr-collect__dot--add { cursor: pointer; }
.fr-collect__plus {
  grid-area: 1 / 1;
  position: relative;
  font-family: var(--fr-body);
  font-size: var(--fr-t-lg);
  font-weight: 800;
  line-height: 1;
  color: var(--fr-mint-dk);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.fr-collect__dot--add:hover {
  border-color: var(--fr-mint-dk);
  border-style: solid;
}
.fr-collect__dot--add:hover img { opacity: .5; filter: grayscale(.3); }
.fr-collect__dot--add:hover .fr-collect__plus { transform: scale(1.25); }
.fr-collect__dot--add:active { transform: scale(.92); }
.fr-collect__dot--add:focus-visible {
  outline: 3px solid var(--fr-mint-dk);
  outline-offset: 2px;
}

/* Während das Hinzufügen läuft, dreht sich der Punkt. Das ist
   die einzige Rückmeldung, die zwischen Tippen und neu
   gezeichnetem Drawer liegt, deshalb darf sie nicht fehlen. */
.fr-collect__dot--add.is-laedt { animation: fr-dot-dreht .7s linear infinite; }
.fr-collect__dot--add.is-laedt .fr-collect__plus { opacity: .3; }
@keyframes fr-dot-dreht { to { transform: rotate(360deg); } }
.fr-collect__dot--add.is-fehler {
  border-color: var(--fr-pink-dk);
  border-style: solid;
  animation: fr-dot-wackelt .4s ease;
}
@keyframes fr-dot-wackelt {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.fr-collect__text {
  margin: 0;
  text-align: center;
  font-size: var(--fr-t-sm);
  color: var(--fr-on-mint);
}
.fr-collect__text b { color: var(--fr-ink); }

@media (prefers-reduced-motion: reduce) {
  .fr-collect__dot, .fr-collect__dot img { transition: none; }
  .fr-collect__dot.is-in { transform: none; }
  .fr-collect__dot--add.is-laedt { animation: none; opacity: .6; }
  .fr-collect__dot--add.is-fehler { animation: none; }
}
}

/* ══ SAMMEL-STAND IM RASTER ═════════════════════════════════
   Was schon im Warenkorb liegt, trägt eine Marke. Die Karte
   selbst bleibt normal bedienbar, sie ist nur erkennbar. */
.fr-card__have {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--fr-mint-dk);
  color: #fff;
  font-size: var(--fr-t-xs);
  font-weight: 800;
  letter-spacing: .4px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(28,26,23,.18);
}
.fr-card.is-have .fr-card__have { display: block; }
.fr-card.is-have { border-color: var(--fr-mint); }
.fr-card.is-have .fr-card__media img { opacity: .92; }

/* Die Zählzeile über dem Raster */
.fr-collect-line {
  margin: 0 0 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--fr-mint-lt);
  color: var(--fr-on-mint);
  font-size: var(--fr-t-base);
  display: inline-block;
}
.fr-collect-line b { color: var(--fr-ink); }
.fr-collect-line[hidden] { display: none; }

/* Dawns Karten auf der Kollektionsseite tragen dieselbe Marke.
   Sie haben kein eigenes Badge-Element, deshalb setzen wir es
   über ::before auf den Bildbereich. */
.card-wrapper { position: relative; }
.card-wrapper.is-have::before {
  content: '✓ In your bowl';
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--fr-mint-dk);
  color: #fff;
  font-family: var(--fr-body);
  font-size: var(--fr-t-xs);
  font-weight: 800;
  letter-spacing: .4px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(28,26,23,.18);
}

/* Auch im Cross-Sell der Produktseite, dort aber nur als
   kleines Häkchen: der Platz ist knapp und der Kontext klar. */
.fr-mini { position: relative; }
.fr-mini.is-have::before {
  content: '✓';
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fr-mint-dk);
  color: #fff;
  font-size: var(--fr-t-sm);
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(28,26,23,.2);
}
.fr-mini.is-have .fr-mini__media { opacity: .85; }

/* ══ DREI KLEINE MOMENTE ════════════════════════════════════
   Flug in den Warenkorb, Drücken auf der Produktseite und
   der Fruchtregen, wenn die Schale voll ist. Alles rein
   visuell: nichts davon beeinflusst das Layout, und bei
   „weniger Bewegung" passiert schlicht nichts. */

/* Der fliegende Klon */
.fr-fly {
  position: fixed;
  z-index: 200;
  border-radius: 16px;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Das Hauptbild lädt zum Drücken ein */
.fr-squeezable { cursor: pointer; }
.fr-squeezable #fr-main-img { transform-origin: center bottom; }

/* Fruchtregen */
.fr-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 190;
  overflow: hidden;
}
.fr-rain span {
  position: absolute;
  top: -8%;
  animation: fr-fall 2.2s cubic-bezier(.3,.5,.6,1) forwards;
}
@keyframes fr-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(108vh) rotate(260deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-fly, .fr-rain { display: none !important; }
  .fr-squeezable { cursor: default; }
}

/* ══ LUPE AUF DEM PRODUKTBILD ═══════════════════════════════
   Beim Überfahren tritt eine 2000px-Fassung an die Stelle des
   Fotos, ausschnittweise dem Zeiger folgend. Das Kaufargument
   ist die Garnstruktur mit dem Metallfaden, und die sieht man
   sonst schlicht nicht.

   Der Ausschnitt wird über background-position gesteuert, das
   Originalbild blendet sich darunter weg. So bleibt das Layout
   unangetastet, nichts springt. */
.fr-pdp__main-img {
  background-repeat: no-repeat;
  background-size: 230%;
}
.fr-pdp__main-img.is-zooming #fr-main-img { opacity: 0; }
.fr-pdp__main-img #fr-main-img { transition: opacity .18s ease; }

/* Ein dezenter Hinweis, dass hier etwas geht */
.fr-pdp__main-img::after {
  content: '🔍 Hover to see the yarn';
  position: absolute;
  right: 14px; bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(245,239,230,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--fr-ink);
  font-family: var(--fr-body);
  font-size: var(--fr-t-sm);
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  box-shadow: 0 2px 10px rgba(28,26,23,.14);
}
@media (hover: hover) and (pointer: fine) {
  .fr-pdp__main-img:hover::after { opacity: 1; }
  .fr-pdp__main-img.is-zooming::after { opacity: 0; }
}
/* Ohne Zeigegerät gibt es weder Lupe noch Hinweis */
@media (hover: none), (pointer: coarse) {
  .fr-pdp__main-img::after { content: none; }
  .fr-pdp__main-img { background-image: none !important; }
}

/* ── Drawer: die Positionsliste hat Vorrang ─────────────────
   Der Drawer ist ein enger Raum. Versandbalken und Upsell sind
   Beiwerk, die Liste ist der Zweck. Deshalb darf sie wachsen
   und das Beiwerk wird darin kompakter. */
/* Kein eigenes display:flex hier. Dawn baut den Drawer selbst
   als Spalte, und eine zweite Flex-Ebene ließ die Positionsliste
   unter ihre Inhaltshöhe schrumpfen: der Inhalt lief heraus und
   wurde vom Upsell überlagert. Der klassische Flexbox-Fix ist
   min-height 0 plus eigenes Scrollen, nicht eine feste Höhe. */
cart-drawer cart-drawer-items,
cart-drawer .cart__contents,
cart-drawer .drawer__contents { min-height: 0; }
cart-drawer .drawer__cart-items-wrapper {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
cart-drawer .fr-ship { margin: 6px 0 2px; }
cart-drawer .fr-upsell { margin-top: 10px; padding: 12px 14px 13px; }
cart-drawer .fr-upsell__head { margin-bottom: 8px; font-size: var(--fr-t-base); }

/* ── Zitatsignatur und Luft danach ──────────────────────────
   Der Strich vor dem Namen macht aus der Zeile eine Signatur.
   Er steht per CSS da, damit er überall gleich aussieht: bei
   den sprechenden Figuren und beim Zitat auf der Produktseite.
   Kurzer Strich, kein Geviertstrich, wie im ganzen Shop. */
.fr-mascot__name::before,
.fr-voice__by::before { content: '- '; }

/* Im leeren Warenkorb klebte der Knopf direkt an der Signatur. */
.fr-mascot { margin-bottom: 22px; }
.fr-mascot__name { margin-top: 8px; }
/* In der FAQ sitzt die Figur in einer eigenen Box, dort ist
   der Abstand schon im Kasten und würde sonst doppelt zählen. */
.fr-faq__outro .fr-mascot { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   DESIGN-DURCHGANG (26.8.)
   Gemessen statt geschätzt: 35 verschiedene Kombinationen aus
   Schriftgröße und Gewicht auf einer einzigen Seite, FAQ-Zeilen
   mit 85 Zeichen, und ein Logo, das dem eigenen Markensystem
   widerspricht. Hier die Korrekturen.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Logo folgt wieder dem Markensystem ─────────────────
   Dawn verschachtelt im Logo-Link ein span, das die Größe auf
   24px und die Laufweite auf +0,6px zog. Das Markensystem sagt
   Libre Baskerville 700 mit -1px. Genau das gilt jetzt auch
   im Header. */
.header__heading-link span,
.header__heading a span {
  font-family: var(--fr-display) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
}

/* ── 2. Lesbare Zeilenlängen ───────────────────────────────
   Fließtext liest sich zwischen 45 und 75 Zeichen am besten.
   Die FAQ-Antworten liefen über 85 und ermüdeten dadurch. */
.fr-faq__a,
.fr-faq__a p,
.fr-video-copy p,
.fr-gift__copy p,
.fr-editorial__text p { max-width: 68ch; }

/* Zentrierte Einleitungen dürfen etwas schmaler sein */
.fr-sec-hd p { max-width: 62ch; }

/* ── 3. Eine Skala für die Kleinschrift ────────────────────
   Gemessen waren es 24 Stufen unter 17px. Allein die Labels
   liefen in 9, 10, 11 und 12px mit vier Gewichten, obwohl sie
   dieselbe Rolle haben. Was gleich gemeint ist, sieht jetzt
   gleich aus:

     Label   11px / 800 / Versalien, weite Laufweite
     Meta    13px / 700
     Text    15px / 600
     Groß    17px / 600
     Knopf   15px / 800

   Bewusst nur die Ausreißer angefasst, nicht jede Regel
   umgeschrieben: ein Komplettumbau der Typografie ohne Blick
   auf jede einzelne Stelle richtet mehr Schaden an als er
   behebt. */

/* Alles, was Label ist, ist auch Label */
.fr-card__badge,
.fr-bundle__flag,
.fr-bundle__save,
.fr-mascot__name,
.fr-voice__by,
.fr-review__verified {
  font-size: var(--fr-t-xs);
  font-weight: 800;
  letter-spacing: 1.4px;
}
.fr-bundle__save { letter-spacing: .6px; }   /* Preisangabe, keine Versalien */

/* Meta-Zeilen auf eine Stufe */
.fr-body-sm,
.fr-ugc__cap,
.fr-compare__them { font-size: var(--fr-t-sm); font-weight: 700; }

/* Die dünnen Ausreißer im Fließtext angleichen */
.fr-bundle__details,
.fr-hero__sublink { font-weight: 600; }

/* ── 4. Der Hero bekommt Luft ──────────────────────────────
   Er nahm 64% der Bildschirmhöhe. Ein Hero, der die Marke
   tragen soll, braucht mehr Ruhe um sich, ohne den Inhalt
   darunter zu verstecken: 78% lassen die nächste Sektion
   noch anklingen. */
@media (min-width: 990px) {
  .fr-hero { min-height: 78vh; }
}

/* ── 5. Rhythmus statt Gleichmaß ───────────────────────────
   Alle Sektionen hatten exakt 100px oben und unten. Das ist
   ordentlich, aber tonlos. Die beiden Sektionen, die den Kauf
   tragen, bekommen mehr Raum, die Vergleichstabelle als
   dichter Block etwas weniger. */
@media (min-width: 990px) {
  #bundles { padding-top: 124px; padding-bottom: 124px; }
  #shop { padding-bottom: 116px; }
  .fr-sec--ink { padding-top: 88px; padding-bottom: 88px; }
}

/* ── 6. Vertikaler Rhythmus auf der Produktseite ───────────
   Gemessen sprangen die Abstände zwischen 0 und 43px. Dawns
   h1-Vorgabe schob allein 43px über und unter den Titel und
   riss ihn damit aus seinem Zusammenhang mit Label und Preis.

   Die Staffelung folgt jetzt der Zusammengehörigkeit: was eine
   Einheit bildet, steht eng, zwischen den Einheiten ist Luft.
   Vor dem Kaufbereich am meisten, das ist der Absatz, an dem
   der Blick anhalten soll. */
.fr-pdp__info > * { margin-top: 0; margin-bottom: 20px; }

.fr-pdp__info > .fr-label       { margin-bottom: 6px; }   /* gehört zum Titel */
.fr-pdp__info > .fr-h1          { margin-top: 0; margin-bottom: 10px; }
.fr-pdp__info > .fr-pdp__price-row { margin-bottom: 22px; }
.fr-pdp__info > .fr-voice       { margin-bottom: 24px; }
.fr-pdp__info > .fr-size        { margin-bottom: 28px; }
.fr-pdp__info > .fr-atc         { margin-bottom: 14px; }
/* product-form schluckt das margin-bottom, deshalb hier von oben */
.fr-pdp__info > .fr-pdp__mix    { margin-top: 16px; margin-bottom: 16px; }
.fr-pdp__info > .fr-paysafe     { margin-bottom: 26px; }
.fr-pdp__info > .fr-pdp__assure { margin-bottom: 0; }

/* ── 7. Kein Beschnitt mehr in der Produktgalerie ──────────
   Der Rahmen ist quadratisch, die Fotos sind es nicht: die
   Bowl-Aufnahmen liegen bei 1600x893, also 16:9. Mit cover
   verschwand fast die halbe Bildbreite, beim Full Fruit Bowl
   waren Donut und Smiley angeschnitten.

   contain zeigt jedes Format vollständig. Die Fotos haben
   ohnehin einen cremefarbenen Grund (#F6EBE3 bis #DECFC7),
   der Rahmen liegt bei #EDE7DC: der Übergang fällt kaum auf,
   und ein bisschen Luft um das Motiv ist allemal besser als
   ein abgeschnittenes Produkt. */
.fr-pdp__main-img img { object-fit: contain !important; }
.fr-pdp__main-img { background: #EFE5DB; }

/* Die Miniaturen dürfen weiter füllen, dort geht es nur um
   Wiedererkennung, nicht um Vollständigkeit. */
.fr-pdp__thumb img { object-fit: cover; }

/* ── 8. Preise: Serifen ja, aber mit festen Ziffernbreiten ──
   Die Serif passt zur Marke, sie lässt Preise kuratiert statt
   nach Discounter aussehen. Libre Baskerville setzt Ziffern
   aber proportional: die 1 ist schmaler als die 8. In Listen
   und beim Ändern der Menge springt der Preis dadurch seitlich.
   tabular-nums gibt jeder Ziffer dieselbe Breite, die Serif
   bleibt. */
.fr-price,
.fr-price--was,
.fr-bundle__price,
.fr-mini__price,
.totals__total-value,
.cart-item__price,
.fr-sticky-atc__price,
.fr-sticky-co__price,
.price,
.price-item {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 9. Zwei Folgen der neuen Palette ──────────────────────
   Beide erst nach dem Umstellen sichtbar geworden, beide echt. */

/* Sterne: das helle Sonnengelb kam auf Creme nur auf 1,6 zu 1.
   Sterne sind Symbole, für die 3:1 reicht, aber 1,6 heißt
   praktisch unsichtbar. Ein sattes Bernstein erreicht 3,4 und
   sieht nach Gold aus, nicht nach Warnfarbe. */
.fr-stars__glyphs { color: #A8790B; }

/* Eyebrow-Labels stehen auf farbigen Sektionen. Das Beerenrot
   auf der Blattfläche kam auf 3,4. Auf farbigem Grund trägt
   die Tinte, nicht die Markenfarbe. */
.fr-sec--mint .fr-label,
.fr-sec--pink .fr-label,
.fr-sec--yellow .fr-label { color: var(--fr-ink) !important; }

/* ── 10. Kopfzeile: Logo und Navigation gehören zusammen ────
   Dawn legt die Navigation in eine 795px breite Mittelspalte
   und richtet sie darin **rechts** aus. Ergebnis: 679px Lücke
   zwischen Logo und Menü, aber nur 18px zu den Icons. Das Menü
   klebte an den Icons und das Logo stand verloren links.

   Bei zwei Menüpunkten und einer Wortmarke ist die Gruppe die
   richtige Form: Logo und Navigation links als Einheit, die
   Icons rechts. */
@media (min-width: 990px) {
  .header--middle-left .header__inline-menu {
    justify-self: start;
    margin-left: 26px;
  }
}

/* ── 11. Eine Fluchtlinie für die ganze Seite ───────────────
   Gemessen bei 1400px: Logo bei 143px, aber Hero-Titel, Knopf
   und jede Sektionsüberschrift bei 64px. Der Header lief in
   Dawns `page-width` (max 1200px, zentriert, 50px Padding),
   während der ganze Rest der Seite den Seitenrand `--fr-gutter`
   nutzt. Das Logo stand dadurch 79px weiter innen als alles
   darunter, sichtbar als Knick in der linken Kante.

   Jetzt teilt sich der Header die Kante mit dem Inhalt. */
.header.page-width {
  max-width: none;
  /* !important, weil Dawn das Padding in einer späteren Media
     Query auf 5rem setzt und sonst gewinnt. */
  padding-left: var(--fr-gutter) !important;
  padding-right: var(--fr-gutter) !important;
}

/* Dawn vergrößert den Klickbereich des Logos mit
   margin-left:-7.5px plus padding-left:7.5px. Das zieht den
   sichtbaren Text um 7,5px nach links aus der Flucht. Der Text
   selbst ist mit 153x39px reichlich groß als Ziel, das Polster
   kann weg. Dasselbe rechts bei den Icons (8px padding). */
.header__heading-link { margin-left: 0 !important; padding-left: 0 !important; }
.header__icons { padding-right: 0 !important; }

/* Die Ankündigungsleiste darüber gehört zur selben Flucht */
.announcement-bar__message,
.utility-bar .page-width { padding-left: var(--fr-gutter); padding-right: var(--fr-gutter); }

/* ══ HERO MIT VIDEO, HELLE FASSUNG (28.8.) ═════════════════
   Das Schleifen-Video ist cremefarben und hell (Helligkeit 235
   von 255 in der linken Bildhälfte, wo der Text steht). Der
   bisherige helle Text auf dunklem Schleier wäre darauf
   unsichtbar. Also dreht sich die Logik: dunkler Text, kein
   Schleier, das Video in voller Helligkeit.

   Auf dem Handy läuft kein Video, dort trägt weiter das Bild.
   Niemand soll über Mobilfunk 3,8 MB für Dekoration laden. */
.fr-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: none;                 /* erst ab Tablet, siehe unten */
}
@media (min-width: 750px) {
  .fr-hero--light .fr-hero__video { display: block; }
  /* Das Standbild wäre sonst darüber: es steht im Markup nach
     dem Video und teilt sich dessen Ebene. Ab Tablet trägt das
     Video allein, darunter bleibt das Bild der Grund. */
  .fr-hero--light .fr-hero__bg { display: none !important; }
}
/* Ruhiger Grund, solange das Video noch lädt */
.fr-hero--light { background: var(--fr-cream); }

/* Kein Schleier mehr, das Video ist hell genug für sich */
.fr-hero--light .fr-hero__scrim {
  background: linear-gradient(
    to right,
    rgba(245,239,230,.92) 0%,
    rgba(245,239,230,.72) 38%,
    rgba(245,239,230,0) 62%
  );
}

/* Text dreht von hell auf dunkel */
.fr-hero--light .fr-hero__h1,
.fr-hero--light .fr-logo--hero { color: var(--fr-ink); }
.fr-hero--light .fr-hero__sub { color: #4A4139; }
.fr-hero--light .fr-hero__sublink {
  color: var(--fr-ink);
  opacity: .78;
}
.fr-hero--light .fr-hero__sublink:hover { opacity: 1; color: var(--fr-ink); }
.fr-hero--light .fr-tagline {
  color: var(--fr-mint-dk);
  background: rgba(255,255,255,.72);
  border-color: rgba(61,107,38,.35);
}
.fr-hero--light .fr-hero__price { color: var(--fr-ink); }
.fr-hero--light .fr-stars__count { color: #4A4139; }

/* Die Kachelregeln für den hellen Hero sind hier raus: die
   Kacheln sitzen seit dem Umbau nicht mehr im Hero, sondern im
   eigenen Band darunter. Ihre Gestaltung steht beim Band. */

@media (prefers-reduced-motion: reduce) {
  .fr-hero__video { display: none !important; }
}

/* Auf dem Handy steht der Text oben und das Motiv füllt die
   ganze Breite: dort muss der helle Schleier von oben nach
   unten verlaufen, nicht von links nach rechts. Sonst läuft
   die Unterzeile über die Erdbeere und verliert den Kontrast. */
@media (max-width: 749px) {
  .fr-hero--light .fr-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(245,239,230,.95) 0%,
      rgba(245,239,230,.90) 42%,
      rgba(245,239,230,.62) 72%,
      rgba(245,239,230,.35) 100%
    );
  }
}

/* ══ SORTIMENTSBAND UNTER DEM HERO ═════════════════════════
   Zweiter Anlauf (28.8.). Der erste machte aus den Kacheln
   weiße Karten mit Rahmen und Schatten — sechs kleine Objekte,
   die unter dem Hero schwebten und mit dem Produktraster
   weiter unten um dieselbe Aufmerksamkeit kämpften.

   Glossier löst genau diese Stelle anders: die Kategorieleiste
   dort ist nur gut 400px hoch, die Produkte stehen frei auf der
   Grundfarbe, kein Rahmen, kein Schatten, der Name klein
   darunter. Das liest sich als Navigation, nicht als zweites
   Schaufenster. Dazu eine Zeile Kontext links und ein Textlink
   rechts — so ist es ein Seitenelement mit Auftrag statt einer
   Reihe, die einfach da ist.

   Von Wild kommt die Wärme: der Streifen sitzt auf einem
   eigenen, etwas tieferen Ton, damit er sich vom Hero absetzt,
   ohne eine harte Kante zu ziehen. */
.fr-hero__strip {
  background: var(--fr-photo);
  padding: 26px 0 30px;
}
.fr-hero__strip-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--fr-gutter);
  margin-bottom: 16px;
}
.fr-hero__strip-hd h2 {
  font-family: var(--fr-display);
  font-weight: 700;
  font-size: var(--fr-t-md);
  line-height: 1.2;
  color: var(--fr-ink);
  margin: 0;
}
/* Der Pfeil ist von Wild: dort trägt ihn jeder Handlungslink.
   Er kostet nichts und sagt „hier geht es weiter“ deutlicher
   als eine Unterstreichung. */
.fr-hero__strip-all {
  font-size: var(--fr-t-base);
  font-weight: 600;
  color: var(--fr-pink-dk);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fr-hero__strip-all::after {
  content: '→';
  transition: transform .2s ease;
}
.fr-hero__strip-all:hover::after { transform: translateX(3px); }

.fr-hero__strip .fr-hero__tiles {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Linksbündig, nicht zentriert: die Überschrift darüber sitzt
     auf der Fluchtlinie der Seite, zentrierte Kacheln würden
     daneben anfangen und die Kante brechen. */
  justify-content: flex-start;
  max-width: none;
  width: 100%;
  padding: 0 var(--fr-gutter);
}
.fr-hero__strip .fr-hero__tiles::-webkit-scrollbar { display: none; }

.fr-hero__strip .fr-hero__tile {
  flex: 0 0 auto;
  width: 132px;
  padding: 8px 6px 10px;
  /* Kein Kasten mehr: kein Hintergrund, kein Rahmen, kein
     Schatten. Das Produktfoto trägt die Kachel allein. */
  background: none;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1);
}
.fr-hero__strip .fr-hero__tile:hover { transform: translateY(-4px); }
.fr-hero__strip .fr-hero__tile:active { transform: scale(.97); }
.fr-hero__strip .fr-hero__tile img {
  width: 96px; height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  /* Kein mix-blend-mode: multiply hier. Der Fotogrund ist nicht
     weiß, sondern creme (#F1EADE). Multiply hätte ihn auf
     241x237/255 = 224 abgedunkelt und damit genau den Kasten
     erzeugt, den es wegnehmen sollte. Die Fläche trägt jetzt
     stattdessen exakt den Fotoward, siehe --fr-photo. */
}
.fr-hero__strip .fr-hero__tile span {
  font-family: var(--fr-display);
  font-weight: 700;
  font-size: var(--fr-t-sm);
  line-height: 1.25;
  color: var(--fr-ink);
  display: block;
}

@media (max-width: 749px) {
  .fr-hero__strip { padding: 22px 0 24px; }
  .fr-hero__strip-hd { margin-bottom: 12px; }
  .fr-hero__strip-hd h2 { font-size: var(--fr-t-base); }
  .fr-hero__strip .fr-hero__tiles {
    justify-content: flex-start;
    width: auto;
    scroll-snap-type: x mandatory;
    /* Ohne das snappt der Browser beim Laden auf die erste
       Kachel und scrollt dabei das linke Polster weg. */
    scroll-padding-left: var(--fr-gutter);
  }
  .fr-hero__strip .fr-hero__tile { width: 108px; scroll-snap-align: start; }
  .fr-hero__strip .fr-hero__tile img { width: 78px; height: 78px; }
}

/* Der Hero ist jetzt einspaltig: der Text links, rechts das Video */
@media (min-width: 990px) {
  .fr-hero { grid-template-columns: 1fr; }
  .fr-hero__left { max-width: 620px; }
}

@media (max-width: 749px) {
  .fr-hero__strip { padding: 14px 0 16px; }
  .fr-hero__strip .fr-hero__tiles {
    justify-content: flex-start;
    /* width:100% plus padding sprengte die Box, deshalb hier
       auto: so hält die erste Kachel die Fluchtlinie der Seite. */
    width: auto;
    padding: 0 var(--fr-gutter);
    scroll-snap-type: x mandatory;
    /* Ohne das snappt der Browser beim Laden auf die erste
       Kachel und scrollt dabei das linke Polster weg. */
    scroll-padding-left: var(--fr-gutter);
  }
  .fr-hero__strip .fr-hero__tile { width: 104px; scroll-snap-align: start; }
  .fr-hero__strip .fr-hero__tile img { width: 62px; height: 62px; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLLEFFEKTE OHNE HAUPTTHREAD (28.8.)
   ──────────────────────────────────────────────────────────────
   Bis hierher liefen die Einblender über IntersectionObserver
   plus CSS-Transition, der Hero-Parallax über einen
   scroll-Handler. Der Handler ist raus (siehe frubbies-ux.js),
   die Einblender bekommen hier einen zweiten, besseren Weg:

   `animation-timeline: view()` koppelt eine Animation direkt an
   die Scrollposition des Elements. Der Browser rechnet das auf
   dem Compositor, nicht im Hauptthread. Es kann deshalb gar
   nicht haken, auch nicht beim Momentum-Scrolling auf dem
   iPhone, und es läuft weiter, während JavaScript beschäftigt
   ist. Genau der Effekt, der mobil bisher gefehlt hat.

   Browser ohne Unterstützung fallen auf den JS-Weg zurück;
   frubbies-ux.js prüft dasselbe Feature und hält sich raus,
   wenn CSS es selbst kann.
   ══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

  /* Der JS-Weg wird hier komplett neutralisiert. Ohne das
     säßen beide Mechaniken auf denselben Elementen. */
  .fr-rise { opacity: 1; transform: none; transition: none; }

  @keyframes fr-auftauchen {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  .fr-sec-hd, .fr-card, .fr-bundle, .fr-ugc__item, .fr-video-copy,
  .fr-video-frame, .fr-editorial__img, .fr-editorial__text,
  .fr-gift__copy, .fr-gift__media, .fr-perk, .fr-compare,
  .fr-faq__item, .fr-hero__tile {
    animation: fr-auftauchen linear both;
    animation-timeline: view();
    /* Startet, sobald 4% des Elements im Bild sind, fertig bei
       18% Bilddurchlauf. Kurz genug, dass nichts „nachhinkt“. */
    animation-range: entry 4% cover 18%;
  }

  /* Bilder in Redaktionsflächen atmen beim Durchscrollen leicht.
     Von Glossier abgeschaut: dort bewegt sich das Bild ein
     Stück langsamer als die Seite, ohne echten Parallax. */
  @keyframes fr-atmen {
    from { transform: scale(1.06) translateY(-1.2%); }
    to   { transform: scale(1.06) translateY(1.2%); }
  }
  .fr-editorial__img img, .fr-video-frame img, .fr-gift__media img {
    animation: fr-atmen linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }

  /* Der Fortschrittsbalken oben: wächst mit der Scrollposition
     des Dokuments. Kostet null JavaScript. */
  .fr-fortschritt {
    animation: fr-fuellen linear both;
    animation-timeline: scroll(root);
  }
  @keyframes fr-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Dünner Fortschrittsbalken direkt unter dem Header. Wild und
   Glossier haben ihn beide nicht, aber er gibt auf einer langen
   Seite Orientierung und wirkt teuer, weil er absolut flüssig
   läuft. Ohne scroll()-Unterstützung bleibt er unsichtbar,
   statt falsch dazustehen. */
.fr-fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--fr-pink-dk);
  /* Ausgangszustand ist die Breite null. Kann der Browser
     scroll() nicht, bleibt er genau so und ist damit
     unsichtbar — ganz ohne display-Umschaltung, um die sich
     zwei Regeln streiten könnten. */
  transform: scaleX(0);
  transform-origin: 0 50%; z-index: 60;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fr-fortschritt { animation: none; }
  @supports (animation-timeline: view()) {
    .fr-sec-hd, .fr-card, .fr-bundle, .fr-ugc__item, .fr-video-copy,
    .fr-video-frame, .fr-editorial__img, .fr-editorial__text,
    .fr-gift__copy, .fr-gift__media, .fr-perk, .fr-compare,
    .fr-faq__item, .fr-hero__tile,
    .fr-editorial__img img, .fr-video-frame img, .fr-gift__media img {
      animation: none;
    }
  }
}

/* ── DAWNS EIGENE GRÖSSEN AUF DIE SKALA ───────────────────
   Zwei Stellen bringt Dawn selbst mit und sie fielen beim
   Messen als einzige aus der Reihe: das Menü im mobilen
   Schubfach (18px) und die Formularlabels in Suche und
   Newsletter (16px). Beide sind sichtbarer Text, also gehören
   sie in dieselbe Skala wie alles andere.

   Die unsichtbaren Screenreader-Texte (.visually-hidden, 14px)
   bleiben, wie sie sind: sie werden nie dargestellt, und ihre
   Größe zu ändern brächte niemandem etwas. */
.menu-drawer__menu-item { font-size: var(--fr-t-md); }
.field__label { font-size: var(--fr-t-base); }
/* Dawns Fußzeilenlinks (FAQ, Contact, Wholesale) brachten mit
   14px die letzte fremde Größe mit. */
.list-menu__item.link--text { font-size: var(--fr-t-base); }

/* Die Kollektionsseite läuft über Dawns eigene Produktkarten,
   nicht über .fr-card. Dort stand der Produktname auf 12px und
   der Preis auf 16px: der Name war also kleiner als sein Preis,
   obwohl er die Hauptsache auf einer Übersichtsseite ist. Beide
   kommen auf dieselbe Stufe, der Name in der Auszeichnungs-
   schrift wie überall sonst auf der Seite. */
.card__heading .full-unstyled-link {
  font-family: var(--fr-display);
  font-weight: 700;
  font-size: var(--fr-t-md);
  letter-spacing: -.2px;
}
.price-item { font-size: var(--fr-t-md); }
.facets__label, .mobile-facets__heading, .product-count__text,
.facets-container .product-count span { font-size: var(--fr-t-sm); }
/* Dawns eigene Regel für die Überschrift im Filterschubfach ist
   spezifischer als eine Klasse allein, deshalb hier mit Elternteil. */
.mobile-facets__header .mobile-facets__heading { font-size: var(--fr-t-md); }
/* Das Sortierfeld ist ein natives select und bringt seine eigene
   Größe mit. */
.facet-filters__field select, .select__select { font-size: var(--fr-t-base); }

/* ══════════════════════════════════════════════════════════════
   WARENKORB-DRAWER: POSITIONEN VERDICHTEN (28.8.)
   ──────────────────────────────────────────────────────────────
   Ausgangslage: eine Position war 175px hoch, die Liste zeigt
   377px. Zwei Artikel füllten sie damit fast komplett, und für
   alles andere blieb kein Platz. Genau deshalb waren Upsell und
   Sammelreihe vorher aus dem Drawer verbannt worden — der
   Platzmangel war aber nicht die Ursache, sondern die Folge.

   Dawn legt den Mengenwähler in eine eigene Zeile über die volle
   Breite. Diese Zeile allein kostet 56px pro Position, obwohl
   rechts neben dem Bild reichlich Platz frei ist. Sie wandert
   hier nach oben neben das Bild, das den Raum ohnehin schon
   vorhält.

   Was NICHT kleiner wird: die Knöpfe. Mengenwähler und
   Papierkorb bleiben bei 44px, der Größe, die ein Finger sicher
   trifft. Verdichtet wird der leere Raum, nicht die Bedienung.
   ══════════════════════════════════════════════════════════════ */

/* Die Selektoren tragen hier drei Klassen, weil Dawns eigene
   Regeln (.cart-drawer .cart-items .cart-item__quantity) genauso
   spezifisch sind. Bei Gleichstand entscheidet die Reihenfolge,
   und frubbies.css wird nach Dawns Dateien geladen. */
.cart-drawer .cart-items .cart-item {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 6px 12px;
  align-items: start;
  padding: 12px 0 6px;
}
.cart-drawer .cart-items .cart-item__media {
  grid-column: 1; grid-row: 1 / 3;
  width: 72px;
  padding-top: 0;
}
.cart-drawer .cart-items .cart-item__image {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 12px;
  /* Der Fotoward, damit das Bild auch hier randlos aufgeht. */
  background: var(--fr-photo);
}
.cart-drawer .cart-items .cart-item__details {
  grid-column: 2; grid-row: 1;
  align-self: center;
  padding: 0;
}
.cart-drawer .cart-items .cart-item__totals {
  grid-column: 3; grid-row: 1;
  align-self: center;
  padding: 0;
}
.cart-drawer .cart-items .cart-item__quantity {
  grid-column: 2 / 4; grid-row: 2;
  padding: 0;
}

/* Titel und Preis dichter setzen: die Zeilenhöhe war auf
   Fließtext ausgelegt, hier stehen einzelne Wörter. */
.cart-drawer .cart-items .cart-item__name {
  font-size: var(--fr-t-base);
  line-height: 1.25;
  margin-bottom: 2px;
}
.cart-drawer .cart-items .cart-item__price-wrapper { line-height: 1.25; }

/* Der Rabatthinweis stand als eigener Absatz mit 36px Höhe unter
   dem Preis. Als flaches Abzeichen sagt er dasselbe in einer
   Zeile und liest sich zugleich wie eine Belohnung. */
.cart-drawer .cart-items .discounts { margin-top: 4px; }
.cart-drawer .cart-items .discounts__discount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fr-t-xs);
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--fr-mint-lt);
  color: var(--fr-on-mint);
}
.cart-drawer .cart-items .discounts__discount svg { display: none; }

/* Menge und Papierkorb in einer Zeile, beide groß genug zum
   Treffen. Der Papierkorb bekommt eine sichtbare Fläche: vorher
   war er ein schmales Symbol ohne Rand, das man suchen musste. */
.cart-drawer .cart-items .cart-item__quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-drawer .cart-items quantity-input.quantity {
  width: auto;
  min-width: 118px;
  height: 44px;
}
.cart-drawer .cart-items .quantity__button {
  width: 40px;
  height: 44px;
}
.cart-drawer .cart-items .quantity__input {
  font-size: var(--fr-t-base);
  padding: 0 2px;
}
.cart-drawer .cart-items cart-remove-button {
  width: 44px; height: 44px;
  margin: 0;
}
.cart-drawer .cart-items cart-remove-button .button {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--fr-surface);
  transition: background .18s ease, color .18s ease;
}
.cart-drawer .cart-items cart-remove-button .button:hover {
  background: var(--fr-pink-lt);
  color: var(--fr-pink-dk);
}
.cart-drawer .cart-items cart-remove-button .button:focus-visible {
  outline: 3px solid var(--fr-pink-dk);
  outline-offset: 2px;
}
.cart-drawer .cart-items cart-remove-button .icon-remove {
  width: 17px; height: 17px;
}

/* ── VERSANDBALKEN IM DRAWER ──────────────────────────────────
   Im Drawer zählt jede Zeile, deshalb sitzt er hier dichter als
   auf der Warenkorbseite: 83px waren für eine Fortschrittszeile
   zu viel, wenn dieselben Pixel der Positionsliste fehlen.

   Dafür wird er deutlicher. Die Bahn ist höher und trägt am Ende
   ein Ziel, damit sichtbar ist, worauf der Balken zuläuft. Ein
   Fortschritt ohne sichtbares Ziel ist nur ein Streifen. */
.cart-drawer .fr-ship {
  padding: 10px 16px 12px;
}
.cart-drawer .fr-ship__msg {
  margin-bottom: 6px;
}
.cart-drawer .fr-ship__track {
  height: 10px;
  position: relative;
  /* Platz rechts für das Ziel, damit die Füllung nicht darunter
     durchläuft. */
  margin-right: 22px;
  overflow: visible;
}
.cart-drawer .fr-ship__track::after {
  content: '📦';
  position: absolute;
  right: -22px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1);
  opacity: .45;
  transition: filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cart-drawer .fr-ship__track:has(.is-complete)::after {
  filter: none;
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}
.cart-drawer .fr-ship__fill {
  border-radius: 100px;
}

/* Die Sammelreihe braucht etwas Luft zur Positionsliste, sonst
   klebt sie am letzten Artikel und wirkt wie ein Teil davon. */
.cart-drawer .fr-collect--compact {
  margin: 8px 16px 10px;
}

/* ── LETZTE ZEILEN IM DRAWER ──────────────────────────────────
   Nach dem Umbau blieben zwei Stellen, an denen ungenutzte Höhe
   steckte. Zusammen sind es rund 45px, und genau die entscheiden
   darüber, ob zwei Artikel samt Mengenwähler vollständig im Bild
   stehen oder ob die zweite Position angeschnitten ist. */

/* Die Mengenzeile war 56px hoch, obwohl der Wähler 44px braucht.
   Die Differenz war Luft, die niemand sieht. */
.cart-drawer .cart-items .cart-item__quantity-wrapper {
  height: 44px;
}
.cart-drawer .cart-items quantity-input.quantity,
.cart-drawer .cart-items .quantity {
  height: 44px;
  min-height: 44px;
}

/* Der Steuerhinweis unter der Summe lief über zwei Zeilen und
   kostete damit mehr Platz als die Summe selbst. Er muss da
   stehen, aber er muss nicht so laut sein. */
.cart-drawer .totals { margin-bottom: 4px; }
.cart-drawer .tax-note {
  font-size: var(--fr-t-xs);
  line-height: 1.35;
  margin: 4px 0 10px;
  color: var(--fr-muted);
}
.cart-drawer .drawer__footer { padding: 12px 0 14px; }

/* Preis und Rabatt-Abzeichen standen untereinander und kosteten
   damit eine ganze Zeile pro Position. Nebeneinander sagen sie
   dasselbe: der reduzierte Preis und woher die Reduktion kommt
   gehören ohnehin zusammen. Bricht das Abzeichen bei langen
   Rabattnamen doch um, steht es wie vorher darunter. */
.cart-drawer .cart-items .cart-item__details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
/* Der Produktname steht in .cart-item__title, nicht in
   .cart-item__name. Er bekommt die ganze Breite: er ist die
   wichtigste Angabe der Position und soll nicht am Preis
   kleben. Preis und Rabatt-Abzeichen teilen sich die Zeile
   darunter. */
.cart-drawer .cart-items .cart-item__title { flex: 1 0 100%; }
.cart-drawer .cart-items .discounts { margin-top: 0; }

/* Die Mengenzeile lag noch bei 52px statt 44. */
.cart-drawer .cart-items .cart-item__quantity,
.cart-drawer .cart-items .cart-item__quantity-wrapper {
  height: 44px;
  min-height: 0;
}
.cart-drawer .cart-items .cart-item__quantity > * { margin: 0; }

/* ── PAPIERKORB NEBEN DIE MENGE, AUCH AUF DEM HANDY ───────────
   Auf schmalen Bildschirmen setzt Dawn den Mengenwähler auf die
   volle Breite. In der neuen Flex-Zeile drängte er den
   Papierkorb damit hinaus, der dann über dem Namen der nächsten
   Position landete. Der Wähler bekommt hier eine feste Breite
   statt der vollen, und der Papierkorb schrumpft nicht mehr weg.

   Die feste Höhe von vorher ist ausserdem eine Mindesthöhe: eine
   feste Höhe schneidet ab, was nicht hineinpasst, statt es
   sichtbar zu lassen. */
.cart-drawer .cart-items .cart-item__quantity,
.cart-drawer .cart-items .cart-item__quantity-wrapper {
  height: auto;
  min-height: 44px;
}
.cart-drawer .cart-items .cart-item__quantity-wrapper {
  flex-wrap: nowrap;
}
.cart-drawer .cart-items quantity-input.quantity,
.cart-drawer .cart-items .cart-item__quantity .quantity {
  flex: 0 1 auto;
  width: 132px;
  min-width: 0;
  max-width: 132px;
}
.cart-drawer .cart-items cart-remove-button {
  flex: 0 0 44px;
}

/* ── EINLAUF DES VERSANDBALKENS ───────────────────────────────
   Die Bewegung lief bis 28.8. in JavaScript und setzte dafür die
   Breite kurz auf null. Beim zweiten Durchlauf las sie diese
   Null als Zielwert und der Balken blieb leer.

   Jetzt bleibt die Breite aus Liquid unangetastet und nur die
   Skalierung wandert. Sie endet bei 1, egal was passiert: eine
   Animation darf nie darüber entscheiden, ob eine Angabe
   stimmt. Sie darf nur entscheiden, wie sie ankommt. */
.fr-ship__fill {
  transform-origin: left center;
  animation: fr-ship-einlauf .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fr-ship-einlauf {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-ship__fill { animation: none; transform: none; }
}

/* ── SCHUTZ GEGEN DIE :empty-REGEL ────────────────────────────
   Im Seitenkontext gilt eine Regel, die leere Elemente
   ausblendet. Sie steht in keinem Stylesheet, das sich auslesen
   lässt, war aber eindeutig messbar: ein leeres div bekommt
   display:none, dasselbe div mit Inhalt nicht.

   Beide Balken der Seite sind von Natur aus leer, sie tragen
   ihre Aussage in Breite und Farbe. Deshalb steht jetzt ein
   leeres span in ihnen, damit sie nicht mehr als leer gelten,
   und hier zusätzlich die Anzeige ausdrücklich.

   Die Selektoren nennen den Elternteil mit, weil eine Regel wie
   `div:empty` aus einem Element und einer Pseudoklasse besteht
   und eine einzelne Klasse allein damit nicht schlagen würde. */
.fr-ship__track .fr-ship__fill { display: block; }
.fr-ship__track .fr-ship__fill > span { display: block; }
body > .fr-fortschritt { display: block; }
body > .fr-fortschritt > span { display: block; }