/** Shopify CDN: Minification failed

Line 5044:86 Expected identifier but found whitespace
Line 5045:13 Unexpected "0.55"

**/
/* ============================================================================
   base.css — DER GROSSE LADEN (Shopify / Dawn-Theme)
   ------------------------------------------------------------------------
   Diese Datei hat ZWEI Bereiche:

     REGION A · DAWN THEME-BASIS
        Standard-Styles des Dawn-Themes. Moeglichst NICHT hier aendern —
        eigene Aenderungen in Region B ablegen, sonst ueberschreibt sie ein
        Theme-Update.

     REGION B · SHOP-ANPASSUNGEN (custom)
        Alle eigenen Anpassungen. HIER weiterarbeiten.
        Reihenfolge = Prioritaet (spaetere Regel gewinnt bei gleicher Spezifitaet).

   NAVIGATION: Jeder Block in Region B hat eine Suchmarke wie [B4].
   Mit Strg/Cmd+F nach z.B. "[B4]" springen.

   INHALT — REGION B
     [B0]  Startseite, Shop-Liste & Banner
     [B1]  Produktseite, Menge & Trenner
     [B2]  Schriftfixierung (Roboto Slab)
     [B3]  Header-Menue & Dropdown
     [B4]  Produktkarten (Karte unter dem Bild)
     [B5]  Suche, Filter & Sortierung
     [B6]  Grid-Hintergrund & Farb-Schemata
     [B7]  Basis-Typografie & Custom-Header
     [B8]  Footer & Rechtstexte
     [B9]  Rich-Text & Image-with-text
     [B10] Produktkarten — Preis, Titel, Badges, Quick-Add
     [B11] „Mehr laden", Footer-Links & Text-Karten
     [B12] Optionen / Varianten (Modal + Produktseite)
     [B13] Suchleiste & mobile Suche
     [B14] Warenkorb
     [B15] Blog
   ============================================================================ */

/* ############################################################################
   DESIGN-TOKENS · Marken-Farben zentral
   ----------------------------------------------------------------------------
   HIER die Farben ändern → wirkt überall. Früher waren diese Werte ~155× als
   rohe Hex/rgba im Code verstreut; jetzt an einer Stelle.
     var(--brand-red)                       = Marken-Dunkelrot
     rgba(var(--brand-red-rgb), <alpha>)    = dasselbe Rot mit Transparenz
     var(--brand-beige)                     = Beige (Flächen/Karten)
     var(--banner-*)                        = Banner-Hintergrund je Seite
   ############################################################################ */
:root {
  --brand-red: #99220A;
  --brand-red-rgb: 153, 34, 10;   /* für rgba(var(--brand-red-rgb), <alpha>) */
  --brand-beige: #FFF5E5;

  --banner-shop: #af6344;         /* Shop / Collection */
  --banner-neues: #8d8b57;        /* Neues */
  --banner-rezepte: #f8de83;      /* Rezepte */
  --banner-ueber-uns: #b6a5d6;    /* Über uns */

  --banner-text-rgb: 40, 40, 40;  /* Banner-Textfarbe (gräulich, mit Alpha) */
}

/* ############################################################################
   REGION A · DAWN THEME-BASIS  (Standard-Theme — moeglichst NICHT aendern)
   Eigene Anpassungen gehoeren in REGION B weiter unten.
   ############################################################################ */

:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

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

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 1100px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 1100px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}


/* ############################################################################
   REGION B · SHOP-ANPASSUNGEN  (custom — HIER weiterarbeiten)
   Reihenfolge = Prioritaet: bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Neue Anpassungen ans Ende des passenden [B..]-Blocks setzen.
   ############################################################################ */

/* ============================================================================
   [B0] · STARTSEITE, SHOP-LISTE & BANNER
   ------------------------------------------------------------------------
   Homepage-Raster, Sektions-Positionen, Shop-Sidebar, Produktkachel-Boxen, Banner-Textur.
   ============================================================================ */

/* Startseite: Inhaltsspalte = der Raster-Anker (--home-width, siehe body.template-index).
   Schmale Sektionen bleiben unberührt. */
.template-index main {
  --page-width: var(--home-width);
}

/* Dekorative Verschiebungen der Startseiten-Blöcke — ALLES IN RASTERZELLEN (var(--cell)).
   Denk in Zellen, nicht in Pixeln: 1 = eine ganze Zelle, 0.5 = halbe, 0.25 = viertel.
   Vorzeichen: x negativ = nach links | y negativ = nach oben.
   WICHTIG: Nur ab der Design-Breite (>=1200px) aktiv — darunter greift das saubere
   Standard-Layout, damit beim Zoomen nichts aus dem Bild läuft. */
/* Beide Bilder der Startseite ("Bild mit Text"): leichte Neigung + Schatten.

   Frueher steckten Neigung UND Schatten in den Bilddateien selbst — die PNGs waren
   bereits gedreht, mit transparenten Ecken und aufgemaltem Schatten. Zwei so gebaute
   Bilder lassen sich nie zur Deckung bringen, sobald eines ausgetauscht wird: gemalte
   Pixel und ein CSS-Schatten treffen sich nur zufaellig. Deshalb liefern jetzt BEIDE
   Bilder das nackte Foto, und Neigung wie Schatten kommen aus dieser einen Regel.
   Damit sind sie zwangslaeufig identisch — es gibt nur noch einen Satz Werte.

   Gedreht wird der MEDIEN-Container, nicht das <img> darin: Der Container hat
   overflow: hidden (.image-with-text .global-media-settings) und beschneidet das Bild
   dadurch sauber auf das gedrehte Rechteck. Laege die Drehung am Bild, ragten dessen
   Ecken aus dem geraden Container und wuerden genau dort abgeschnitten.

   Der Schatten laeuft ueber filter: drop-shadow und nicht ueber box-shadow. Zwei
   fremde Regeln setzen box-shadow an dieser Stelle zurueck — Dawns
   ".image-with-text:not(.image-with-text--overlap) .image-with-text__media-item > *"
   und, mit !important, das ".product__media-item, .product__media-wrapper, .media"
   weiter unten in dieser Datei (gedacht fuer den Rahmen des Produktbildes, trifft aber
   jedes Medienfeld im Theme). filter fasst keine der beiden an. Passend ist es auch
   inhaltlich: drop-shadow folgt der SICHTBAREN Form, also dem gedrehten Rechteck, und
   nicht dem geraden Kasten dahinter.

   Die vierte Klasse .global-media-settings im Selektor ist noetig, damit die Regel
   Dawns gleich spezifische Sektions-Regel schlaegt (die Sektions-Datei wird nach
   base.css geladen und gewaenne sonst bei Gleichstand). Wer den Selektor kuerzt, muss
   das mitbedenken — auch bei der --iwt-y-Regel weiter unten. */
.template-index [id$="image_with_text_kUBfyN"] .image-with-text__media.global-media-settings,
.template-index [id$="image_with_text_ieXj7H"] .image-with-text__media.global-media-settings {
  /* REGLER Schatten — gelten fuer BEIDE Bilder gemeinsam. Genau das ist der Zweck der
     gemeinsamen Regel: Aendert man hier, aendern sich beide im Gleichschritt.
     --iwt-sh-alpha groesser = kraeftiger, --iwt-sh-blur groesser = weicher. */
  --iwt-sh-x: 4px;      /* etwas nach rechts */
  --iwt-sh-y: 9px;      /* hauptsaechlich nach unten */
  --iwt-sh-blur: 12px;
  --iwt-sh-alpha: 0.5;

  /* Versatz beider Bilder, gesetzt in RASTERZELLEN von den Regeln im 1200px-Block
     weiter unten. Hier nur die Grundstellung — steht sie nicht da, faellt die ganze
     transform-Zeile aus, sobald ein Bild nur einen der beiden Werte setzt. */
  --iwt-x: 0px;
  --iwt-y: 0px;
  /* translateZ(0) erzwingt eine GPU-Ebene → die gedrehten Kanten werden glatt
     kantengeglaettet statt treppig gerastert (gleiche Technik wie bei den
     Produktkacheln, siehe .card__inner.ratio weiter unten). */
  transform: translate(var(--iwt-x), var(--iwt-y)) rotate(var(--iwt-rot, 0deg)) translateZ(0);
  backface-visibility: hidden;
  filter: drop-shadow(var(--iwt-sh-x) var(--iwt-sh-y) var(--iwt-sh-blur) rgba(0, 0, 0, var(--iwt-sh-alpha)));
}

/* Nur die Neigung ist pro Bild verschieden — sie war es in den alten Dateien auch, und
   genau das laesst die beiden Bilder zufaellig ausgerichtet wirken. Die Werte sind die
   an den alten PNGs gemessenen. + = im Uhrzeigersinn.
   Gleiche Selektorform wie oben, sonst verlieren diese Zeilen gegen den Standardwert. */
.template-index [id$="image_with_text_kUBfyN"] .image-with-text__media.global-media-settings {
  --iwt-rot: -1deg;
}
.template-index [id$="image_with_text_ieXj7H"] .image-with-text__media.global-media-settings {
  --iwt-rot: 1.5deg;
}

/* ---- Altlast der Datei shop-image.png neutralisieren ----
   In dieser Datei sind Drehung und Schatten eingebackene Pixel: ein um 1 Grad gedrehtes
   Foto (997.9 x 1516.6) auf einer 1082 x 1592 grossen, ringsum transparenten Leinwand,
   auf die der Schatten gemalt ist. Ohne Gegenmassnahme legte die gemeinsame Regel oben
   beides ein zweites Mal darauf: 1 Grad + 1 Grad, und zwei Schatten uebereinander.

   Statt eine bereinigte Datei hochzuladen, erledigt das hier der Browser:
     rotate(1deg) dreht die eingebackene Neigung heraus — das Foto liegt danach gerade
       IM Container, dessen overflow: hidden also genau an den Fotokanten schneidet;
     scale() zoomt so weit, dass das Foto den Container vollstaendig ausfuellt
       (1082 / 997.9 = 1.0843 waere das Minimum, 1.09 gibt etwas Sicherheit gegen
       weiche Kanten). Alles ausserhalb — transparenter Rand samt gemaltem Schatten —
       liegt damit ausserhalb des Containers und wird weggeschnitten;
     translateY() gleicht aus, dass das Foto nicht mittig auf der Leinwand sitzt
       (Fotomitte y=775.1 statt 796 → 1.31 % der Hoehe, mal dem Zoom).
   Uebrig bleibt das nackte Foto — und darauf wirken Neigung und Schatten der
   gemeinsamen Regel, genau wie beim zweiten Bild.

   Preis dafuer: rund 8 % Bildrand gehen durch den Zoom verloren. Wer das nicht will,
   laedt das Foto ohne eingebackene Effekte neu hoch und loescht diesen Block. */
.template-index [id$="image_with_text_kUBfyN"] .image-with-text__media.global-media-settings img {
  transform-origin: center center;
  transform: translateY(1.43%) scale(1.09) rotate(1deg);
}

@media screen and (min-width: 1200px) {
  /* "Das Leben zusammen größer machen" – Textbox positionieren + auf Textgröße schrumpfen.
     padding: 0 entfernt den Leerraum drumherum.
     height/align-self/width: Container legt sich eng um den Text statt auf volle Bildhöhe/Spaltenbreite. */
  .template-index [id$="image_with_text_ieXj7H"].image-with-text__content {
    transform: translate(calc(var(--cell) * -1.25), calc(var(--cell) * 0.25));
    padding: 0;
    height: auto;
    align-self: flex-start;
    /* Breite = 5 GANZE Rasterzellen → linke und rechte Kante liegen auf Rasterlinien.
       Die "5" für breiter/schmaler ändern – immer ganzzahlig. */
    width: calc(var(--cell) * 5);
    max-width: 100%;
  }

  /* "Das Leben zusammen größer machen" – Bild nach unten versetzen. Bewusst nur die
     Variable und NICHT transform: die Neigung oben wuerde sonst verlorengehen. */
  /* Ladenfoto unten — Versatz in Rasterzellen. Negativ = links bzw. oben. */
  .template-index [id$="image_with_text_ieXj7H"] .image-with-text__media.global-media-settings {
    --iwt-x: calc(var(--cell) * -0.2);
    --iwt-y: calc(var(--cell) * 0.15);
  }

  /* Ladenfoto oben — Versatz in Rasterzellen. Negativ = nach links bzw. nach oben. */
  .template-index [id$="image_with_text_kUBfyN"] .image-with-text__media.global-media-settings {
    --iwt-x: calc(var(--cell) * -0.2);
    --iwt-y: calc(var(--cell) * -0.1);
  }

  /* Kontakt/Öffnungszeiten (Rich-Text) – Textblock nach links/oben versetzen. */
  .template-index [id$="rich_text_LUwJty"] .rich-text__blocks {
    transform: translate(calc(var(--cell) * -0.25), calc(var(--cell) * -0.5));
  }
}

/* Shop-Sidebar (Kategorien) – Breite und Versatz in Rasterzellen (var(--cell)). */
.template-collection .collection-sidebar {
  flex: 0 0 calc(var(--cell) * 2) !important;  /* Sidebar = 2 Rasterzellen */
  min-width: 0 !important;                      /* nicht durch langen Text breiter werden */
  /* REGLER Position, beide in ZELLEN:
       --sidebar-y: nach unten (0 = das Menü beginnt oben auf Höhe der Filter-/Titelleiste,
                    also "in der dafür vorgesehenen Box"; vorher 1.5 = neben der 1. Kachelreihe)
       --sidebar-x: negativ = weiter nach links aus der Rasterspalte heraus
     Nur diese zwei Zahlen anfassen. */
  --sidebar-y: 0;
  --sidebar-x: -0.5;
  transform: translate(calc(var(--cell) * var(--sidebar-x)), calc(var(--cell) * var(--sidebar-y)));
  box-shadow: none !important;
  border: none !important;
}
.template-collection .collection-sidebar:hover {
  box-shadow: none !important;
}

/* Shop-Layout in Rasterzellen: Container = 14 Zellen
   (Sidebar 2 + Lücke 1 + 3×[Kachel 3 + Lücke 1]). Feste max-width, damit die Zellgröße
   nicht zirkulär von sich selbst abhängt; padding 0, damit der Inhalt exakt 14 Zellen
   breit ist und auf die Rasterlinien passt. */
.template-collection .collection-with-sidebar.page-width {
  max-width: var(--shop-width);   /* einziger Anker – siehe body.template-collection */
  padding-left: 0;
  padding-right: 0;
  /* Gesamten Shop-Inhalt um 1 Rasterzelle nach links rücken.
     Das Raster ist hier verankert und wandert mit — da es periodisch ist (Muster wiederholt
     sich alle 1 Zelle), sieht es unverändert aus, während der Inhalt sichtbar 1 Zelle
     nach links rückt. Wert in ganzen Zellen anpassen (-2 = zwei Zellen usw.). */
  transform: translateX(calc(var(--cell) * -1));
}
.template-collection .collection-with-sidebar {
  gap: var(--cell) !important;    /* Lücke Sidebar↔Produkte = 1 Zelle */
}

/* ================= Shop-Produktkacheln: BOX-KONZEPT (raster-relativ) =================
   Jede Kachel ist eine unsichtbare, quadratische Box = 3 Rasterzellen breit (var(--cell)).
   NUR diese Box bricht das Raster (grid-background.js blockiert ausschließlich .product-card-wrapper).
   Bild, Titel, Preis, Marke, Bio-Logo und Hover-Buttons liegen frei DARAUF – ihre Geometrie ist
   in cqw (% der Box) definiert, skaliert also mit der Kachel mit.
   Layout: 3 Boxen pro Reihe, je 1 Zelle Lücke horizontal + vertikal → das Raster läuft sauber
   zwischen den Boxen durch. Größe ändern: --cell (in body.template-collection) bzw. Container-max-width. */
.template-collection .product-grid {
  --grid-desktop-horizontal-spacing: var(--cell) !important;  /* Lücke zwischen Kacheln = 1 Zelle */
  /* Vertikale Lücke kompensiert das Wachstum der Box, damit die Reihen NICHT länger werden:
     Die Box ist quadratisch und 3 Zellen × --card-box-scale hoch, wächst also um
     3 × (scale − 1) Zellen. Genau das ziehen wir von der 1-Zellen-Lücke ab.
     → Reihen-Raster bleibt exakt 4 Zellen (Box + Lücke), egal wie scale eingestellt ist. */
  --grid-desktop-vertical-spacing: calc(var(--cell) * (1 - 3 * (var(--card-box-scale) - 1))) !important;
  justify-content: flex-start !important;
  /* Alle Kacheln gemeinsam nach unten rücken (Abstand zur Filterleiste).
     In Zellen gedacht: 0.5 = halbe Zelle, 1 = ganze. Negativ = nach oben. */
  margin-top: calc(var(--cell) * 0.5);
  /* Dawn gibt dem <ul class="grid"> 2rem margin-bottom (base.css ~946). Das würde die
     Zellen-Rechnung darunter verfälschen und mit anderen Margins verschmelzen → auf 0. */
  margin-bottom: 0;
}
.template-collection .product-grid > li,
.template-collection .product-grid .grid__item {
  /* Kachel = 3 Rasterzellen breit. Produktbereich = 11 Zellen = 3×3 + 2×1 (Lücken)
     → genau 3 Kacheln pro Reihe, alle Kanten auf Rasterlinien. */
  flex: 0 0 calc(var(--cell) * 3) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ---- Shop-Kacheln außerhalb der Shop-Seite (z. B. „Das könnte Ihnen auch gefallen") ----
   Die komplette Kachel-GESTALTUNG oben gilt über :is(.template-collection, .shop-tiles)
   automatisch mit — sie ist durchgehend container-relativ (cqw) und passt sich damit jeder
   Kachelbreite an, ohne dass eine Regel doppelt gepflegt werden muss.
   Nur das RASTER-Layout ist shop-spezifisch: es rechnet in --cell, und --cell hat auf anderen
   Seiten eine andere Größe (dort Seitenbreite ÷ 10 statt ÷ 14). Deshalb hier dieselben
   Proportionen in Prozent nachgebaut:
     Shop: Kachel = 3 Zellen, Lücke = 1 Zelle. Für 3 Kacheln pro Reihe gilt
     3·K + 2·L = 100 % mit L = K/3  →  K = 27,27 %, L = 9,09 %.
   Die Spaltenbreite rechnet Dawn selbst (33,33 % − Lücke × 2/3), es genügt also die Lücke. */
.shop-tiles {
  --card-box-scale: 1.15;   /* wie im Shop: die Box ragt in die Lücken */
}
/* ---- Vier Kacheln je Reihe, OHNE die Kacheln zu verkleinern ----
   Benutzt auf der Rezeptseite („Verwendete Produkte“).

   Die Spalte muss schmaler werden, daran fuehrt kein Weg vorbei: Vier Kacheln in der
   Breite von dreien gehen nur, wenn jede Spalte schmaler wird. Das SICHTBARE der Kachel
   ist aber nicht die Spalte, sondern das Bild — und dessen Groesse haengt an --img-size,
   einem Prozentwert der Box. Wird die Spalte schmaler und --img-size im gleichen Verhaeltnis
   groesser, bleibt das Bild exakt gleich gross und es schrumpfen nur die Abstaende.

   Die Rechnung, alles in Prozent der Rasterbreite:
     drei Spalten  K = 27,27 %  Box = K × 1,15 = 31,36 %  Bild = 60 % davon    = 18,82 %
     vier Spalten  L = 4 %  →  K = 25 − 0,75·L = 22 %     Box = 25,3 %
                   Bild soll wieder 18,82 % sein  →  18,82 / 25,3 = 74,4 %

   Die Formel liefert nur den Startwert; der eingetragene 71,1 ist NACHGEMESSEN. Aus 74,4
   wurden gerenderte 159 px statt der 149 px von vorher — die Rechnung trifft die
   Boxgeometrie also nicht auf den Punkt (Rundung von cqw und der Container-Groesse).
   Zwei Schritte am gerenderten Bild ergaben 71,1 → 150 px. Gemessen wird der weisse
   Bildkasten bei 1440 px Fensterbreite; das ist der verlaessliche Massstab, nicht die Formel.

   Ergebnis gegenueber dem Dreispalter: Bild 149 → 150 px (unveraendert), Abstand zwischen
   den Bildern 250 → 137 px.
   Der Abstand zwischen den Bildern faellt dadurch von 17,5 % auf 7,2 % der Breite — genau
   das war die Vorgabe: gleich grosse Kacheln, enger beieinander.

   Warum die Luecke 4 % und nicht 0: Die Box ist 15 % breiter als ihre Spalte (--card-box-scale)
   und traegt den Text. Unter L = 0,15·K = 3,3 % wuerden benachbarte Boxen einander
   ueberlappen und lange Titel sich beruehren. 4 % ist der naechste runde Wert darueber. */
.shop-tiles .product-grid.grid--4-col-desktop {
  --grid-desktop-horizontal-spacing: 4%;
}
.shop-tiles .product-grid.grid--4-col-desktop .product-card-wrapper {
  --img-size: 71.1cqw;
}
.shop-tiles .product-grid {
  --grid-desktop-horizontal-spacing: 9.09%;
  /* bewusst feste Länge statt %: ein Prozentwert im row-gap bezieht sich auf eine
     unbestimmte Höhe und ergäbe 0. Bei 3 Produkten ohnehin nur eine Reihe. */
  --grid-desktop-vertical-spacing: 3rem;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Das Bild ist klickbar (→ Produktdetailseite); die Logik dazu steht in layout/theme.liquid
   und arbeitet über die Geometrie des Bildrechtecks. Hier nur der Mauszeiger als Hinweis
   darauf, dass die Fläche klickbar ist. */
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__inner.ratio {
  cursor: pointer;
}

/* Rasterfeld unter den Empfehlungen: Vorher standen dort 28px aus den Section-Einstellungen —
   zu wenig, als dass das Hintergrundraster sichtbar durchlaufen könnte, bevor der Footer es
   hart abschneidet (HARD_CLIP_SELECTORS in grid-background.js). Jetzt in RASTERZELLEN gedacht
   wie im Shop, damit der Abstand beim Zoomen mitskaliert und rasterbündig bleibt.
     REGLER --tiles-bottom: Anzahl Zellen (1 = ein Rasterfeld, 1.5 = anderthalb).
   Zwei Klassen, damit die Regel das px-Padding der Section (1 Klasse, lädt später) schlägt.
   Fallback 120px, falls grid-background.js --cell noch nicht gesetzt hat. */
.related-products.shop-tiles {
  --tiles-bottom: 1;
  padding-bottom: calc(var(--cell, 120px) * var(--tiles-bottom));
}

/* Die Box füllt die Kachel-Zelle (3 Zellen) und bleibt quadratisch → skaliert mit der
   Rastergröße. container-type: size macht die Box zur Bezugsgröße für die cqw-Werte im Inneren.
   HINWEIS: Ab hier KEIN !important mehr nötig — Dawns .card*-Komponente nutzt 0× !important,
   und diese 3–4-Klassen-Selektoren (.template-collection .product-card-wrapper .card…) schlagen
   Dawn ohnehin per Spezifität. (Struktur-!important nur oben an Grid-Abständen + Kachelbreite.) */
:is(.template-collection, .shop-tiles) .product-card-wrapper {
  /* Box wächst symmetrisch in die Lücken hinein (negatives margin zentriert den Überstand).
     Regler --card-box-scale steht in body.template-collection, weil ihn auch das
     Produktraster braucht (es rechnet die vertikale Lücke daraus).
     ACHTUNG: Die Box ist die cqw-Bezugsgröße – wird sie größer, skaliert ALLES
     in ihr (Bild, Textabstand) automatisch mit. */
  width: calc(100% * var(--card-box-scale));
  margin-left: calc((100% - 100% * var(--card-box-scale)) / 2);
  aspect-ratio: 1 / 1;
  height: auto;
  container-type: size;
  position: relative;
  /* visible statt hidden: Ein 2-zeiliger Titel darf jetzt nach UNTEN in die Zeilenlücke
     malen, statt am Quadratrand abgeschnitten zu werden. Das ändert die LAYOUT-Größe nicht —
     aspect-ratio + container-type: size halten die Box weiter exakt quadratisch, die
     Raster-/Reihen-Ausrichtung bleibt also unverändert. Nur die Darstellung darf überstehen.
     (Die vertikale Lücke zwischen den Reihen ist ~0,55 Zelle, eine Titelzeile ~0,25 Zelle →
     passt ohne Überlappung der nächsten Reihe.) */
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
/* Karte + Bildbox: keine eigenen Hintergründe/Schatten mehr – nur die Box zählt. */
:is(.template-collection, .shop-tiles) .product-card-wrapper .card,
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__inner,
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__media {
  background: transparent;
  box-shadow: none;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__inner:after,
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__media img {
  box-shadow: none;
}

/* Inhalt auf der Box: Bild oben, Text darunter, zentriert, kompakt.
   Bild-Geometrie als Variablen → die Hover-Buttons folgen dem Bild automatisch (siehe .atc-overlay). */
:is(.template-collection, .shop-tiles) .product-card-wrapper {
  /* Bild-Geometrie relativ zur Box (cqw = 1% der Boxbreite) → skaliert automatisch mit.

     REGLER Bildgröße — NUR diese eine Zahl ändern (war 74.5, jetzt kleiner):
     Breite, Höhe und die seitliche Zentrierung leiten sich alle daraus ab. Früher standen
     --img-w und --img-x als getrennte Zahlen da und mussten von Hand synchron gehalten
     werden (x = (100 − w) / 2); wer nur w änderte, verschob das Bild aus der Mitte. */
  --img-size: 60cqw;
  --image-padding: 0;
  --img-w: var(--img-size);   /* Bildbreite  */
  --img-h: var(--img-size);   /* Bildhöhe (quadratisch) */
  /* rechnet die Mitte selbst aus → bleibt bei jeder Bildgröße mittig */
  --img-x: calc((100cqw - var(--img-size)) / 2);
  --img-y: 3cqw;      /* Bild hoch/runter (kleiner = höher) */
}
/* Die Bildbox: immer QUADRATISCH mit weißem Grund. Zusammen mit object-fit: contain
   (unten) wird jedes Bild vollständig gezeigt und der Rest weiß aufgefüllt, statt
   beschnitten zu werden (Dawn nutzt sonst object-fit: cover). */
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__inner.ratio {
  height: var(--img-h);
  width: var(--img-w);
  /* NICHT schrumpfen: .card ist ein Flex-Column mit fixer Quadrat-Höhe. Ohne dies stiehlt
     ein 2-zeiliger Titel dem Bild vertikalen Platz → die Bildbox wird gestaucht, während das
     Overlay seine feste --img-h behält und die Hover-Buttons unten aus dem Bild rutschen.
     Mit flex-shrink: 0 bleibt das Bild immer --img-h hoch, Bild und Overlay bleiben synchron,
     und der längere Titel wächst stattdessen nach unten (siehe overflow: visible am Wrapper). */
  flex-shrink: 0;
  padding-bottom: 0;
  background: #fff;
  /* leichter Schatten + minimale Neigung (--img-rot, wechselt pro Kachel → wirkt zufällig) */
  box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.14);
  /* translateZ(0) + backface-visibility: hidden zwingen eine GPU-Ebene → die gedrehte Box
     (Kanten, Schatten) wird glatt kantengeglättet statt treppig gerastert. */
  transform: translate(var(--img-x), var(--img-y)) rotate(var(--img-rot, 0deg)) translateZ(0);
  backface-visibility: hidden;
}
/* Neigung in wechselnde Richtungen (zyklisch über 4 Kacheln → sieht zufällig aus).
   Bewusst auf dem <li> (NICHT auf .card__inner): so erben ALLE Elemente der Kachel die
   Neigung — Bild, Hover-Buttons und Varianten-Pop-up drehen dadurch gemeinsam. Läge die
   Variable auf .card__inner, wäre sie für dessen Geschwister (Overlay/Modal) unsichtbar. */
:is(.template-collection, .shop-tiles) .product-grid > li:nth-child(4n + 1) { --img-rot: -1deg; }
:is(.template-collection, .shop-tiles) .product-grid > li:nth-child(4n + 2) { --img-rot: 0.7deg; }
:is(.template-collection, .shop-tiles) .product-grid > li:nth-child(4n + 3) { --img-rot: -0.5deg; }
:is(.template-collection, .shop-tiles) .product-grid > li:nth-child(4n + 4) { --img-rot: 1deg; }
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__inner.ratio::before {
  display: none;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__content {
  padding: 0;
  grid-template-rows: 0 max-content 1fr;
  align-content: start;
  justify-items: center;
  text-align: center;
  /* An die Box gekoppelt (volle Boxbreite, zentriert) → Überschrift bricht seltener um. */
  width: 100%;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__content *,
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__information * {
  text-align: center;
}
/* Bild vollständig zeigen statt beschneiden → der Rest der quadratischen Box bleibt weiß. */
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__media .media img {
  object-fit: contain;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__information {
  padding: 0;
  /* REGLER echte Lücke zwischen Bildunterkante und Text — kleiner = Text weiter hoch.

     Warum calc und nicht eine feste Zahl? --img-y verschiebt das Bild nur OPTISCH nach unten
     (transform), im Layout steht es weiter oben. Die sichtbare Lücke ist deshalb
     margin-top − img-y, nicht margin-top. Mit einer festen Zahl änderte sich die Lücke jedes
     Mal mit, wenn man das Bild höher oder tiefer setzt. So bleibt sie stabil und --img-gap
     ist wirklich der Abstand, den man sieht. */
  --img-gap: 4cqw;
  margin-top: calc(var(--img-y) + var(--img-gap));
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__heading {
  font-size: 1.5rem;
  line-height: 1.2;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__heading,
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__heading a {
  hyphens: none;
  -webkit-hyphens: none;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .price {
  font-size: 1.4rem;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .price,
:is(.template-collection, .shop-tiles) .product-card-wrapper .price__container,
:is(.template-collection, .shop-tiles) .product-card-wrapper .price__regular,
:is(.template-collection, .shop-tiles) .product-card-wrapper .price__sale {
  justify-content: center;
  text-align: center;
}

/* === Banner mit Papier-Textur ===
   Textur (SVG-Rauschen, soft-light) einmal für alle Banner; Farbe je Banner unten.
   Neuen Banner ergänzen: Selektor hier zur Liste hinzufügen + eine Farb-Zeile unten. */
.collection-hero.gradient,
.blog-banner.color-scheme-4,
.blog-banner.color-scheme-5,
.ueber-uns-banner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.45'/%3E%3C/svg%3E") !important;
  background-blend-mode: soft-light;
  background-size: 180px 180px;
  background-repeat: repeat;
}
.collection-hero.gradient   { background-color: var(--banner-shop) !important; }  /* Shop / Collection */
.blog-banner.color-scheme-4 { background-color: var(--banner-neues) !important; }  /* Neues */
.blog-banner.color-scheme-5 { background-color: var(--banner-rezepte) !important; }  /* Rezepte */
.ueber-uns-banner           { background-color: var(--banner-ueber-uns) !important; }  /* Über uns */

/* === Einheitliche Banner: Text, Überschrift, Abstände (Neues, Rezepte, Über uns) ===
   Gemeinsames CSS für alle Seiten-Banner. Pro Seite unterscheiden sich nur die
   Hintergrundfarbe (oben) und der Inhalt. So bleiben Schriftfarbe/Deckkraft, Größen
   und Abstände überall gleich. */
.blog-banner,
.ueber-uns-banner {
  padding: 3rem 0;            /* Abstand oben/unten für den Text */
  margin-bottom: 2.25rem;
}
.blog-banner__inner,
.ueber-uns-banner .page-width {
  text-align: left;
}
/* Große Überschrift – einheitlich (Neues, Rezepte, Über uns).
   Farbe: gräulich, leicht durchsichtig (nicht rot). */
.blog-banner__slogan,
.ueber-uns-banner__title {
  font-family: 'Roboto Slab', var(--font-heading-family), serif;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.25;
  margin: 0 0 1.1rem;
  color: rgba(var(--banner-text-rgb), 0.82);
}
/* Fließtext – einheitliche Farbe/Deckkraft, linksbündig statt Blocksatz */
.blog-banner__text,
.ueber-uns-banner__text {
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: left;          /* kein Blocksatz → keine komischen Wortabstände */
  color: rgba(var(--banner-text-rgb), 0.62);
}
/* Shop-Banner (.collection-hero) mit standardisieren – NUR Farbe angleichen,
   Größe/Layout bleiben unberührt (Überschrift dort ist evtl. <strong>). */
.collection-hero__description,
.collection-hero__description * {
  color: rgba(var(--banner-text-rgb), 0.62) !important;
}
.collection-hero__description :is(h1, h2, h3),
.collection-hero__description strong {
  color: rgba(var(--banner-text-rgb), 0.82) !important;
}
@media screen and (max-width: 749px) {
  .blog-banner,
  .ueber-uns-banner {
    padding: 2rem 0;
  }
  .blog-banner__slogan,
  .ueber-uns-banner__title {
    font-size: 2rem;
  }
  .blog-banner__text,
  .ueber-uns-banner__text {
    font-size: 1.4rem;
  }
}

/* === Raster pro Seite verschieben (optional) ===
   Das Hintergrundraster liest --grid-shift-x / --grid-shift-y vom <body>.
   x: + = nach rechts, - = nach links | y: + = nach unten, - = nach oben.
   Nicht gesetzt = 0 = unverschoben — deshalb steht hier NUR, wo tatsächlich verschoben wird.
   Für eine weitere Seite einfach ergänzen, z.B.:  body.template-blog { --grid-shift-y: -40px; } */
body.template-index {
  /* ---- Startseiten-Raster: EIN absoluter Anker, alles andere abgeleitet ----
     Gleiches Prinzip wie beim Shop. --home-width ist der einzige Wert, den du anfasst. */
  --home-width: 118rem;
  --grid-columns: 10;   /* Startseite: 10 Spalten */
  --cell: calc(var(--home-width) / var(--grid-columns));  /* abgeleitet – nie von Hand setzen.
     Startwert; grid-background.js überschreibt --cell mit der gemessenen Zellgröße. */
}
body.template-collection {
  --grid-shift-y: -60px;   /* Shop MIT Banner (z.B. "Alle Produkte"): Raster 60px nach oben */

  /* Shop OHNE Banner (Kollektion ohne Beschreibung, z.B. "Algen", "Essige"):
     Dort faellt der Banner weg, der Inhalt rueckt hoch — die waagerechten Rasterlinien
     haengen aber am Dokument und bleiben stehen, liefen also quer durch die Kacheln.
     Dieser Wert ersetzt dann den oberen. Groesser = Raster weiter nach unten.
     Angewendet wird er von sections/main-collection-banner.liquid (else-Zweig). */
  --grid-shift-y-no-banner: -43px;

  /* ---- Shop-Raster: EIN absoluter Anker, alles andere abgeleitet ----
     Ein Maßsystem braucht genau einen Bezugspunkt (die Zelle IST Containerbreite ÷ Spalten,
     also kann der Container nicht selbst in Zellen stehen — das wäre zirkulär).
     Dieser Anker ist --shop-width. Der einzige Wert, den du anfasst:
       kleiner = alles kompakter (Kacheln UND Lücken), bleibt automatisch rasterbündig. */
  --shop-width: 126rem;   /* = 1260px (1rem = 10px). rem wie bei der Startseite. */
  --grid-columns: 14;   /* Sidebar 2 + Lücke 1 + 3×[Kachel 3 + Lücke 1] */
  /* Kachel-Box relativ zur 3-Zellen-Zelle. >1 = Box ragt in die Lücken.
     Wird auch vom Produktraster gebraucht (kompensiert die vertikale Lücke).
     Obergrenze ~1.33 – darüber wäre die Reihenlücke rechnerisch negativ. */
  --card-box-scale: 1.15;
  --cell: calc(var(--shop-width) / var(--grid-columns));  /* abgeleitet – nie von Hand setzen.
     Dient nur als Startwert; grid-background.js überschreibt --cell mit der tatsächlich
     gemessenen Zellgröße (damit es auch bei schmalerem Fenster exakt passt). */
}
/* Auch die 404-Seite bekommt diese Werte, WENN sie die leere Kategorieseite rendert
   (sections/main-404.liquid, erkennbar an .section-main-blog). Nötig, weil dort die
   Body-Klasse template-404 ist und das Layout in blog-neues.css sonst ohne --cell und
   ohne --grid-columns dastünde. Auf einer echten 404-Seite greift die Regel nicht. */
/* ---- Fehlerseiten: gleiche Rasterdichte wie Shop und Blog ----
   Ohne diese Werte fällt grid-background.js auf 10 Spalten zurück und ankert am
   Inhaltsblock der Fehlermeldung — die Zelle wird dadurch sichtbar größer als auf
   allen anderen Seiten. Beides wird hier auf dasselbe Maß gebracht: 14 Spalten über
   126rem Breite ergibt exakt dieselbe 90px-Zelle wie --shop-width und --blog-width.
   Die max-width darunter gilt dem Inhaltsblock, weil er zugleich der Bezugspunkt ist,
   an dem das Raster ausgerichtet wird. */
/* ---- Bezugspunkt fuer Seiten ohne passenden Inhaltscontainer ----
   Rechtstexte, Kontakt und Warenkorb bekommen in layout/theme.liquid ein leeres
   .grid-anchor vorangestellt; grid-background.js misst daran Zellgroesse und Lage.
   Die Werte sind bewusst dieselben wie im Shop (--shop-width / --grid-columns), damit
   die Zelle exakt gleich gross wird: 126rem / 14 = 90px.
   padding: 0 ist Absicht und kein Versehen — der Anker soll GENAU 14 Zellen breit sein
   und mit seiner Kante auf einer Rasterlinie liegen. Shop und Blog machen es ebenso
   (siehe .blog-layout.page-width in blog-neues.css). Waere hier ein Polster, saesse das
   Raster um genau diesen Betrag versetzt.
   height: 0, weil nur die Breite gebraucht wird; sichtbar ist nichts.

   Der Selektor nennt das Element ZWEIMAL, einmal mit :empty. Das ist kein Versehen:
   Dawn setzt weiter oben "a:empty, ul:empty, div:empty, … { display: none }". Ein leeres
   div ist damit ausgeblendet, hat Breite 0 — und grid-background.js ueberspringt es
   (pickVisible verlangt Breite > 0). Genau das ist hier zuerst passiert: Der Anker stand
   im DOM, wurde aber nie gemessen. .grid-anchor allein reicht nicht dagegen an, weil
   div:empty gleich stark ist und spaeter kaeme; .grid-anchor:empty ist spezifischer und
   gewinnt. */
.grid-anchor,
.grid-anchor:empty {
  display: block;
  --grid-anchor-width: 126rem;    /* = --shop-width */
  width: 100%;
  max-width: var(--grid-anchor-width);
  height: 0;
  margin: 0 auto;
  padding: 0;
}

body.template-404 {
  --error-width: 126rem;
  --grid-columns: 14;
  --cell: calc(var(--error-width) / var(--grid-columns));

  /* Abstand zur Fusszeile, in Rasterzellen. Gilt fuer beide Ausbaustufen der Seite:
     die nachgebaute leere Kategorie und die gewoehnliche Fehlermeldung. */
  --error-bottom: 0.5;
}
.template-404.not-found-message {
  max-width: var(--error-width);
}
/* Beide moeglichen Schlussbloecke der Fehlerseite bekommen denselben Unterrand — welcher
   von beiden sichtbar ist, entscheidet erst das Skript in sections/main-404.liquid.
   Der frueher fest verdrahtete padding-bottom: 20px am Kategorie-Nachbau ist dafuer
   entfallen, sonst kaeme er hier oben drauf und die Luecke waere groesser als bestellt.

   Sichtbar wird der Rand erst, wenn der Inhalt hoeher ist als das Fenster. Der <body> ist
   ein Raster mit den Zeilen "auto auto 1fr auto" (layout/theme.liquid): <main> ist die
   1fr-Zeile und dehnt sich auf kurzen Seiten bis zum unteren Fensterrand, die Fusszeile
   klebt also ohnehin unten. Der Rand liegt dann INNERHALB dieser Dehnung. Erst wenn der
   Inhalt die Seite laenger macht als das Fenster, schiebt er die Fusszeile wirklich. */
body.template-404 .empty-category,
.template-404.not-found-message {
  margin-bottom: calc(var(--cell, 90px) * var(--error-bottom, 0.5));
}

body.template-blog,
body.template-404:has(.section-main-blog) {
  /* ---- Blog-Raster („Neues“ und „Rezepte“): dasselbe Maßsystem wie der Shop ----
     Gleiche Aufteilung, gleiche Zellzahl — dadurch stehen Seitenmenü, Überschrift und
     Kacheln an denselben Rasterlinien wie im Shop:
       Sidebar 2 + Lücke 1 + 3×[Kachel 3 + Lücke 1] = 14 Zellen.
     --blog-width ist der EINZIGE Wert, den du anfasst: kleiner = alles kompakter
     (Kacheln UND Lücken), bleibt dabei automatisch rasterbündig.
     Achtung: Beide Blogs (/blogs/news und /blogs/rezepte) tragen dieselbe Body-Klasse
     template-blog und benutzen dieselbe Sektion — diese Werte gelten also für beide. */
  --blog-width: 126rem;   /* wie --shop-width, damit die Zelle exakt gleich groß ist */
  --grid-columns: 14;
  --cell: calc(var(--blog-width) / var(--grid-columns));  /* abgeleitet – nie von Hand setzen.
     Startwert; grid-background.js überschreibt --cell mit der gemessenen Zellgröße. */

  /* Raster senkrecht ausrichten, falls die Linien durch die Kacheln laufen.
     Positiv = nach unten, negativ = nach oben. Der Shop nutzt dafür --grid-shift-y.

     Fuer /blogs/news („Neues“) ist das Raster 0,3 Zellen nach unten gerückt.
     /blogs/rezepte bleibt unverändert — beide Blogs teilen sich zwar die Body-Klasse
     template-blog und dieselbe Sektion, die Zuweisung passiert aber nur auf der
     Neues-Seite (sections/main-blog.liquid, style-Block bei blog.handle == 'news').

     Warum ein Pixelwert und keine Zellrechnung: grid-background.js liest die Variable
     mit parseFloat aus dem berechneten Stil. Ein calc(var(--cell) * 0.2) käme dort als
     Zeichenkette "calc(…)" an und ergaebe NaN → 0. Bei der Design-Breite ist eine Zelle
     126rem / 14 = 90px, 0,3 Zellen sind also 27px. Umrechnung: Zellen × 90.
     Wird die Blog-Breite (--blog-width) geändert, ist dieser Wert nachzuführen. */
  --grid-shift-y-news: 27px;

  /* ---- Ansicht OHNE Banner (eine Kategorie im Seitenmenue gewaehlt) ----
     Der Banner erscheint nur auf der Blog-Startseite (main-blog.liquid: "unless
     current_tags"). Faellt er weg, rueckt der ganze Inhalt nach oben — die waagerechten
     Rasterlinien haengen aber am Dokument und bleiben stehen, laufen also anders durch
     die Kacheln als vorher. Der Shop loest dasselbe Problem mit
     --grid-shift-y-no-banner; hier stehen die Gegenstuecke fuer beide Blogs.

     Diese Werte kommen ZUSAETZLICH zum Wert oben (grid-background.js addiert
     --grid-shift-y und --grid-shift-y-cells). Und sie stehen in ZELLEN, nicht in Pixeln:
     Seit die Rasterverschiebung auch zellrelativ gelesen wird, entfaellt die
     Handumrechnung, die fuer --grid-shift-y-news noch noetig war — der Wert bleibt bei
     jeder Fensterbreite derselbe Bruchteil eines Rasterfelds. Positiv = nach unten.
     Zugewiesen werden sie in sections/main-blog.liquid, jeweils nur bei gesetztem Tag. */
  --grid-shift-y-cells-news-tag: 0.2;
  --grid-shift-y-cells-rezepte-tag: 0.5;

  /* Kachelraster der Rezepte-Seite, in Zellen (Grundwert 0.1 steht in blog-neues.css
     bei --blog-grid-y und gilt für „Neues“). Zugewiesen wird dieser Wert nur auf
     /blogs/rezepte — sections/main-blog.liquid, Zweig blog.handle == 'rezepte'.
     Hier keine Pixelumrechnung nötig: Die Variable wird in CSS per calc() verrechnet,
     nicht von JavaScript gelesen. Positiv = nach unten. */
  --blog-grid-y-rezepte: 0.2;

  /* „Mehr laden“-Button der Rezepte-Seite, in Zellen. Grundwert 0.2 steht in
     blog-neues.css bei --loadmore-y und gilt für „Neues“; hier die Abweichung für
     /blogs/rezepte. Zugewiesen in sections/main-blog.liquid, Zweig 'rezepte'.
     Positiv = nach unten. Verschiebt NUR den Button (transform), nicht das Band —
     der Abstand zum Footer bleibt davon unberührt. */
  --loadmore-y-rezepte: 0.12;
}
body.template-search {
  /* ---- Suchergebnis-Raster: dieselbe Zelle wie Shop und Blog ----
     Die Suche zeigt Produktkacheln (wie der Shop) und Beitragskacheln (wie „Neues“/
     „Rezepte“). Damit beide exakt so aussehen wie auf ihren Stammseiten, muss die
     Rasterzelle GLEICH GROSS sein: dort 126rem / 14 Spalten = 90px.

     Anders als Shop und Blog hat die Suche kein Seitenmenü — es fehlen also die
     3 Zellen (Sidebar 2 + Lücke 1) links. Übrig bleibt genau der Kachelbereich:
       11 Zellen = 3×[Kachel 3 + Lücke 1] − 1 Lücke am Ende.
     11 × 90px = 990px = 99rem. Die Zelle ist damit rechnerisch identisch zu Shop und
     Blog, die Kacheln also gleich groß — der Block steht nur mittig statt rechts vom Menü.

     --search-width ist der EINZIGE Wert, den du anfasst: kleiner = alles kompakter
     (Kacheln UND Lücken), bleibt dabei automatisch rasterbündig. Wird er geändert,
     stimmt die Kachelgröße nicht mehr mit Shop/Blog überein — das ist der Preis. */
  --search-width: 99rem;   /* = 11 Zellen à 90px */
  --grid-columns: 11;
  --cell: calc(var(--search-width) / var(--grid-columns));  /* abgeleitet – nie von Hand setzen.
     Dieselbe Größe misst grid-background.js für die sichtbaren Rasterlinien; verankert
     wird es an .search-layout (siehe dort die Auswahl `ref`). */

  /* Kachel-Box relativ zur 3-Zellen-Spalte, wie im Shop (dort body.template-collection).
     >1 = die Box ragt in die Lücken. Wird auch vom Kachelraster gebraucht, das die
     vertikale Lücke daraus berechnet (siehe template-search.css). */
  --card-box-scale: 1.15;

  /* Waagerechte Rasterlage. Bewusst in ZELLEN (--grid-shift-y-cells) und nicht in px:
     die Zelle hängt an der Inhaltsbreite, ein px-Wert wanderte bei anderer Fensterbreite
     oder Zoomstufe aus der Lage. Negativ = Raster nach oben, positiv = nach unten. */
  --grid-shift-y-cells: 0;
}
body.template-page {
  /* ---- Rastergroesse von Dr.-Hauschka- und Ueber-uns-Seite ----
     Beide sollen dieselbe Zelle haben wie der Shop: 126rem / 14 Spalten = 90px.
     Die Zellgroesse ist Inhaltsbreite / Spaltenzahl (siehe SPACING in
     grid-background.js) — gleich gross wird sie also nur, wenn BEIDE Werte mit dem
     Shop uebereinstimmen. Darum ist --page-grid-width identisch zu --shop-width; die
     Inhaltsspalte dieser beiden Seiten wird damit ebenso breit wie im Shop und Blog.

     Zugewiesen wird --grid-columns nicht hier, sondern im style-Block von
     sections/main-page.liquid — die Body-Klasse template-page tragen auch die
     Rechtstexte, deren Inhaltsspalte nur 72.6rem breit ist. Mit 14 Spalten haetten
     sie eine 52px-Zelle statt der bisherigen 72.6px.
     Bewusst KEIN --cell hier: die Variable wuerde auf dem <body> die von
     grid-background.js am <html> gesetzte, GEMESSENE Zellgroesse verdecken (eigene
     Deklaration schlaegt Vererbung) — und damit genau die Breitenanpassung aushebeln,
     die .drh-hero__inner braucht. */
  --page-grid-width: 126rem;    /* = --shop-width */
  --page-grid-columns: 14;      /* = --grid-columns im Shop */

  /* ---- Ueber-uns-Seite ----
     Rasterlage, in Zellen. Negativ = nach oben. Zugewiesen wird der Wert in
     sections/main-page.liquid im Zweig page.handle == 'uber-uns' — hier stuende er
     sonst auch fuer die Rechtstexte und die Dr.-Hauschka-Seite. */
  --uu-grid-shift-y-cells: -0.5;

  /* Inhaltsplatte der Ueber-uns-Seite (.ueber-uns-page in section-main-page.css),
     beides in Rasterzellen. Negativ = nach oben.
     --uu-page-y verschiebt die Platte; weil ihr negativer Rand die Sektion zugleich
     kuerzer macht, ruecken Fusszeile und alles darunter mit nach oben.
     --uu-page-bottom kommt als Abstand zur Fusszeile unten dazu. Steht er auf 0, wandert
     die Fusszeile also um --uu-page-y mit nach oben — die Luecke unter der Platte bleibt
     dann so gross wie vorher, waehrend die Platte selbst hoeher rueckt. */
  --uu-page-y: -0.2;
  --uu-page-bottom: 0.3;

  /* ---- Dr.-Hauschka-Raster ----
     Diese Werte gelten NUR fuer /pages/dr-hauschka. Zugewiesen wird --grid-shift-x
     deshalb nicht hier, sondern im style-Block von sections/main-page.liquid (Zweig
     page.handle == 'dr-hauschka') — sonst verschoebe sich auch das Raster der
     uebrigen Seiten (Ueber uns, Rechtstexte), die dieselbe Body-Klasse tragen.
     Hier stehen nur die WERTE, damit alle Rasterlagen an einer Stelle liegen.

     Warum ueberhaupt verschieben? grid-background.js verankert die Senkrechten an der
     INNENKANTE der Inhaltsspalte (.page-width inkl. Polster), leitet die Zellgroesse
     aber aus deren AUSSENbreite ab (1260px / 14 Spalten = 90px). Um genau das
     Seitenpolster laeuft das Raster dadurch unsymmetrisch zur Seitenmitte. Ein Versatz
     um -Polster hebt das auf: die Linien liegen dann spiegelbildlich um die Mitte
     (bei Design-Breite +-45px, +-135px, ...), und ein mittig stehender Block mit
     UNGERADER Zellenzahl endet mit beiden Kanten exakt auf einer Linie. Nebenbei
     entspricht die Rasterlage danach genau der des Shops, der sein Polster fuer denselben
     Zweck auf 0 setzt (siehe .blog-layout.page-width in blog-neues.css).
     Daher haengen die beiden folgenden Werte zusammen:
       --drh-hero-cells ungerade  -> Versatz = -Seitenpolster (so eingestellt)
       --drh-hero-cells gerade    -> Versatz = -Seitenpolster + halbe Zelle */
  --drh-grid-shift-x: -50px;          /* = Polster von .page-width ab 750px (5rem) */
  --drh-grid-shift-x-mobile: -15px;   /* = Polster von .page-width unter 750px (1.5rem) */

  /* Waagerechte Rasterlage. Bewusst in ZELLEN (--grid-shift-y-cells) und nicht in px:
     die Zelle haengt an der Inhaltsbreite, ein px-Wert wanderte bei anderer
     Fensterbreite oder Zoomstufe aus der Lage. Negativ = Raster nach oben. */
  --drh-grid-shift-y-cells: -0.4;

  /* Block 3 (Credo) zusaetzlich nach unten ruecken, in Rasterzellen (siehe .drh-credo
     in section-main-page.css). GANZE Zellen bevorzugen: die waagerechten Rasterlinien
     haengen am Dokument, ein Versatz um genau ein Rasterfeld schiebt alles darunter
     also mit und laesst dessen Rasterlage unveraendert. Halbe oder viertel Zellen
     verschieben auch die folgenden Bloecke gegen die Linien. */
  --drh-credo-y: 0.4;

  /* Block 5 (Kategorien) nach unten ruecken, ebenfalls in Rasterzellen. Anders als beim
     Credo bewusst ein Bruchteil einer Zelle: alles darunter rueckt damit auch gegen die
     waagerechten Rasterlinien, was hier so gewuenscht ist. */
  --drh-kat-y: 0.8;

  /* Block 6 (Features) nach unten ruecken, in Rasterzellen. Gilt fuer alle fuenf
     Zeilen gemeinsam, ihre Abstaende untereinander bleiben gleich. */
  --drh-feature-y: 0.2;

  /* Zuschlag zum Abstand zwischen Block 7 (Beratung) und der Fusszeile, in
     Rasterzellen. Kommt auf den Grundabstand von .drh-section obendrauf. */
  --drh-beratung-bottom: 0.5;

  /* Breite der gelben Hero-Platte in Rasterzellen (siehe .drh-hero__inner in
     section-main-page.css). Eine Zelle weniger als die volle Inhaltsspalte (14):
     schmaler, und beide Kanten liegen auf einer senkrechten Rasterlinie.
     Ungerade lassen — sonst den Versatz oben mit anpassen. */
  --drh-hero-cells: 13;
}


/* ============================================================================
   [B1] · PRODUKTSEITE, MENGE & TRENNER
   ------------------------------------------------------------------------
   Mengenwahl (rote Umrandung), Header-Schriftgroessen, Medien-Rahmen und entfernte Trennlinien.
   ============================================================================ */

.quantity {
  border: 1px solid var(--brand-red) !important;
  outline: none !important;
}

.quantity__button,
.quantity__input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-left: none !important;
  border-right: none !important;
}

.quantity__button {
  color: var(--brand-red) !important;
}

.quantity__button svg {
  fill: var(--brand-red) !important;
}
.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  border: none !important;
}
.quantity {
  --inputs-border-width: 0px;
}
.header__heading-link,
.header__heading-link .h2,
.header__heading-link span {
  font-size: 25px !important;
  font-weight: 800 !important;
}

.header__menu-item {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.header__icon svg path,
.header__icon svg {
  stroke: var(--brand-red) !important;
}

/* stroke-width steht hier bewusst NICHT mehr drin: eine CSS-Regel schlägt das
   stroke-width-Attribut im SVG immer (Präsentationsattribute haben die niedrigste
   Priorität), mit !important erst recht. Die Strichstärke wird in den SVG-Dateien
   selbst gepflegt — nur so lässt sie sich pro Icon justieren. Die frühere Ausnahme
   für das gefüllte Konto-Icon ist entfallen: es ist jetzt ebenfalls stroke-basiert. */
.copyright__content,
.footer__copyright,
.footer__copyright a {
  font-size: 14px !important;
}
/* Rahmen des Produktbildes */
.product__media-item,
.product__media-wrapper,
.media {
  border: none !important;
  box-shadow: none !important;
}

/* Trennlinien von Zutaten und anderen Akkordeons */
.product-zutaten-full,
.page-width[style*="border-top"] {
  border-top: none !important;
}

/* Trennlinie des Headers */
.header-wrapper {
  border-bottom: none !important;
  }

/* Trennlinie des Footers */
.footer {
  border-top: none !important;
  /* Schlagschatten nach oben in den Innenbereich — gespiegelt zum
     Header-Schatten (.header-wrapper), damit beide Kanten gleich wirken.
     position/z-index nötig, damit der Schatten über dem Main-Content liegt. */
  position: relative;
  z-index: 1;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
.product__media-item .media,
.product__media img,
.media--transparent,
deferred-media,
.product__media-item {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.product__media-wrapper .media {
  border: none !important;
}

/* === Produktdetailseite: Bild als Quadrat im Rastermaß ===
   Das Bild sitzt in einem Quadrat von --pdp-img-cells Rasterzellen Kantenlänge, abzüglich
   eines kleinen Rands je Seite, damit die Kante nicht auf der Rasterlinie klebt. Freier
   Platz wird weiß aufgefüllt (object-fit: contain), das Bild also nie beschnitten —
   dasselbe Prinzip wie bei den Shop-Kacheln.
   REGLER: --pdp-img-cells (Kantenlänge in Zellen) und --pdp-img-inset (Rand je Seite,
   ebenfalls in Zellen). Beide unten in einer Regel, damit sie zusammen bleiben. */
/* Geometrie-Regler des PDP-Bildquadrats. Bewusst auf dem .product__media-wrapper
   (gemeinsamer Vorfahre von Bild UND Pfeil-Leiste), damit BEIDE dieselben Werte per
   Vererbung kennen — nur so können sich die Pfeile exakt an den Rahmen anlegen.
     --pdp-img-cells: Kantenlänge des Quadrats in Rasterzellen.
     --pdp-img-inset: kleiner Rand je Seite (Zellen), damit die Kante nicht auf der Rasterlinie klebt.
     --pdp-img-y: Bild verschieben, positiv = tiefer, negativ = höher (Zellen).
     --pdp-img-x: Bild verschieben, positiv = rechts, negativ = links (Zellen). */
.template-product .product__media-wrapper {
  --pdp-img-cells: 4;
  /* 0 statt vormals 0.15: Der Einzug sollte verhindern, dass die Bildkante auf der Rasterlinie
     klebt. Inzwischen ist das Gegenteil gewollt — die Kanten SOLLEN auf den Linien liegen,
     damit diese Linien sichtbar bleiben (grid-background.js, INSET_BLOCKING_SELECTORS zieht
     das Sperrrechteck dafür ein statt es aufzuweiten). Mit 0 ist das Quadrat exakt
     --pdp-img-cells Zellen groß und alle vier Kanten liegen auf Linien.
     --pdp-img-y ebenfalls 0 (war 0.25): jeder Bruchteil hier schöbe die Ober- und Unterkante
     von den Linien weg. Beide bleiben Feinregler, kosten aber die sichtbaren Kantenlinien. */
  --pdp-img-inset: 0.2;
  --pdp-img-size: calc(var(--cell, 120px) * (var(--pdp-img-cells) - 2 * var(--pdp-img-inset)));
  --pdp-img-y: 0.25;
  /* 0 statt vormals -1: Die Bildspalte ist jetzt selbst --pdp-col-media Zellen breit (siehe
     Spaltenraster weiter unten), das Quadrat sitzt also ohne Verschiebung darin. Der Regler
     bleibt für Feinjustierung — er verschiebt das Bild dann aber wieder aus seiner Spalte. */
  --pdp-img-x: 0;
}

/* === Spaltenraster der Produktseite in Rasterzellen ===
   Vorher kamen die Spaltenbreiten von Dawn in Prozent (45/55 %, section-main-product.css ~86)
   und der Inhalt wurde anschließend per margin bzw. transform aus seiner Spalte herausgeschoben
   (--pdp-img-x: -1, --pdp-info-x: -0.75). Die Folge: Hülle und sichtbarer Inhalt lagen dauerhaft
   auseinander — im Inspektor sichtbar als Kästen, die neben ihrem Inhalt stehen. Jede spätere
   Messung (Rasterschnitt, Zonenhöhen) musste diesen Versatz mitdenken.
   Jetzt bemessen sich die Spalten SELBST in Zellen; der Inhalt sitzt darin ohne Versatz.

   Der halbe-Zelle-Vorlauf ist kein Schönheitswert, sondern nötig: grid-background.js setzt die
   senkrechten Linien auf anchorX − SPACING/2 (siehe GRID_SHIFT_X). Die linke Kante der
   Inhaltsspalte liegt damit in der MITTE einer Zelle. Erst der Vorlauf von 0.5 rückt die
   Spaltenkanten auf die Linien.

   REGLER, alle in Rasterzellen:
     --pdp-col-start: Vorlauf der ersten Spalte (0.5 = Kanten liegen auf Rasterlinien)
     --pdp-col-media: Breite der Bildspalte
     --pdp-col-gap:   Lücke zwischen den Spalten
     --pdp-col-info:  Breite der Infospalte
   Summe (start + media + gap + info) muss unter 10 bleiben — so viele Zellen hat die
   Inhaltsspalte (--grid-columns, Standard 10). 0.5 + 4 + 1 + 4 = 9.5. */
/* Die Regler stehen BEWUSST außerhalb der Media Query. Löst eine Variable in einem calc()
   nicht auf, wird die ganze Deklaration ungültig — bei flex fällt sie dann auf 0 1 auto
   zurück, beide Spalten werden inhaltsbreit und brechen um. Genau so sah der erste Versuch
   aus. Jedes var() unten hat zusätzlich einen Rückfallwert. */
.template-product .product.grid {
  --pdp-col-start: 0.5;
  --pdp-col-media: 4;
  /* REGLER: Lücke zwischen Bild- und Infospalte. Sie ist zugleich der container-konforme Weg,
     die Infospalte waagerecht zu verschieben — die Spalte behält ihre Breite und rückt als
     Ganzes, samt Infobox UND Kaufbox. Ein Rand an der Infobox selbst würde nur diese bewegen
     und die Kaufbox stehenlassen.
     0.33: von 1 auf 0.1 (0.9 Zellen nach links), zurück auf 0.3 (0.2 nach rechts), dann
     Feinjustierung auf 0.33 (weitere 0.03 nach rechts).
     Die linke Kante der Infospalte liegt damit bei 4.83 Zellen, also NICHT auf einer
     Rasterlinie — der kantentreue Schnitt kann dort keine senkrechte Linie stehen lassen.
     Auf einer Linie läge sie bei ganzzahligem Wert (Kante dann 4.5, 5.5, …). */
  --pdp-col-gap: 0.33;
  --pdp-col-info: 4;
}

@media screen and (min-width: 750px) {
  body.template-product .product.grid {
    padding-left: calc(var(--cell, 120px) * var(--pdp-col-start, 0.5));
    column-gap: calc(var(--cell, 120px) * var(--pdp-col-gap, 1));
    /* Dawns .grid ist flex-wrap: wrap. Reichen die Zellbreiten rechnerisch auch nur um ein
       Pixel nicht, rutscht die Infospalte unter das Bild — genau das ist beim ersten Versuch
       passiert. nowrap macht daraus im Zweifel einen sichtbaren Überstand statt eines
       stillen Umbruchs, und die Schrumpfregel unten fängt ihn ab. */
    flex-wrap: nowrap;
  }

  /* Spezifität bewusst mit .grid__item: Dawns Prozentregeln stehen bei gleicher Klassenzahl
     in einer anderen Datei, und dann entschiede die Ladereihenfolge. */

  /* Bildspalte: darf NICHT schrumpfen — das Quadrat braucht seine volle Zellbreite, sonst
     stimmen Rastermaß und Kantenlage nicht mehr. */
  body.template-product .product .grid__item.product__media-wrapper {
    flex: 0 0 calc(var(--cell, 120px) * var(--pdp-col-media, 4));
    width: calc(var(--cell, 120px) * var(--pdp-col-media, 4));
    max-width: calc(var(--cell, 120px) * var(--pdp-col-media, 4));
    padding: 0;
  }

  /* === Zwischencontainer der Bildspalte auf die Spalte normieren ===
     Zwischen Spalte und Bildquadrat liegen drei Ebenen: media-gallery → slider-component →
     ul.product__media-list. Jede bringt aus Dawn eigene Ränder, Innenabstände und (die ul als
     .grid) einen Flex-Gap mit. Das Quadrat saß deshalb nach rechts versetzt in seiner Spalte
     und ragte rechts heraus, obwohl die Spalte selbst richtig bemessen war.

     Statt das Bild absolut zu positionieren — das hieße, es aus seinem Container zu nehmen —
     werden die Zwischencontainer auf die Spalte genormt: volle Breite, keine eigenen Abstände.
     Das Quadrat sitzt danach im normalen Fluss an der Spaltenkante, eingerückt allein um
     --pdp-img-inset.

     display: block auf der Liste ist hier gefahrlos: Ab 750px zeigt die Galerie ohnehin nur das
     aktive Bild (.product__media-item:not(.is-active) { display: none }), es gibt also nur ein
     sichtbares Element. Als Flex-Container brächte die Liste nur wieder Gap und Ausrichtung ins
     Spiel. Auf Mobil greift diese Regel nicht — dort läuft Dawns Swipe-Slider weiter. */
  body.template-product .product__media-wrapper media-gallery,
  body.template-product .product__media-wrapper slider-component,
  body.template-product .product__media-wrapper .product__media-list {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Infospalte: gibt bei Platzmangel nach (flex-shrink 1 + min-width 0). Ihr Inhalt ist Text
     und passt sich an; ein Überlauf der ganzen Seite wäre die schlechtere Alternative. */
  /* REGLER --pdp-col-info-top: rückt den GESAMTEN Inhalt der Infospalte nach unten
     (Rasterzellen) — Infobox UND Kaufbox gemeinsam, weil beide Kinder dieser Spalte sind.
     Bewusst als Innenabstand der Spalte und nicht als transform an der Infobox: Ein transform
     verschiebt nur optisch, nicht im Fluss. Die Kaufbox ist seit dem Umbau ein Geschwister der
     Infobox und wäre dabei stehengeblieben — die beiden wären auseinandergelaufen.
     Das ist der container-konforme Weg; --pdp-info-y an der Infobox bleibt nur noch für
     Feinjustierung, die ausdrücklich NUR die Infobox betreffen soll. */
  body.template-product .product .grid__item.product__info-wrapper {
    --pdp-col-info-top: 0.1;
    flex: 0 1 calc(var(--cell, 120px) * var(--pdp-col-info, 4));
    width: calc(var(--cell, 120px) * var(--pdp-col-info, 4));
    max-width: calc(var(--cell, 120px) * var(--pdp-col-info, 4));
    min-width: 0;
    padding: calc(var(--cell, 120px) * var(--pdp-col-info-top, 0)) 0 0 0;
  }
}

/* Sticky-Spalten auf der Produktseite abschalten.
   Dawn macht Bild- UND Info-Spalte sticky (top: 3rem, siehe section-main-product.css ~23).
   Beim Scrollen erreicht die Spalte ihren Andockpunkt genau in der Zone unterhalb des
   hohen Headers (~400px) — und dort ruckelt das Andocken in Firefox, weil an der
   Info-Spalte ein transform (--pdp-info-x/y) und am Bild eine Drehung hängt: Sticky +
   transform ist eine bekannte Sprung-Quelle. Das war der gemeldete Sprung.
   Ohne Sticky scrollen beide Spalten ruhig mit. Auf der kurzen Info-Spalte dieser Seite
   bringt Sticky ohnehin kaum etwas. Nur hier (Produktseite), andere Seiten unberührt.

   NACHTRAG — diese Regel griff bisher nur teilweise, und genau das war der zuletzt
   gemeldete Effekt ("Bild wandert leicht nach unten, sobald der Back-to-Top-Button
   erscheint"): Der Andockpunkt liegt bei ~400px Scroll, praktisch derselben Höhe, ab der
   der Button eingeblendet wird — der Button war nur der sichtbare Taktgeber, nicht die
   Ursache. Zwei Lücken:
     1. section-main-product.css ~1863 setzt position: sticky !IMPORTANT auf
        [id^="ProductInfo-"].product__column-sticky. Ein einfaches position: static kann
        das nicht überstimmen — die Info-Spalte blieb ab 990px sticky.
     2. Die BILD-Spalte heißt .product__media-wrapper und trägt gar kein
        .product__column-sticky; section-main-product.css ~1867 macht sie separat sticky.
        Sie war von der Regel nie erfasst.
   Deshalb jetzt beide Spalten explizit und mit !important. */
@media screen and (min-width: 750px) {
  body.template-product .product__column-sticky,
  body.template-product [id^='ProductInfo-'].product__column-sticky,
  body.template-product .product .grid__item.product__media-wrapper {
    position: static !important;
  }
}

.template-product .product__media-item {
  /* Bewusst margin statt transform: margin verschiebt auch das Layout, die Spalte wächst
     also mit. Ein transform würde das Bild nur optisch schieben und könnte es über den
     folgenden Abschnitt laufen lassen. */
  margin-top: calc(var(--cell, 120px) * var(--pdp-img-y));
  /* Der Einzug steckt jetzt IM Rand, nicht mehr in einer separaten Verschiebung: Die Spalte ist
     --pdp-col-media Zellen breit, das Quadrat --pdp-img-inset Zellen schmaler. Mit dem Einzug
     als linkem Rand sitzt es symmetrisch in seiner Spalte, und --pdp-img-x bleibt ein reiner
     Feinregler, der bei 0 nichts tut. */
  margin-left: calc(var(--cell, 120px) * (var(--pdp-img-inset) + var(--pdp-img-x)));

  width: var(--pdp-img-size) !important;
  max-width: var(--pdp-img-size) !important;
  height: var(--pdp-img-size);
  background: #fff;
  position: relative;   /* Bezugsrahmen für das absolut gefüllte Bild darin */
  overflow: hidden;     /* nichts ragt über das weiße Quadrat hinaus */
  /* Neigung (aus der Produkt-ID, siehe main-product.liquid) + Schatten wie im Shop.
     !important beim Schatten, weil weiter oben .product__media-item pauschal
     box-shadow: none !important setzt — ohne das käme der Schatten nicht durch.
     translateZ(0) + backface-visibility erzwingen eine GPU-Ebene, damit die gedrehten
     Kanten glatt statt treppig gerastert werden (wie bei den Kacheln). */
  transform: rotate(var(--img-rot, 0deg)) translateZ(0);
  backface-visibility: hidden;
  box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.14) !important;
}

/* Die Zwischenebenen (Container → modal-opener → .media) füllen das Quadrat per inset: 0.
   Bewusst absolut statt einer height:100%-Kette: die verlangte in JEDEM Glied eine definierte
   Höhe, und der modal-opener dazwischen hat keine — dort riss die Kette und das Bild fiel auf
   sein natürliches Hochformat zurück (darum stimmte die Breite, aber nie die Höhe).
   inset: 0 ist unabhängig davon, welches display/height die Zwischenglieder haben.
   Bezugsrahmen ist .product__media-item (position: relative oben); dessen transform macht es
   ohnehin zum Containing Block. padding: 0 killt Dawns Seitenverhältnis-Trick (padding-top aus
   --ratio-percent), der sonst das Hochformat erzwang. */
.template-product .product__media-item .product-media-container,
.template-product .product__media-item .product__modal-opener,
.template-product .product__media-item .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;   /* killt Dawns Seitenverhältnis-Trick (padding-top aus --ratio-percent) */
  margin: 0;
}

/* Das Foto vollständig zeigen (contain), zentriert, Rest bleibt weiß — nie beschnitten. */
.template-product .product__media-item .media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === Rechte Info-Spalte verschieben ===
   REGLER, beide in Rasterzellen: negativ = links / oben, positiv = rechts / unten.
   Per transform (rein optisch), damit das Grid-Layout unberührt bleibt.

   --pdp-info-x steht auf 0 (vormals -0.75): Die Infospalte ist jetzt selbst --pdp-col-info
   Zellen breit und liegt an der richtigen Stelle (siehe Spaltenraster weiter oben), die Box
   muss also nicht mehr aus ihr herausgezogen werden. Genau dieses Herausziehen war der Grund,
   warum Hülle und sichtbarer Inhalt im Inspektor auseinanderlagen.
   Der Regler bleibt für Feinjustierung — jeder Wert ungleich 0 stellt den alten Zustand aber
   wieder her, inklusive der Kanten, die dann nicht mehr auf Rasterlinien liegen. */
.template-product .product__info-container {
  /* REGLER waagerecht: rückt die Infobox nach rechts (Rasterzellen).
     Bewusst als margin-left und NICHT mehr als transform-X: Die Box bleibt damit in ihrer
     Spalte (ihre Breite verringert sich um denselben Betrag), statt optisch aus ihr
     herauszuwandern. Genau ein Regler pro Achse — zwei Regler auf derselben Achse haben sich
     hier schon einmal gegenseitig verschoben.
     Die Kaufbox ist ein Geschwister und bleibt stehen; sie rückt NICHT mit — genau deshalb
     steht der Wert wieder auf 0: Die waagerechte Verschiebung ist nach --pdp-col-gap an der
     Spalte umgezogen (siehe Spaltenraster oben), damit Infobox UND Kaufbox gemeinsam rücken. */
  --pdp-info-x: 0;
  margin-left: calc(var(--cell, 120px) * var(--pdp-info-x));

  /* REGLER senkrecht: verschiebt NUR die Infobox nach unten (Rasterzellen), per transform.
     ACHTUNG, das ist der Regler, der aus dem Fluss ausbricht: Ein transform wirkt rein optisch,
     die Kaufbox als Geschwister bleibt stehen und der Abstand zwischen beiden ändert sich.
     Sollen Infobox UND Kaufbox gemeinsam rücken, ist --pdp-col-info-top an der Spalte der
     container-konforme Weg (siehe Spaltenraster oben).
     Zweite Folge: Jeder Wert ungleich 0 nimmt die Oberkante der Box von der Rasterlinie — dort
     kann der kantentreue Schnitt dann keine Linie mehr sichtbar lassen. */
  --pdp-info-y: 0.1;
  transform: translateY(calc(var(--cell, 120px) * var(--pdp-info-y)));

  /* REGLER feste Zonenhöhen (in Rasterzellen) — je Zone ein reservierter Bereich.
     Die Werte sind auf den REGELFALL ausgelegt, nicht mehr auf den größten denkbaren Inhalt:
     Was nicht hineinpasst, wird von pdp-zone-fit.js zusammengezogen statt abgeschnitten. */
  --pdp-zone-price: 0.55;   /* Preis + Grundpreis + MwSt */
  --pdp-zone-bio: 1.1;      /* Bio-Logo + Kontrollnummer + Herkunft */
  --pdp-zone-info: 0.9;     /* Artikelnr./Marke/Herkunft/Qualität (max. 4 Zeilen) */
  --pdp-zone-variants: 0.4; /* Variantenauswahl (Label + Pillenreihe), falls vorhanden */
}

/* === Rechte Spalte: feste Zonen ===
   Vorher stand hier min-height. Das reserviert nur eine UNTERGRENZE: fehlender Inhalt ließ
   die Lücke stehen, aber zu VIEL Inhalt (zweizeiliger Titel, lange Herkunft, eine Info-Zeile
   mehr) ließ die Zone wachsen und schob alles darunter nach unten. Genau das ist der Grund,
   warum der Kaufbereich von Produkt zu Produkt an einer anderen Höhe saß.

   Jetzt height statt min-height: die Zone ist in BEIDE Richtungen fest. Der Preis dafür ist
   overflow: hidden — was nicht hineinpasst, wird abgeschnitten statt die Seite zu verschieben.
   Deshalb müssen die REGLER oben am inhaltsreichsten Produkt ausgelegt sein, nicht am
   durchschnittlichen. Wenn irgendwo etwas fehlt, ist der zugehörige Wert zu klein.

   box-sizing hier ausdrücklich: die Höhe soll das Innenabstand-Polster einschließen, sonst
   verschiebt ein Padding die Zone doch wieder.
   Die Varianten bleiben bewusst absolut oben rechts (siehe .product__info-container
   variant-selects) und liegen damit außerhalb des Stapels — sie brauchen keine Zone.

   NUR AB 750px. Die Zonen rechnen in Rasterzellen, und --cell hängt an der Inhaltsbreite:
   auf einem 390px-Telefon sind das ~34px statt ~120px. Feste Höhen in dieser Einheit würden
   dort jede Zone auf ein Viertel zusammenquetschen und den Inhalt abschneiden. Auf Mobil
   liegen die Blöcke ohnehin untereinander, ein fester Bereich bringt dort nichts. */
@media screen and (min-width: 750px) {
  /* Jede Zone ist ein fester Rahmen mit senkrecht zentriertem Inhalt — dasselbe Prinzip wie
     beim Produktnamen (.product__title-top weiter unten). Dadurch sitzt der Inhalt auch dann
     ruhig in seinem Feld, wenn eine Zeile fehlt, statt oben zu kleben.
     flex-shrink: 0 auf den Kindern ist PFLICHT: Flex-Elemente schrumpfen sonst, sobald der
     Inhalt die feste Zonenhöhe übersteigt — dann wären die Zonenhöhen nur noch Wunschgrößen
     (dieser Fehler hat die Box hier schon einmal zusammengequetscht). Was nicht passt, soll
     stattdessen von pdp-zone-fit.js zusammengezogen werden. */
  .template-product .product__price-wrapper,
  .template-product .product__bio-info,
  .template-product .product__info-block {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .template-product .product__price-wrapper > *,
  .template-product .product__bio-info > *,
  .template-product .product__info-block > * {
    flex-shrink: 0;
  }
  .template-product .product__price-wrapper {
    height: calc(var(--cell, 120px) * var(--pdp-zone-price));
  }
  .template-product .product__bio-info {
    height: calc(var(--cell, 120px) * var(--pdp-zone-bio));
  }

  /* Ausnahme: leere Bio-Zone fällt zusammen.
     Die Zone hält bei Bio-Produkten das EU-Logo und bei Dr.-Hauschka-Artikeln den
     Mengenhinweis. Bei konventioneller Ware bleibt sie leer — und reservierte trotzdem ihre
     volle Höhe, was dort als große Lücke über den Artikelzeilen stand.
     :empty greift nur bei einem WIRKLICH leeren Element, auch Leerzeichen zählen schon als
     Inhalt. Das Liquid gibt den Kasten in diesem Fall ohne jedes Zeichen aus (Whitespace-
     Steuerung mit {%- -%}), deshalb funktioniert das hier ohne Zusatzlogik. Wer dort später
     Markup einfügt, muss die Whitespace-Steuerung erhalten.

     Was NICHT mitwandert: die Kaufbox. Sie ist Geschwister der Infobox, und deren Höhe ist
     mit --pdp-info-cells fest — die Artikelzeilen rücken also innerhalb der Box hoch, der
     Kaufbereich bleibt an seiner Rasterlage. Genau das ist hier gewollt. */
  .template-product .product__bio-info:empty {
    height: 0;
  }

  /* REGLER --pdp-bio-shift: rueckt den Dr.-Hauschka-Mengenhinweis innerhalb der Bio-Zone
     nach unten (Rasterzellen). Die Zone selbst behaelt ihre Hoehe, es bewegt sich also
     nichts darunter.

     Warum ueberhaupt: Der Inhalt der Zone ist bereits senkrecht zentriert. Die Zone ist aber
     1.1 Zellen hoch, weil dort sonst das EU-Bio-Logo steht — eine einzelne Textzeile sitzt
     darin zwar mittig, wirkt aber verloren und klebt optisch an der Variantenauswahl darueber.

     :has() grenzt den Versatz auf den Hinweis ein. Das EU-Logo bleibt unberuehrt mittig; es
     fuellt die Zone ohnehin aus und wuerde bei gleichem Versatz unten anstossen.

     Der doppelte Betrag als padding-top ist derselbe Kniff wie in der Preiszone: Zentriert
     wird im Inhaltsbereich zwischen den Innenabstaenden, ein Polster oben verschiebt die
     Mitte also nur um die HAELFTE seines Werts. */
  .template-product .product__bio-info:has(.drh-max-hinweis) {
    --pdp-bio-shift: 0.25;
    padding-top: calc(var(--cell, 120px) * 2 * var(--pdp-bio-shift));
  }
  .template-product .product__info-block {
    height: calc(var(--cell, 120px) * var(--pdp-zone-info));
  }

  /* Zone Titel — derselbe Gedanke, aber oberhalb BEIDER Spalten.
     Der Titel steht über Bild und Info-Spalte; wächst er auf zwei Zeilen, rutscht alles
     darunter nach unten — auch das Produktbild. Feste Höhe, Text darin senkrecht zentriert:
     ein einzeiliger Titel sitzt optisch mittig, ein zweizeiliger sprengt nichts.
     padding hier bewusst auf 0 (section-main-product.css ~1571 setzt 2rem unten): der Abstand
     soll allein aus der Zonenhöhe kommen, sonst rechnet man gegen zwei Größen gleichzeitig.
     Spezifität mit body davor, damit die Regel unabhängig von der Ladereihenfolge gewinnt.
     REGLER --pdp-zone-title in Rasterzellen. */
  body.template-product .product__title-top {
    --pdp-zone-title: 0.55;
    box-sizing: border-box;
    height: calc(var(--cell, 120px) * var(--pdp-zone-title));
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  /* === Preisblock: linksbündig mit den übrigen Zeilen ===
     section-main-product.css ~1541 gibt dem Wrapper padding: 1rem 1.25rem. Die 1,25rem links
     waren der Einzug, um den Preis und MwSt-Hinweis gegenüber Artikelnummer/Marke/Herkunft
     versetzt standen — die liegen als .product__info-line ohne Innenabstand an der Spaltenkante.
     Seitlich also auf 0. Senkrecht ebenfalls schlanker, weil das Polster bei fester Zonenhöhe
     vom Platz für den Inhalt abgeht (border-box) — mit 1rem oben und unten wurde der
     MwSt-Hinweis angeschnitten.
     Der beige Hintergrund des Wrappers bleibt: er liegt auf beigem Grund und ist ohnehin
     unsichtbar, ein Entfernen würde nur eine weitere Regel gegen die Section-Datei brauchen. */
  .template-product .product__price-wrapper {
    /* REGLER --pdp-price-shift: rückt den INHALT innerhalb der Preiszone nach unten
       (Rasterzellen) — näher an den Bio-Block darunter. Die Zone selbst behält ihre feste
       Höhe, deshalb bewegt sich nichts unterhalb.

       Warum das Doppelte als padding-top: Der Inhalt ist in der Zone senkrecht zentriert
       (justify-content: center weiter oben). Zentriert wird im INHALTSBEREICH, also zwischen
       den Innenabständen — ein Polster oben verschiebt die Mitte nur um die HÄLFTE seines
       Werts. Mit dem doppelten Betrag entspricht der Regler wieder genau der Verschiebung.

       Obergrenze: Die Zone ist 0.55 Zellen (66px) hoch, der Inhalt braucht davon ~54px. Mehr
       als rund 0.05 Zellen lassen sich also nicht verschieben — darüber schneidet das
       overflow: hidden der Zone die MwSt-Zeile unten ab. Soll es mehr sein, muss die Zone
       höher werden (--pdp-zone-price), und dann rutscht alles darunter mit. */
    --pdp-price-shift: 0.05;
    padding: calc(var(--cell, 120px) * 2 * var(--pdp-price-shift)) 0 0 0;
    /* margin auf 0: section-main-product.css ~1545 setzt margin: 1rem 0. Diese 2×16px standen
       AUSSERHALB der Zonenhöhe und damit auch außerhalb der Summe, gegen die --pdp-info-cells
       gerechnet wird — dadurch war der Stapel 32px höher als die Boxhöhe annahm und lief in
       den unten verankerten Kaufbereich hinein (die Zeile "Qualität: BIO" verschwand dahinter).
       Der Abstand kommt jetzt allein aus den Zonenhöhen; nur so ist die Summe verlässlich. */
    margin: 0;
  }

  /* Aus demselben Grund: die drei Zonen dürfen untereinander keine Außenabstände einbringen,
     sonst stimmt die Summe gegen --pdp-info-cells wieder nicht. */
  .template-product .product__bio-info,
  .template-product .product__info-block {
    margin: 0;
  }

  /* Abstand Preis → MwSt-Hinweis. section-main-product.css ~1552 setzt 0.5rem. */
  .template-product .product__price-wrapper .product__tax {
    margin-top: 0.1rem;
  }

  /* Abstand Bio-Kontrollnummer → Bio-Herkunft. Die beiden Zeilen haben margin: 0, ihr Abstand
     kam allein aus dem geerbten Zeilenabstand des Body (~1.5). */
  .template-product .product__bio-line {
    line-height: calc(1.25 * var(--zone-lh, 1));
  }

  /* === Zonenbreite an den Text binden ===
     Als Blockelemente waren die drei Zonen so breit wie die ganze rechte Spalte, obwohl ihr
     Text nur einen Teil davon einnimmt. grid-background.js sperrt aber das RECHTECK — das
     Raster verschwand deshalb bis zum rechten Spaltenrand, also auch über der leeren Fläche
     neben dem Text. Mit fit-content endet das Rechteck am Text, und die senkrechten Linien
     rechts davon kommen zurück.
     Die Höhen bleiben unberührt fest; nur die Breite folgt jetzt dem Inhalt. */
  .template-product .product__price-wrapper,
  .template-product .product__bio-info,
  .template-product .product__info-block {
    width: fit-content;
    max-width: 100%;
  }

  /* === Infobox als Ganzes: feste Höhe, Kaufbereich unten verankert ===
     Bisher waren nur die EINZELNEN Zonen fest. Das reicht nicht: fehlt ein ganzer Block
     (Produkt ohne Bio-Logo) oder ist einer gar nicht im Markup (Produkt ohne Varianten),
     gibt es keine Zone, die Platz halten könnte — der Kaufbereich rutschte hoch. Zu sehen
     beim Vergleich "Ume Su" (mit Bio) und "Arame" (ohne).

     Ein erster Versuch mit display: flex + order + margin-top: auto ist FEHLGESCHLAGEN, das
     ist hier festgehalten, damit es niemand wiederholt. Zwei Gründe:
       1. Die Section verpackt jeden Block in ein anonymes <div> für {{ block.shopify_attributes }}.
          Der Kaufbutton ist also nicht als .product-form ansprechbar, sondern liegt in
          <div><product-form class="product-form">. Die order-Regel griff daher nie, der
          Wrapper behielt order: 0 und sprang vor ALLE anderen Blöcke — der Button landete
          über dem Produktnamen.
       2. Flex-Elemente schrumpfen standardmäßig (flex-shrink: 1). Die festen Zonenhöhen
          darüber waren damit nur noch Wunschgrößen; bei fester Container-Höhe wurden Preis,
          Bio-Block und Artikelzeilen zusammengequetscht.

     Jetzt stattdessen: normaler Blockfluss. Alle Zonen darüber haben feste Höhen, der Stapel
     endet dadurch IMMER bei 2.95 Zellen — unabhängig davon, ob ein Produkt ein Bio-Logo oder
     Varianten hat. Auf dieser verlässlichen Kante setzt der Kaufbereich mit seinem eigenen
     Abstand auf (--buybox-gap in section-main-product.css). Kein absolutes Positionieren mehr:
     Es musste gegen die !important-Regeln der dortigen Kaufbox-Ebene antreten und hat den
     Kasten dabei jedes Mal auseinandergerissen.

     REGLER --pdp-info-cells: Gesamthöhe der Infobox in Rasterzellen.
     Die Box umfasst NUR die Informationen (Preis, Bio, Artikelzeilen). Der Kaufbereich gehört
     ausdrücklich NICHT hinein — er steht darunter. Weil sein Abstand (--buybox-gap in
     section-main-product.css) im Fluss auf dem Stapelende aufsetzt, liegt er automatisch
     unterhalb der Boxkante. Der Überlauf ist gewollt, deshalb kein overflow: hidden.

     2.9 liegt BEWUSST unter der Höhe des Stapels darin (2.95 Zellen = 0.55 + 1.1 + 0.9 + 0.4).
     Zwei Folgen, die man kennen muss:
       1. Die unterste Artikelzeile ragt rund 6px unter die Boxkante — also unter das Rechteck,
          das das Raster ausspart. Sichtbar als Zeile, die neben ihrer eigenen Aussparung steht.
       2. Die Unterkante liegt nicht mehr auf einer Rasterlinie, der kantentreue Schnitt kann
          dort keine Linie stehen lassen. Dafür wäre ein ganzzahliger Wert nötig (3).
     Außerdem hängt die Kaufbox an dieser Kante: Sie folgt im Fluss, jede Änderung hier
     verschiebt sie um denselben Betrag mit. */
  .template-product .product__info-container {
    --pdp-info-cells: 2.9;
    box-sizing: border-box;
    height: calc(var(--cell, 120px) * var(--pdp-info-cells));
    position: relative;
  }

  /* === Varianten in die Infobox holen ===
     base.css ~6803 setzt sie auf position: absolute in die rechte obere Ecke — dadurch standen
     sie neben der Box statt darin (siehe "Arame 100 g/50 g"). Zurück in den Fluss und
     linksbündig wie die übrigen Zeilen.
     Die Spezifität liegt bewusst über der dortigen Regel (.template-product davor), damit die
     Reihenfolge der Datei egal ist. */
     Feste Zonenhöhe auch hier, damit die Summe des Stapels vollständig bekannt ist:
       Preis 0.55 + Bio 1.1 + Zeilen 0.9 + Varianten 0.4 = 2.95 Zellen
       + 1 Zelle Kaufbereich                              = 3.95 Zellen
     Das passt in --pdp-info-cells: 4. Ohne feste Höhe hier wäre die Variantenauswahl der
     einzige unbekannte Summand — und genau solche Unbekannten haben den Kaufbereich zuletzt
     in den Text laufen lassen. */
  .template-product .product__info-container variant-selects {
    /* !important, weil die absolute Platzierung weiter unten in dieser Datei (~6800) sonst
       je nach Auswertung gewinnt — im Inspektor stand sie trotz höherer Spezifität hier noch
       oben rechts. Mit !important ist es eindeutig. */
    position: static !important;
    display: block;
    box-sizing: border-box;
    height: calc(var(--cell, 120px) * var(--pdp-zone-variants));
    overflow: hidden;
    width: auto;
    max-width: 100%;
    text-align: left;
    margin: 0;
  }
  .template-product .product__info-container variant-selects .product-form__input--pill,
  .template-product .product__info-container variant-selects .product-form__input--pill .form__label {
    text-align: left;
  }
  .template-product .product__info-container variant-selects fieldset {
    justify-content: flex-start;
  }

  /* === Kaufbereich: bewusst NICHT hier ===
     Mengenwähler und Kaufformular werden vollständig von section-main-product.css gesteuert
     (Abschnitt ab ~1698). Dort liegen Breite, Höhen, Innenabstände, der gemeinsame
     Hintergrund in zwei Hälften und der gemeinsame Versatz --buybox-x / --buybox-y. Diese
     Regeln arbeiten durchgehend mit !important.

     An dieser Stelle stand zwischenzeitlich eine ZWEITE Ebene (absolute Positionierung,
     eigene Höhen). Sie konnte gegen das !important nie gewinnen, hat den Kasten stattdessen
     auseinandergerissen und den Kaufbutton mal über den Produktnamen, mal auf einen dünnen
     Streifen geschoben. Ersatzlos entfernt: Die Kaufbox hat GENAU EINEN Ort, an dem sie
     eingestellt wird.

     Von hier aus wirkt nur die Vorbedingung dafür, dass der dortige Abstand --buybox-gap
     verlässlich im selben Rasterfeld landet: Der Stapel darüber braucht eine feste Höhe.
     Dafür sorgen die Zonenhöhen weiter oben und die Ersatzhöhe für fehlende Varianten hier. */

  /* Produkte ohne Varianten haben kein <variant-selects> im Markup — dann fehlt dessen Zone
     im Stapel und alles darunter rückt um 0.4 Zellen hoch. Genau das war der Unterschied
     zwischen "Weißes Tahin" (ohne Varianten) und "Arame" (mit). Die fehlende Höhe wird hier
     nachgereicht, damit der Stapel IMMER 2.95 Zellen hoch ist. */
  .template-product .product__info-container:not(:has(variant-selects)) .product__info-block {
    margin-bottom: calc(var(--cell, 120px) * var(--pdp-zone-variants));
  }

  /* === Angriffspunkte für die automatische Anpassung (pdp-zone-fit.js) ===
     Passt der Inhalt nicht in seine Zone, setzt das Skript auf dem ZONEN-Element drei
     Variablen, die von hier aus wirken. Reihenfolge der Eskalation dort: erst --zone-ls
     (Laufweite) und --zone-lh (Zeilenabstand), erst danach --zone-fs (Schriftgröße).
     Ohne Skript oder ohne Überlauf sind alle drei unbelegt und die Fallbacks (normal / 1 / 1)
     ergeben exakt die ursprünglichen Werte — die Regeln sind also im Normalfall wirkungslos.

     Die font-size-Angaben stehen hier NOCH EINMAL als calc(), weil die Basiswerte in
     section-main-product.css als feste px-Werte liegen: ein Faktor auf dem Elternelement
     würde sie nicht erreichen. Ändert sich dort ein Grundwert, muss er hier mitgezogen
     werden — deshalb steht er jeweils sichtbar in der calc-Klammer. */
  .template-product .product__title-top,
  .template-product .product__price-wrapper,
  .template-product .product__bio-info,
  .template-product .product__info-block {
    letter-spacing: var(--zone-ls, normal);
  }

  body.template-product .product__title-top h1 {
    font-size: calc(32px * var(--zone-fs, 1));
    line-height: calc(1.2 * var(--zone-lh, 1));
  }

  .template-product .product__price-custom {
    line-height: calc(1.2 * var(--zone-lh, 1));
  }
  .template-product .product__price-main {
    font-size: calc(26px * var(--zone-fs, 1));
  }
  .template-product .product__price-size {
    font-size: calc(22px * var(--zone-fs, 1));
  }
  .template-product .product__price-compare {
    font-size: calc(18px * var(--zone-fs, 1));
  }
  .template-product .product__price-grundpreis {
    font-size: calc(16px * var(--zone-fs, 1));
  }
  .template-product .product__price-wrapper .product__tax {
    font-size: calc(15px * var(--zone-fs, 1));
    line-height: calc(1.4 * var(--zone-lh, 1));
  }
  .template-product .product__bio-line {
    font-size: calc(16px * var(--zone-fs, 1));
  }
  .template-product .product__info-line {
    font-size: calc(14px * var(--zone-fs, 1));
    line-height: calc(1.4 * var(--zone-lh, 1));
  }
}

/* Bio-Logo (Zone 3): 1,5:1, Höhe in Rasterzellen — Breite folgt (× 1,5).
   Da die Quelldatei bereits 1:1,5 ist (538×359), zeigt contain sie randlos, ohne Beschnitt. */
.template-product .product__bio-logo {
  --pdp-bio-logo-h: 0.62;
  height: calc(var(--cell, 120px) * var(--pdp-bio-logo-h));
  width: calc(var(--cell, 120px) * var(--pdp-bio-logo-h) * 1.5);
  object-fit: contain;
  display: block;
  margin-bottom: 0.75rem;
}
.template-product .product__bio-line {
  margin: 0;
  font-size: 16px;
  color: rgba(var(--color-foreground), 0.85);
}

/* === PDP-Galerie: Desktop-Pfeilnavigation im Quadrat-Rahmen ===
   Auf dem Desktop bleibt nur das aktive Bild im Rahmen; pdp-gallery-arrows.js hängt
   die Klasse .is-active um. So bleibt der eine feste Quadrat-Rahmen (inkl. Neigung und
   Schatten) stehen, nur das Foto darin wechselt. Auf Mobil (< 750px) greift dieser
   Block NICHT — dort bleibt Dawns nativer Swipe-Slider mit allen Bildern aktiv. */

/* Standard: Pfeile aus. Das JS fügt die Leiste immer ein (auch auf Mobil), sichtbar
   wird sie aber erst ab 750px – sonst stünden auf dem Handy zwei nackte Buttons neben
   Dawns eigenem Swipe-Slider. */
.pdp-media-arrows {
  display: none;
}

@media screen and (min-width: 750px) {
  .template-product .product__media-list .product__media-item:not(.is-active) {
    display: none;
  }

  /* Pfeil-Leiste liegt über dem Viewer (per JS eingefügt); Viewer als Bezugsrahmen. */
  .template-product [id^='GalleryViewer'] {
    position: relative;
  }

  /* Die Leiste überspannt den ganzen Viewer; die genaue Position der beiden Buttons
     rechnet pdp-gallery-arrows.js aus der TATSÄCHLICH gemessenen Bildgeometrie und setzt
     sie als left/top in Pixeln. Grund: die reale Lage des Rahmens in der Medienspalte
     hängt von Flexbox, Padding und Zentrierung ab und ließ sich aus Variablen nicht
     zuverlässig treffen (linker Pfeil landete im leeren Raster). Messen statt raten. */
  .template-product .pdp-media-arrows {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none; /* nur die Buttons sind klickbar, nicht die Leiste */
    z-index: 3;
  }

  /* left/top kommen vom JS und meinen den MITTELPUNKT des Buttons (daher translate -50%). */
  .template-product .pdp-media-arrow {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 100%;
    border: 1px solid var(--brand-red);
    background-color: var(--brand-beige);
    color: var(--brand-red);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s ease;
  }

  .template-product .pdp-media-arrow:hover:not([disabled]) {
    background-color: var(--brand-red);
    color: var(--brand-beige);
  }

  /* Am Anfang/Ende: der jeweils sinnlose Pfeil wird blass und unklickbar. */
  .template-product .pdp-media-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  /* Chevron aus zwei Rahmenkanten – kein Icon-Asset nötig, Farbe erbt von color. */
  .template-product .pdp-media-arrow::before {
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }
  .template-product .pdp-media-arrow--prev::before {
    transform: rotate(-135deg);
    margin-left: 0.35rem;
  }
  .template-product .pdp-media-arrow--next::before {
    transform: rotate(45deg);
    margin-right: 0.35rem;
  }
}

.header__submenu {
  min-width: 250px !important;
  white-space: nowrap !important;
}
.main-page-title {
  color: var(--brand-red) !important;
  font-family: 'Roboto Slab', serif !important;
}
.footer__menu-item,
.footer .list-menu__item,
.footer .list-menu__item a {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ============================================================================
   [B2] · SCHRIFTFIXIERUNG (ROBOTO SLAB)
   ------------------------------------------------------------------------
   Erzwingt Roboto Slab in Metafeldern, Impressum und schmalen Textseiten.
   ============================================================================ */

/* ========================================
   ROBOTO SLAB — feste Fixierung
   ======================================== */

/* Alle Metafeld-Akkordeons — über product-info */
#MainProduct-template-28503747789147__main details,
#MainProduct-template-28503747789147__main details *,
#MainProduct-template-28503747789147__main details summary,
#MainProduct-template-28503747789147__main details span,
#MainProduct-template-28503747789147__main details div,
#MainProduct-template-28503747789147__main details p {
  font-family: 'Roboto Slab', Georgia, serif !important;
}

/* Universell — für den Fall, dass sich die ID ändert */
[id^="MainProduct-template"] details,
[id^="MainProduct-template"] details * {
  font-family: 'Roboto Slab', Georgia, serif !important;
}

/* Impressum — genaue Selektoren */
[id^="shopify-section-template"] .rte,
[id^="shopify-section-template"] .rte *,
.main-page-title,
.page-width--narrow .rte,
.page-width--narrow .rte *,
.page-width--narrow h1,
.page-width--narrow h2,
.page-width--narrow h3,
.page-width--narrow p,
.page-width--narrow li,
.page-width--narrow span {
  font-family: 'Roboto Slab', Georgia, serif !important;
}

/* ============================================================================
   [B3] · HEADER-MENUE & DROPDOWN
   ------------------------------------------------------------------------
   Breiteres Onlineshop-Dropdown und halbtransparenter Menue-Hintergrund.
   ============================================================================ */

/* Onlineshop-Dropdown-Menü erweitern */
.header__submenu.list-menu--disclosure {
  min-width: 280px;
  width: max-content;
  max-width: 400px;
  white-space: normal;
  word-wrap: break-word;
}
/* Transparenz des Dropdown-Menü-Hintergrunds */
.header__submenu.global-settings-popup {
  background-color: rgba(var(--brand-red-rgb), 0.8) !important; /* 0.85 = 85% Deckkraft */
}

/* ============================================================================
   [B4] · PRODUKTKARTEN (KARTE UNTER DEM BILD)
   ------------------------------------------------------------------------
   Aufbau der Produktkarte: Bildbox plus Info-Block darunter.
   ============================================================================ */

/* === Karte — Block unter dem Bild === */
.card {
  position: relative;
}

/* ---- NAMENSRAUM .atc-overlay (Custom) ----------------------------------------
   Eigenes Add-to-Cart-Overlay auf den Produktkacheln (Hover/Mobile-Tap):
   Mengenzähler + „In den Warenkorb"-Button.
   NICHT verwechseln mit:
     • Dawns .card__*      → die Produktkarte selbst (Theme-Basis, nicht anfassen)
     • Dawns .quick-add*   → Dawns eigenes Quick-Add (quick-add.css/.js, ungenutzt)
   Aufbau (BEM):
     .atc-overlay                → Block (das Overlay über dem Bild)
     .atc-overlay__wrapper       → innerer Container
     .atc-overlay__btn           → ATC-Button (--soldout, -inner, -price)
     .atc-overlay__qty           → Mengenzeile (-btn, -display, -plus, -minus, -input-<id>)
     .atc-overlay__toggle        → „+"-Button (mobil, klappt das Overlay auf)
   Die Klassen stehen in CSS + card-product.liquid + dem Inline-JS in theme.liquid —
   beim Umbenennen IMMER alle drei Ebenen anfassen.
   ------------------------------------------------------------------------------ */
.atc-overlay {
  overflow: hidden;
  background: rgb(var(--color-background));
  /* Kein border-top: die 1px-Linie zeichnete beim Hover einen feinen roten Strich quer
     über die Oberkante des Produktbilds (das Overlay deckt sich exakt mit dem Bild). */
}

/* Achtung: display/width/margin gehören NICHT hierher — .card-wrapper .atc-overlay
   .atc-overlay__wrapper (~5271/5281) trifft mit 3 Klassen und gewinnt gegen diese eine.
   Der Wrapper ist dadurch ein BLOCK (Mengenwähler über Preis-Button); align-items und gap
   wären hier wirkungslos und sind deshalb entfernt. Breite/Zentrierung stehen bei 5281.
   Auch KEIN opacity: das würde Schrift, Zahlen, Symbole und Rahmen mit ausbleichen — die
   0.8 sitzen in den background-Farben von .atc-overlay__btn und .atc-overlay__qty. */
.atc-overlay__wrapper {
  padding: 0.6rem 0;
}

.atc-overlay__qty {
  display: flex;
  align-items: center;
  border: 2px solid var(--brand-red);
  border-radius: 4px;
  overflow: hidden;
}

.atc-overlay__qty-btn {
  background: none;
  border: none;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.atc-overlay__qty-btn:hover {
  background: rgba(var(--brand-red-rgb), 0.08);
}

.atc-overlay__qty-display {
  min-width: 2.4rem;
  text-align: center;
  font-size: 1.4rem;
  color: #333;
  /* Ist ein <input>: die Browser-Grundgestaltung (Rahmen, Hintergrund, eigene Schrift)
     abräumen, damit es weiterhin wie reiner Text im Mengenwähler aussieht. */
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  appearance: none;
}

.atc-overlay__btn {
  flex: 1;
  /* Voll deckend (auf Wunsch). Der Mengenwähler darüber bleibt bei 0.8 (siehe .atc-overlay__qty). */
  background: var(--brand-red);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: auto;
  min-height: auto;
}

.atc-overlay__btn:hover { opacity: 0.85; }
.atc-overlay__btn--soldout { opacity: 0.5; cursor: not-allowed; }

.atc-overlay__btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.atc-overlay__btn-price {
  font-size: 1.8rem;
  font-weight: 600;
}

/* Dieselbe Behandlung wie am geneigten Overlay-Container (siehe dort die ausführliche
   Begründung), hier aber NOCHMAL direkt auf den Elementen: <button> und <input> erben
   Schrift-Eigenschaften nicht vom Vorfahren, sondern starten bei den Vorgaben des
   Browsers. Ohne diese Wiederholung bliebe ausgerechnet der Preis im Button und die
   Zahl im Mengenfeld bei der huckeligen Darstellung — also genau die Stellen, um die
   es geht. */
.atc-overlay__btn,
.atc-overlay__btn-inner,
.atc-overlay__btn-price,
.atc-overlay__qty-btn,
.atc-overlay__qty-display,
.atc-overlay input {
  text-rendering: geometricPrecision;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.atc-overlay {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   [B5] · SUCHE, FILTER & SORTIERUNG
   ------------------------------------------------------------------------
   Rote Akzentfarbe fuer Suchfeld, Filter, Sortierung und Trefferpreise.
   ============================================================================ */

/* Suchergebnisse - Produktname */
.card__heading.h5 a,
.card__heading a.full-unstyled-link {
  color: var(--brand-red) !important;
}

/* Suchergebnisse - Seitentitel */
h1.h2.center {
  color: var(--brand-red) !important;
}

/* Suchergebnisse - Rahmen des Suchfelds */
.search__input.field__input {
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
}

/* Suchfeld border-bottom */
.search_input.field__input {
  border-bottom-color: var(--brand-red) !important;
}
/* Such-Icon — Umrisszeichnung, nicht gefüllt.
   Hier stand fill: var(--brand-red). Die Lupe (assets/icon-search.svg) ist eine Lucide-Grafik
   aus einem Kreis und einem Strich, gedacht als reine Kontur: Sie bringt fill="none" und
   stroke="currentColor" als Attribute mit. Ein fill aus dem Stylesheet schlägt das Attribut —
   der Kreis lief damit voll und die Lupe wurde zur roten Scheibe.
   Die Farbe kommt über color/stroke, fill muss ausdrücklich none bleiben.

   Der zweite Selektor hieß .search_button (Unterstrich) und traf deshalb nie etwas; korrigiert
   auf .search__button. */
.search__button .icon,
.search__button.field__button svg {
  color: var(--brand-red) !important;
  fill: none !important;
  stroke: var(--brand-red) !important;
}

/* Filter-Text (Verfügbarkeit, Preis) */
.facets__summary,
.facets__summary .caption-large {
  color: var(--brand-red) !important;
}

/* Sortieren nach */
.facet-filters__sort .caption-large,
.facets-container select {
  color: var(--brand-red) !important;
}
/* Rahmen des Suchfelds */
.field {
  border-color: var(--brand-red) !important;
}
/* Hier stand #Search-In-Modal { color: var(--brand-red) !important }.
   Die Regel gehörte zur früheren roten Suchleiste und färbte den eingegebenen Text
   bordeauxrot. Im neuen Suchbereich ist die Schriftfarbe im Feld #2a2a2a (siehe [B13]) —
   und eine ID mit !important hätte sich von dort nicht mehr überstimmen lassen.
   Sie traf ohnehin nur eine der beiden Suchen: Die zweite Instanz im Header heißt
   Search-In-Modal-1 und war nie erfasst. */
/* Icon X (Zurücksetzen) und Lupe */
.reset__button .icon,
.search__button .icon {
  color: var(--brand-red) !important;
  stroke: var(--brand-red) !important;
}

/* Hier stand #main-search-filters { margin-top: -2rem } — ein Ausgleich für den alten
   Suchkopf (zentrierter Titel, breites Suchfeld darunter). Seit Titel und Suchfeld eine
   Zeile bilden und die Filterleiste denselben Balken wie im Shop trägt, regelt den
   Abstand --filterbar-y in component-filterbar-title.css. Eine ID hätte sich von dort
   nicht mehr überstimmen lassen. */


/* Alle Filter-/Sortier-/Ergebnis-Labels in Markenrot (konsolidiert aus 3 Regeln) */
.facets__heading,
.facets__label,
.facet-filters__label,
.facets-label.caption-large,
.facet-filters__label.caption-large,
.facets__summary .caption-large,
.facet-filters__sort .caption-large,
.facet-filters__sort select,
.facets-container .caption-large,
.product-count__text {
  color: var(--brand-red) !important;
}
/* Preis auf der Produktkarte */
.price__regular .price-item,
.price__sale .price-item,
.unit-price-measurement {
  color: var(--brand-red) !important;
}

/* Preis pro kg */
.unit-price.caption {
  color: var(--brand-red) !important;
}
/* Label "Suchen" über dem Feld */
.field__label {
  color: var(--brand-red) !important;
}
.card__media,
.card__media .media,
.card__media .media--transparent {
  background-color: #ffffff !important;
}

.card__media .media > img {
  object-fit: contain !important;
}

/* ============================================================================
   [B6] · GRID-HINTERGRUND & FARB-SCHEMATA
   ------------------------------------------------------------------------
   Beige Grundflaeche mit Canvas-Raster; .gradient-Flaechen bleiben transparent.
   ============================================================================ */

/* === Grid-Hintergrund via Canvas (siehe grid-background.js) === */
html {
  background-color: var(--brand-beige) !important;
}

body {
  background-image: none !important;
  background-color: transparent !important;
}

/* Alte .gradient-Regeln bleiben — durchscheinen lassen */
.color-scheme-1,
.color-scheme-1.gradient {
  background-image: none !important;
  background-color: transparent !important;
}
.gradient,
.color-scheme-1.gradient,
.color-scheme-2.gradient,
.color-scheme-3.gradient,
.color-scheme-4.gradient,
.color-scheme-5.gradient,
.color-scheme-6.gradient,
.collection-hero.gradient {
  background-attachment: scroll !important;
}

/* ============================================================================
   [B7] · BASIS-TYPOGRAFIE & CUSTOM-HEADER
   ------------------------------------------------------------------------
   Globale Schrift/Links plus eigenes Header-Layout „DER GROSSE LADEN".
   ============================================================================ */

/* === 1.4 Base typography === */

/* Headings: Roboto Slab, color from active scheme */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', Georgia, serif;
  color: rgb(var(--color-foreground));
}

/* Body: 15px, line-height 1.5 */
body {
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Links: no underline, underline on hover */
a {
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover {
  text-decoration: underline;
}
/* === DER GROSSE LADEN — Custom Header === */

/* Logo + Subtitle stapeln sich vertikal, zentriert */
.header__heading-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.header__subtitle {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.header__subtitle-image {
  display: block;
  max-height: 28px;
  width: auto;
  margin: 0 auto;
}

.header__subtitle-text {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: rgb(var(--color-foreground));
}
/* === DER GROSSE LADEN — Header layout (Phase 2 — final) === */

@media screen and (min-width: 1100px) {
  /* Grid: Logo oben, [. Menü Icons] unten — Menü zentriert unter dem Logo */
  .header.header--top-center {
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "heading heading heading"
      "navigation navigation navigation" !important;
    column-gap: 0.4rem;
    row-gap: 0;
  }

  /* Logo oben, zentriert */
  .header.header--top-center > .header__heading,
  .header.header--top-center > .header__heading-link {
    grid-area: heading;
    justify-self: center;
  }

  /* === EINE Stellschraube für die Zentrierung der unteren Reihe ===
     Das Menü steht per justify-self: center mittig, Suche und Icons hängen rechts
     daneben — die Gruppe als Ganzes ist dadurch nach rechts verschoben und wirkt
     "angehängt". Korrektur: alle drei um die HALBE Breite des Blocks aus Suche +
     Icons (inkl. Abstand zum Menü) nach links rücken. Dann liegt die Mitte der
     Gruppe auf der Mitte des Headers.
     Nur diesen einen Wert anfassen — die drei Regeln unten rechnen ihn selbst ein.
     Größer = Gruppe weiter nach links, kleiner = weiter nach rechts.
     Das Grid bleibt bewusst unangetastet: die Bereichsnamen (u.a. left-icons) werden
     von weiteren Theme-Regeln genutzt, ein Umbau dort zerlegt den Header. */
  .header.header--top-center {
    --header-group-shift: 6.1rem;
  }

  /* Untere Reihe — relative Basis für absolute Icons */
  .header.header--top-center > .header__inline-menu {
    grid-area: navigation;
    justify-self: center;
    justify-content: center;
    position: relative;
    /* transform statt margin: verschiebt rein optisch und lässt die Grid-Zelle
       unberührt, kann also die Zeilenhöhe und Nachbarn nicht beeinflussen */
    transform: translateX(calc(-1 * var(--header-group-shift)));
  }
  .header.header--top-center > .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  /* Suche + Icons — ein Block, nach links näher zum Menü verschoben */
  .header.header--top-center > .header__icons {
    position: absolute;
    right: calc(18rem + var(--header-group-shift));
    bottom: 1.1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
  }

  /* Suche — direkt links von den Icons, im selben Block */
  .header.header--top-center > header-search,
  .header.header--top-center > .header__search {
    position: absolute !important;
    right: calc(27rem + var(--header-group-shift));
    bottom: 1.1rem;
    align-self: center;
    display: inline-flex !important;
    margin: 0 !important;
  }

  /* Doppelte Suche in den Icons ausblenden */
  .header.header--top-center .header__icons header-search,
  .header.header--top-center .header__icons .header__search {
    display: none;
  }

  /* === Farben der Elemente in der unteren (beigen) Reihe — dunkelrot === */
  .header.header--top-center > .header__inline-menu,
  .header.header--top-center > .header__inline-menu *,
  .header.header--top-center > header-search,
  .header.header--top-center > header-search *,
  .header.header--top-center > .header__icons,
  .header.header--top-center > .header__icons * {
    color: var(--brand-red) !important;
  }

  .header.header--top-center > .header__icons svg,
  .header.header--top-center > .header__icons svg path,
  .header.header--top-center > header-search svg,
  .header.header--top-center > header-search svg path {
    stroke: var(--brand-red) !important;
  }
}

/* === Kompakter Header beim Scrollen ===
   Die Klasse .header-compact setzt die Sticky-Logik in sections/header.liquid (~382) auf
   .section-header, sobald 20px gescrollt wurde. Bewusst NICHT Dawns 'scrolled-past-header':
   das greift erst hinter der Header-Unterkante, also viel zu spät.
   Die dabei entstehende Höhenänderung gleicht grid-background.js aus, sonst rutscht der
   gesamte Inhalt gegenüber dem Hintergrundraster (siehe dort: contentShift).
   max-height statt display: none, weil display sich nicht animieren lässt — so gleitet es
   weich. Der Wert muss nur GRÖSSER als die tatsächliche Höhe sein (Bild max. 28px). */
.section-header .header__subtitle {
  overflow: hidden;
  max-height: 6rem;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
}
.section-header.header-compact .header__subtitle {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}

/* Die Produktdetailseite war hier früher ausgenommen (Untertitel klappte dort NICHT ein),
   weil das Einklappen die Header-Höhe um ~44px ändert und das große Produktbild sichtbar
   mitriss. Der eigentliche Verursacher waren aber die sticky Produktspalten — siehe die
   ausführliche Notiz bei "Sticky-Spalten auf der Produktseite abschalten" weiter oben.
   Seit die beide wirklich statisch sind, gibt es keinen Grund mehr für die Ausnahme: die
   Produktseite klappt jetzt wie Startseite und Shop ein. Die einmalige Höhenänderung bei
   20px Scroll läuft über dieselbe 0,25s-Transition wie überall, und das Hintergrundraster
   gleicht sie über contentShift in grid-background.js aus. */

/* === Beiger Streifen unter der unteren Reihe — full bleed (gesamte Fensterbreite) === */
.header-wrapper {
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-color: var(--brand-beige);
  z-index: 0;
  pointer-events: none;
}

.header-wrapper > .header {
  position: relative;
  z-index: 1;
}

/* === Menü-Pillen ===
   Das horizontale Padding für den Abstand zwischen den Punkten sitzt am
   inneren Span (der Pille), nicht mehr am äußeren Link — sonst summiert es
   sich mit dessen 1.2rem und die Punkte laufen in die Icons.
   Der äußere Link wird darum horizontal auf 0 gesetzt. */
.header__inline-menu .header__menu-item {
  padding-left: 0;
  padding-right: 0;
}

/* Jeder Menüpunkt bekommt dieselbe Box inkl. transparentem Rahmen. Dadurch
   sitzen alle Punkte auf gleicher Höhe und nichts springt, wenn die Auswahl
   wechselt — der aktive unterscheidet sich nur durch Farbe und Rahmenfarbe. */
.header__inline-menu .header__menu-item > span {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
}

/* Aktiver Punkt: rote Schrift + sichtbarer Rahmen, statt Unterstreichung.
   Rahmen und text-decoration mit !important, weil die Theme-Regel weiter oben
   (~2892) sonst wieder eine Unterstreichung setzt und der Rahmen bei der
   Vererbung durchfällt. Padding/Radius sind identisch zur Box-Regel oben,
   damit sich beim Auswählen nichts in der Höhe verschiebt. */
.header__inline-menu .header__active-menu-item {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--brand-red) !important;
  border-radius: 999px;
  line-height: 1;
  color: var(--brand-red) !important;
  text-decoration: none !important;
}

/* === Header-Icons auf das Konto-Icon angleichen ===
   Referenz ist .header__icon .icon (~2612): 2rem = 20px. Der Warenkorb bekommt dort
   per .header__icon--cart .icon (~2620) abweichend 4.4rem — genau darum war er zu groß.
   Gleiche Box-Größe reicht aber nicht: das Konto-Icon zeichnet bis an den viewBox-Rand,
   die Lucide-Icons lassen Rand frei (Warenkorb 20 von 24 Einheiten, Lupe nur 18).
   Die Boxen sind deshalb bewusst gegenkorrigiert, damit die GLYPHEN gleich groß wirken:
     Warenkorb 2.4rem * 20/24 = 2rem    Lupe 2.67rem * 18/24 = 2rem
   Die stroke-width in den SVG-Dateien ist auf diese Faktoren abgestimmt. Ziel ist die
   sichtbare Stegbreite des gefüllten Konto-Icons: 1 Einheit bei viewBox 18 auf 20px
   gerendert = 1,11px. Daraus folgen Warenkorb 1.1 und Lupe 1.0 — verschiedene Zahlen,
   die genau deshalb GLEICH dick aussehen. Änderst du hier die Größe, musst du dort
   die stroke-width mitziehen, sonst kippt die Strichstärke wieder auseinander. */
.header__icon .svg-wrapper > .icon-cart,
.header__icon .svg-wrapper > .icon-cart-empty {
  width: 2.4rem;
  height: 2.4rem;
}

.header__icon .svg-wrapper > .icon-search,
.header__search .svg-wrapper > .icon-search {
  width: 2.67rem;
  height: 2.67rem;
}

/* Konto ist jetzt ebenfalls Lucide (user-round) und zeichnet nur 18 von 24 Einheiten,
   braucht also dieselbe Gegenkorrektur wie die Lupe: 2.67rem * 18/24 = 2rem Glyph. */
.header__icon .svg-wrapper > .icon-account {
  width: 2.67rem;
  height: 2.67rem;
}

/* === Cart count bubble — gefüllt weinrot, Zahl beige, oben rechts am Icon === */
.cart-count-bubble {
  background-color: var(--brand-red);
  color: var(--brand-beige);
  border: 1px solid var(--brand-red);
  box-sizing: border-box;
  height: 1.9rem;
  width: 1.9rem;
  font-size: 1.05rem;
  /* Zahl exakt mittig im Kreis: flex-Zentrierung (aus der Basisregel ~2140) plus
     line-height 1, damit die Grundlinie die Zahl nicht nach unten verschiebt. */
  font-weight: 700;
  line-height: 1;
  /* Der Anker ist 4.4rem breit, das Icon darin 2.4rem und zentriert — seine obere rechte
     Ecke liegt also 1rem vom Ankerrand entfernt. Minus halbe Bubble (0.95rem) = 0.05rem.
     Dawn positioniert über bottom/left (~2151); beide zurücksetzen, sonst bleibt sie unten. */
  top: 0.05rem;
  right: 0.05rem;
  bottom: auto;
  left: auto;
}

/* Die Zahl steckt in einem inneren <span aria-hidden> — Fettung dort mitnehmen,
   damit sie nicht von einer spezifischeren Span-Regel überschrieben wird. */
.cart-count-bubble span[aria-hidden] {
  font-weight: 700;
  line-height: 1;
}

/* Die Farbregel für die untere Header-Reihe (~4607) färbt mit .header__icons *
   ALLES weinrot — inkl. der Bubble-Zahl. Hier gezielt wieder auf beige, mit
   höherer Spezifität (0,4,0 gegen 0,3,0) und !important, weil die andere Regel
   ebenfalls !important nutzt. */
.header.header--top-center > .header__icons .cart-count-bubble,
.header.header--top-center > .header__icons .cart-count-bubble * {
  color: var(--brand-beige) !important;
}
/* === Linked Products im Artikel (Rezept → Produkte) === */
.article-template__linked-products {
  margin: 4rem auto;
  padding: 3rem 0;
  border-top: 1px solid rgba(var(--brand-red-rgb), 0.2);
  max-width: 1200px;
}

.article-template__linked-products-title {
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--brand-red);
  font-family: 'Roboto Slab', serif;
}

.article-template__linked-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 749px) {
  .article-template__linked-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
/* === Linked Recipes auf der Produktseite === */
.product__linked-recipes {
  margin-top: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(var(--brand-red-rgb), 0.2);
}

.product__linked-recipes-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-red);
  margin-bottom: 1.5rem;
  font-family: 'Roboto Slab', serif;
}

.product__linked-recipes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.product__linked-recipe-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem;
  text-decoration: none;
  color: var(--brand-red);
  border: 1px solid rgba(var(--brand-red-rgb), 0.2);
  border-radius: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product__linked-recipe-link:hover {
  background-color: rgba(var(--brand-red-rgb), 0.05);
  border-color: rgba(var(--brand-red-rgb), 0.4);
  text-decoration: none;
}

.product__linked-recipe-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.product__linked-recipe-title {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
}
/* === Footer compact mobile === */
@media screen and (max-width: 749px) {
  /* Items */
  .footer .footer-block__details-content .list-menu__item,
  .footer .footer-block__details-content .list-menu__item--link,
  .footer .list-menu__item--link {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    min-height: auto !important;
  }

  /* UL und list-unstyled — ohne Abstände */
  .footer .footer-block__details-content,
  .footer .list-unstyled,
  .footer ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide empty wrappers */
  .footer-block--newsletter,
  .footer__content-bottom > .footer__content-bottom-wrapper:first-child {
    display: none !important;
  }

  /* Grid wrapper */
  .footer__blocks-wrapper,
  .footer__blocks-wrapper.grid,
  .footer__blocks-wrapper.grid.grid--1-col {
    gap: 0 !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    --grid-mobile-vertical-spacing: 0;
    --grid-mobile-horizontal-spacing: 0;
  }

  /* Blöcke — alles zurücksetzen inkl. logischer Eigenschaften */
  .footer .footer-block,
  .footer .footer-block.grid__item,
  .footer .footer-block.footer-block--menu,
  .footer .footer-block + .footer-block {
    padding: 0 !important;
    margin: 0 !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
  }

  /* Top wrapper */
  .footer__content-top {
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    margin: 0 !important;
  }

  /* Bottom wrapper */
  .footer__content-bottom-wrapper {
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Footer overall */
  footer.footer {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Finale Absicherung — negativer margin */
  .footer-block + .footer-block {
    margin-top: -0.5rem !important;
  }
}

/* === Leere Footer-Blöcke auf allen Breiten ausblenden ===
   Die Newsletter-Box und der Localization/Payment-Streifen werden gerendert,
   enthalten aber nur Whitespace (greift also nicht bei :empty) und erzeugen
   dadurch die leere Fläche zwischen Menü-Spalten und Copyright. */
.footer-block--newsletter:not(:has(*)),
.footer__content-bottom > .footer__content-bottom-wrapper:first-child:not(:has(.localization-form, .list-payment li, .list-social li)) {
  display: none !important;
}

/* Trennlinie über dem Copyright entfernen und beide Footer-Hälften
   enger zusammenrücken (Desktop; mobil regelt der Block oben). */
@media screen and (min-width: 750px) {
  .footer .footer__content-bottom {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .footer .footer__content-top {
    padding-bottom: 1.5rem !important;
  }

  .footer .footer__copyright {
    margin-top: 0.5rem !important;
  }
}

/* Leerzeile unter dem Copyright ganz unten im Footer. */
.footer .footer__copyright {
  margin-bottom: 2rem;
}

/* === Mobile Header — 2 Reihen: Logo in der roten Zone, Icons in der beigen === */
/* Obergrenze von 989px auf 1099.98px angehoben: Mobilansicht greift schon ab ~1100px
   (u.a. bei ~180% Browser-Zoom), passend zum Header-Umschalter oben. */
@media screen and (max-width: 1099.98px) {
  /* 2-row grid: heading oben über die volle Breite, Icons unten */
  .header,
  .header.header--top-center {
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "heading heading heading"
      "left-icons . icons" !important;
    align-items: center !important;
    column-gap: 0.4rem;
    row-gap: 0.2rem;
    padding-top: 0.6rem !important;
    padding-bottom: 0 !important;
  }

  /* Logo + Subtitle — Reihe 1, zentriert */
  .header > .header__heading,
  .header > .header__heading-link {
    grid-area: heading !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  /* Burger / Such-Drawer — Reihe 2 links */
  .header > header-drawer,
  .header > .header__search {
    grid-area: left-icons !important;
    justify-self: start !important;
  }

  /* Account + Cart — Reihe 2 rechts */
  .header > .header__icons {
    grid-area: icons !important;
    justify-self: end !important;
  }

  /* Logo — Höhenbegrenzung */
  .header__heading-logo,
  .header__heading-logo-wrapper svg,
  .header__heading-logo-wrapper img {
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Subtitle — kompakter */
  .header__subtitle-image {
    max-height: 16px !important;
  }

  .header__subtitle-text {
    font-size: 0.75rem !important;
  }

  /* Stapel Logo + Subtitle */
  .header__heading-link {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem !important;
  }

  /* Beiger Streifen — Höhe für die Icons */
  .header-wrapper::after {
    height: 48px !important;
  }
}

/* ============================================================================
   [B8] · FOOTER & RECHTSTEXTE
   ------------------------------------------------------------------------
   Footer-Farben und lesbare Legal-Seiten inkl. PDF-Download-Button.
   ============================================================================ */

/* === Footer text color (#E9D033 - gelb-golden) === */
.footer,
.footer a,
.footer .footer-block,
.footer .footer-block__details-content,
.footer .list-menu__item,
.footer .list-menu__item--link,
.footer__copyright,
.copyright__content,
.copyright__content a {
  color: #E9D033 !important;
}

/* Hover-Effekt für Links */
.footer a:hover,
.footer .list-menu__item--link:hover {
  color: #E9D033 !important;
  opacity: 0.75;
}

/* Menülinks im Footer: beim Hovern ein gelber Kasten statt der Unterstreichung.
   Farbe und Strichstärke wie beim Widerrufsformular-Knopf weiter unten in dieser
   Datei (2px, #E9D033), aber mit scharfen Ecken.

   Der Kasten wird als ::after gezeichnet und NICHT als border oder outline:
     border  — machte die Box größer, die Links rückten beim Hovern zur Seite.
     outline — verschiebt zwar nichts, kennt aber nur EINEN Abstand ringsum. Der Text
               hat oben und unten schon die Luft seiner Zeilenhöhe, der Kasten wirkte
               senkrecht dadurch deutlich zu hoch.
   Das Pseudo-Element liegt absolut über dem Link und lässt sich in beide Richtungen
   getrennt einstellen:
     --frame-x   waagerechter Abstand NACH AUSSEN (größer = breiterer Kasten)
     --frame-y   senkrechte Einrückung NACH INNEN (größer = flacherer Kasten;
                 zieht die Zeilenhöhe wieder heraus)

   Die Unterstreichung kommt aus section-footer.css
   (.footer-block__details-content .list-menu__item--link:hover) — diese Datei lädt
   nach base.css, deshalb braucht die Regel hier den .footer-Vorsatz: vier Klassen
   schlagen die drei von dort, ganz ohne !important.

   opacity zurück auf 1: Die Regel darüber blendet Footer-Links beim Hovern leicht ab.
   Zusammen mit dem Rahmen wirkte das kraftlos — der Knopf unten hält es genauso. */
@media screen and (min-width: 750px) {
  /* Senkrechte Luft des Kastens gehoert dem LINK, nicht dem Kasten — und zwar bei
     jeder Zeile gleich viel. Grund: section-footer.css gibt der ERSTEN Zeile jeder
     Spalte ausdruecklich padding-top: 0, damit die Spalte oben buendig anfaengt. Der
     Kasten bezieht sich auf das Kaestchen des Links, und genau deshalb war er bei
     „Kontakt“ und „Versand- und Zahlungsinformationen“ oben zu kurz — dort fehlte
     dem Kaestchen schlicht die obere Haelfte.

     Jetzt hat jeder Link dasselbe Polster; ein gleich grosser negativer Rand hebt es
     im Layout wieder auf, die Zeilenabstaende bleiben also unveraendert. Bei der
     ersten Zeile ragt der Link (und mit ihm der Kasten) dadurch bewusst ueber die
     Oberkante des .footer__blocks-wrapper hinaus. Abgeschnitten wird da nichts — im
     Footer steht nirgends ein overflow: hidden.

     Der zweite Selektor wiederholt denselben Block nur laenger: Er muss das
     padding-top: 0 der ersten Zeile schlagen, und bei gleich vielen Klassen entschiede
     sonst die Ladereihenfolge (section-footer.css laedt nach base.css).

     REGLER --frame-pad-y: senkrechter Abstand des Kastens zum Text. Das Gegenstueck zu
     --frame-y weiter unten, das den Kasten von aussen wieder hereinzieht. */
  .footer .footer-block__details-content .list-menu__item--link,
  .footer .footer-block__details-content > :first-child .list-menu__item--link {
    --frame-pad-y: 0.35rem;
    position: relative;
    padding-top: var(--frame-pad-y);
    padding-bottom: var(--frame-pad-y);
    margin-top: calc(var(--frame-pad-y) * -1);
    margin-bottom: calc(var(--frame-pad-y) * -1);
  }
  .footer .footer-block__details-content .list-menu__item--link:hover {
    text-decoration: none;
    opacity: 1;
  }
  /* Die drei Regler des Kastens liegen am Link selbst, damit Rahmen (::after) und
     Eckpunkte (::before) mit DENSELBEN Werten rechnen — sonst laufen sie beim
     Nachjustieren auseinander:
       --frame-x  waagerechter Abstand NACH AUSSEN (groesser = breiterer Kasten)
       --frame-y  senkrechte Einrueckung NACH INNEN (groesser = flacherer Kasten;
                  zieht die Zeilenhoehe wieder heraus)
       --frame-dot  Durchmesser der Eckpunkte */
  .footer .footer-block__details-content .list-menu__item--link:hover {
    --frame-x: 1rem;
    --frame-y: 0.15rem;
    --frame-dot: 5px;
  }
  .footer .footer-block__details-content .list-menu__item--link:hover::after {
    content: '';
    position: absolute;
    top: var(--frame-y);
    bottom: var(--frame-y);
    left: calc(var(--frame-x) * -1);
    right: calc(var(--frame-x) * -1);
    /* Duenner Strich, dafuer die Eckpunkte als Blickfang — dasselbe Verhaeltnis wie
       beim Hintergrundraster, wo die Linien blass sind und die Punkte kraeftig. */
    border: 1px solid #E9D033;
    /* Scharfe Ecken. Die Rundung ist bewusst wieder raus — dadurch sitzen die
       Eckpunkte auch genau auf dem Strich statt ein Stueck ausserhalb der Kurve. */
    pointer-events: none;
  }
  /* Eckpunkte wie die Rasterpunkte. Das Kaestchen ist rundherum um einen halben
     Punktdurchmesser GROESSER als der Rahmen — ein Punkt, der buendig in seiner Ecke
     sitzt, hat seinen Mittelpunkt damit exakt auf der Rahmenecke. Der Umweg ueber die
     Groesse statt ueber negative background-position ist noetig, weil der Hintergrund
     am Rand des Elements beschnitten wird: Ein nach aussen geschobener Punkt waere
     halb abgeschnitten. */
  .footer .footer-block__details-content .list-menu__item--link:hover::before {
    content: '';
    position: absolute;
    top: calc(var(--frame-y) - var(--frame-dot) / 2);
    bottom: calc(var(--frame-y) - var(--frame-dot) / 2);
    left: calc((var(--frame-x) + var(--frame-dot) / 2) * -1);
    right: calc((var(--frame-x) + var(--frame-dot) / 2) * -1);
    background-image:
      radial-gradient(circle closest-side, #E9D033 100%, transparent 100%),
      radial-gradient(circle closest-side, #E9D033 100%, transparent 100%),
      radial-gradient(circle closest-side, #E9D033 100%, transparent 100%),
      radial-gradient(circle closest-side, #E9D033 100%, transparent 100%);
    background-size: var(--frame-dot) var(--frame-dot);
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

/* Zwischen 750 und 989px gibt section-footer.css den Menuezeilen 1rem Polster oben und
   unten. Dieses Polster gehoert jetzt dem Kasten (siehe --frame-pad-y oben), die
   Zeilenluft wandert deshalb in den Rand — unter dem Strich bleibt der Abstand gleich.
   Die erste Zeile behaelt ihren buendigen Anfang, bekommt also keinen Vorabstand. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .footer .footer-block__details-content .list-menu__item--link {
    margin-top: calc(1rem - var(--frame-pad-y));
    margin-bottom: calc(1rem - var(--frame-pad-y));
  }
  .footer .footer-block__details-content > :first-child .list-menu__item--link {
    margin-top: calc(var(--frame-pad-y) * -1);
  }
}
/* === Legal pages: lesbarer Text (schwarz, 16px) === */

/* Shopify Policies — Impressum, Datenschutz, AGB, Versandbedingungen */
.shopify-policy__container,
.shopify-policy__container .rte,
.shopify-policy__container .rte *,
.shopify-policy__container p,
.shopify-policy__container li,
.shopify-policy__container span,
.shopify-policy__container ul,
.shopify-policy__container ol {
  color: #000 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Widerrufsrecht (Page) — Inhalt bei der Befüllung in div.legal-page einwickeln */
.legal-page,
.legal-page p,
.legal-page li,
.legal-page span,
.legal-page ul,
.legal-page ol,
.legal-page div {
  color: #000;
  font-size: 16px;
  line-height: 1.6;
}
/* Abstand zur Fusszeile am Ende der reinen Textseiten, in Rasterzellen.
   Betroffen sind die fuenf Rechtstexte (Impressum, AGB, Datenschutz, Versand,
   Widerrufsrecht) und die Kontaktseite — ueberall dort schliesst ein Textblock die
   Seite ab und stiess bisher fast unmittelbar an die Fusszeile.

   margin und nicht padding, anders als beim ersten Versuch: Die Kontaktseite hat am
   selben Element bereits einen Innenabstand aus den Sektionseinstellungen
   (.section-<id>-padding, 36px). Ein padding wuerde den ERSETZEN, der Zuwachs waere
   nur die Differenz. Der Aussenabstand kommt dagegen oben drauf — bei beiden
   Seitenarten dieselben 0,5 Zellen zusaetzlich. Verschmelzen kann er hier nicht:
   nachgemessen ruecken beide Varianten die Fusszeile um exakt 45px.

   Der Body-Vorsatz ist noetig: Die Kontaktsektion bringt ihre Polsterregel selbst mit,
   sie steht im Body und damit nach dieser Datei. Zwei Klassen schlagen ihre eine.

   Wichtig beim Nachmessen: Der <body> ist ein Raster mit den Zeilen
   "auto auto 1fr auto" (layout/theme.liquid). Ist das Fenster hoeher als die Seite,
   dehnt sich <main> bis zum unteren Rand und die Fusszeile klebt dort — der Abstand
   liegt dann INNERHALB der Dehnung und bewegt nichts. Er wirkt erst, wenn die Seite
   laenger ist als das Fenster. Genau das hat hier zuerst eine funktionierende
   Aenderung wie eine kaputte aussehen lassen.

   Der Fallback 90px entspricht der Zelle bei Design-Breite (1260px / 14). */
body.template-policy,
body.template-page {
  /* Grundwert. Er gilt fuer jede Seite, die unten keinen eigenen Wert bekommt. */
  --page-bottom: 0.5;

  /* Feinjustierung je Seite. Das sind GESAMTwerte, keine Zuschlaege: 0.8 heisst
     0,8 Zellen Abstand, nicht 0,5 + 0,8. Zugewiesen werden sie in
     layout/theme.liquid, wo ueber request.path bekannt ist, welche Rechtsseite
     gerade laeuft — hier ist das nicht zu unterscheiden, alle fuenf tragen
     dieselbe Body-Klasse template-policy.
     Die Namen sind bewusst deutsch nach der Ueberschrift der Seite benannt und
     nicht nach dem Shopify-Handle: /policies/refund-policy heisst im Laden
     "Widerrufsrecht", /policies/legal-notice "Impressum". */
  --page-bottom-impressum: 0.8;
  --page-bottom-agb: 0.8;
  --page-bottom-datenschutz: 1.1;
  --page-bottom-widerruf: 1.4;
  --page-bottom-versand: 0.5;
  --page-bottom-kontakt: 0.6;
}
body.template-policy .shopify-policy__container,
body.template-page .contact {
  margin-bottom: calc(var(--cell, 90px) * var(--page-bottom, 0));
}

/* === Legal pages: durchgehende beige Fläche unter dem gesamten Text === */
.shopify-policy__container .rte,
.legal-page {
  background-color: var(--brand-beige) !important;
  background-image: none !important;
  padding: 2rem 2.5rem !important;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
/* === Legal pages: Textausrichtung im Blocksatz (justify) === */
.shopify-policy__container .rte p,
.shopify-policy__container .rte li,
.legal-page p,
.legal-page li {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* === Legal pages: PDF-Download-Button === */
.shopify-policy__container .rte a.legal-download-btn,
.legal-page a.legal-download-btn,
a.legal-download-btn {
  display: inline-block !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  background: var(--brand-beige) !important;
  border: 2px solid var(--brand-red) !important;
  border-radius: 0.4rem !important;
  padding: 1rem 2.5rem !important;
  text-decoration: none !important;
  margin: 0.5rem 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
.shopify-policy__container .rte a.legal-download-btn:hover,
.legal-page a.legal-download-btn:hover,
a.legal-download-btn:hover {
  background: var(--brand-red) !important;
  color: var(--brand-beige) !important;
  text-decoration: none !important;
}
/* === Sticky footer — drückt den Footer auf kurzen Seiten an den unteren Fensterrand === */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#MainContent {
  flex: 1 0 auto;
}

/* ============================================================================
   [B9] · RICH-TEXT & IMAGE-WITH-TEXT
   ------------------------------------------------------------------------
   Innenbloecke auf Beige, Sticky-Footer und Abstaende zwischen Sektionen.
   ============================================================================ */

/* === Rich text: nur der innere Block auf Beige, äußere transparent === */
.rich-text,
.rich-text.color-scheme-1,
.rich-text.color-scheme-1.gradient,
.rich-text__wrapper {
  background-image: none !important;
  background-color: transparent !important;
}

.rich-text__wrapper {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.rich-text__blocks {
  background-image: none !important;
  background-color: var(--brand-beige) !important;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  width: fit-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}
/* === Image-with-text: jeder Block — eigene Karte auf Beige, Raster dazwischen === */

/* Gemeinsamer Container transparent — durch ihn ist das Raster sichtbar */
.image-with-text__content,
.image-with-text__content.gradient {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Jeder innere Block — Karte mit reinem beigem Hintergrund */
.image-with-text__content > * {
  background-color: var(--brand-beige) !important;
  padding: 1.25rem 1.75rem !important;
  border-radius: 8px;
  margin: 0 !important;
}

/* Justify nur für lange Texte (rte) */
.image-with-text__content .rte,
.image-with-text__content .rte p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Rich-Text überlappt die vorherige Image-with-text-Sektion.
   NUR bei Design-Breite (>=1200px): Der feste -250px-Versatz ist auf diese Breite
   abgestimmt. Ab 750px (z.B. beim Reinzoomen) würden sich sonst die Textblöcke
   gegenseitig überlappen. Darunter bleiben die Sektionen sauber untereinander. */
@media screen and (min-width: 1200px) {
  .shopify-section:has(.image-with-text) + .shopify-section:has(.rich-text) {
    margin-top: -250px;
    position: relative;
    z-index: 2;
  }
}

@media screen and (min-width: 750px) {
  /* Gewährleisten, dass die Collection-Banner-Sektion das Body-Raster durchscheinen lässt */
  [id*="__banner"].shopify-section {
    background: transparent !important;
  }
}

/* ============================================================================
   [B10] · PRODUKTKARTEN — PREIS, TITEL, BADGES, QUICK-ADD
   ------------------------------------------------------------------------
   Preisblock, Titel, Pagination, „Mehr laden", BIO-/Rabatt-Badges, Hover-Quick-Add.
   ============================================================================ */

/* === Produktkarte — Preis mit Gebindeeinheit === */
.card-price-block {
  display: block;
}

.card-price-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Preis-Zeile im Shop-Grid mittig (zum Bild) statt linksbündig. */
:is(.template-collection, .shop-tiles) .product-card-wrapper .card-price-line {
  justify-content: center;
}

.card-gebindeeinheit,
.card-price-divider {
  color: var(--brand-red);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Aktueller Preis (normal oder sale) */
.card-price-current,
.card-price-sale {
  color: var(--brand-red);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Durchgestrichener alter Preis — neben dem aktuellen durch | */
.card-price-compare {
  color: var(--brand-red);
  opacity: 0.6;
}

.card-price-compare s {
  text-decoration: line-through;
  font-weight: 500;
  font-size: 1.3rem;
}

/* Unit-price — separater Block darunter */
.card-unit-price-manual {
  color: var(--brand-red);
  font-size: 1.1rem;
  opacity: 0.85;
  margin-top: 0.2rem;
}
/* === Produktkarte — größer und fetter === */

/* Produktname */
.card-information .card__heading,
.card-information .card__heading a,
.card-wrapper .card__heading,
.card-wrapper .card__heading a {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Hersteller (DER GROSSE LADEN / TERRASANA / Hersteller) */
.card .caption-with-letter-spacing,
.card .caption-with-letter-spacing.light {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1rem !important;
}

/* Gebindeeinheit und Trennzeichen | */
.card-gebindeeinheit,
.card-price-divider {
  color: var(--brand-red);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Preis */
.card-price-line .price-item--regular,
.card-price-line .price-item--sale {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

/* Unit-price €999,80/kg */
.card-unit-price-manual {
  color: var(--brand-red);
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 1;
  margin-top: 0.3rem;
}
/* === Pagination — größer und fetter === */
.pagination__list {
  gap: 0.5rem;
}

.pagination__item {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  padding: 0.5rem 1.2rem;
  min-width: 4rem;
  min-height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination__item--current,
.pagination__item[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4rem;
}

.pagination__item:hover {
  opacity: 0.7;
}

.pagination__item svg,
.pagination__item .svg-wrapper {
  width: 1.4rem !important;
  height: 1.4rem !important;
}
/* === Mehr laden... — Button unter dem Produktraster ===
   Ziel: unter der letzten Produktreihe IMMER 1,5 Zellen Luft.
     mit Button:  Wrapper (1 Zelle, Button mittig) + .collection-Padding (0,5) = 1,5
     ohne Button: .collection-Padding allein = 1,5
   Bewusst alles über PADDING statt margin: Margins von Kindern verschmelzen mit dem
   Elternelement (margin collapsing) und "entkommen" → dann entsteht der Abstand nie
   zuverlässig. Padding collapst nicht. (Dawns 2rem margin am <ul> ist oben neutralisiert.) */
.template-collection .collection {
  /* ==== EINZIGER REGLER für die Button-Position ====
     Höhe des Bands, in dem der Button mittig sitzt — in ZELLEN, als reine Zahl.
     Der Rest bis 1.5 wird unten automatisch zum Padding → der Gesamtabstand bleibt
     IMMER 1,5 Zellen, egal was hier steht. Nur diese Zahl anfassen:
       1.4 → Button tiefer   |   0.6 → Button höher
     (Nicht die calc()-Zeilen bearbeiten — dort muss die Multiplikation IN calc() stehen,
     sonst verwirft der Browser die ganze Zeile und das Band verliert seine Höhe.) */
  --loadmore-band: 1.58;

  padding-bottom: calc(var(--cell) * 1.5);   /* ohne Button: volle 1,5 Zellen */
}
.template-collection .collection:has(.collection-load-more-wrapper) {
  /* mit Button: Band + Rest = 1.5 → der Rest ist genau das, was das Band nicht füllt */
  padding-bottom: calc(var(--cell) * (1.5 - var(--loadmore-band)));
}

/* Button mittig im Band. Kein margin → keine Verschmelzung, die Höhe ist exakt planbar.
   Der Wrapper behält sein Band auch, wenn load-more.js den Button am Ende ausblendet
   (das JS versteckt nur den Button) → der Abstand bleibt konstant. */
.collection-load-more-wrapper {
  /* ZWEITER REGLER: nur den Button verschieben, in Zellen. Negativ = nach oben.
     Absichtlich getrennt von --loadmore-band: Das Band bestimmt die Höhe des Blocks
     und damit über die padding-Rechnung oben auch den Abstand zum Footer. Würde man
     den Button darüber verschieben, wänderte sich beides gleichzeitig — und weil der
     Button MITTIG im Band sitzt, käme ohnehin nur die halbe Strecke an.
     transform hängt nicht am Fluß: Der Button wandert, der Block bleibt gleich hoch. */
  --loadmore-y: -0.1;

  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--cell) * var(--loadmore-band));
  transform: translateY(calc(var(--cell) * var(--loadmore-y)));
}

/* .blog-load-more (Blog-Index „Neues“/„Rezepte“) teilt sich die Gestaltung mit dem
   Shop-Button, statt sie in blog-neues.css zu wiederholen — so können beide nicht
   auseinanderlaufen. Das Band, in dem der Button sitzt, ist pro Seite definiert. */
.collection-load-more,
.blog-load-more {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-red);
  background: transparent;
  border: 2px solid var(--brand-red);
  border-radius: 0.4rem;
  padding: 1rem 3rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-width: auto;
  min-height: auto;
}

.collection-load-more:hover,
.blog-load-more:hover {
  background-color: var(--brand-red);
  color: var(--brand-beige);
}

.collection-load-more:disabled,
.blog-load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* === Karte — Name mit justify + automatischem Umbruch === */
.card-information .card__heading,
.card-information .card__heading a,
.card-wrapper .card__heading,
.card-wrapper .card__heading a {
  text-align: left;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* === Das Kachel-Raster als eigene Ebene abkapseln ===
   FEHLERBILD: Auf einer gescrollten Seite malte das Hover-Overlay einer Produktkachel über
   den Header — Mengenwahl und Kauf-Knopf schwebten mitten im Menü. Aufgetreten auf der
   Rezeptseite unter "Verwendete Produkte", möglich war es aber überall, wo Kacheln stehen.

   URSACHE: z-index gilt nur innerhalb eines Stapelkontexts. Ohne einen solchen Kontext
   zwischen Kachel und <html> landet der z-index: 120 des Overlays im WURZELKONTEXT und
   misst sich dort direkt am Header, der nur z-index: 3 führt (siehe
   .section-header.shopify-section-group-header-group weiter oben). 120 schlägt 3 — das
   Overlay gewann, obwohl es zu einem Element gehört, das der Header verdeckt.

   Erwartbar wäre gewesen, dass .product-card-wrapper das schon abfängt: Es trägt
   container-type: size, und Layout-Containment erzeugt laut Spezifikation einen
   Stapelkontext. Verlassen kann man sich darauf offenkundig nicht — sonst wäre der Fehler
   nie aufgetreten. isolation: isolate ist der ausdrückliche Weg: Es tut NICHTS ANDERES,
   als einen Stapelkontext zu eröffnen, ohne Nebenwirkung auf Layout oder Darstellung.

   WIRKUNG: Alle z-index-Werte der Kacheln — Overlay 120, Options-Knopf 120, Varianten-
   Pop-up 9999, Badges 10 — werden am Raster abgefangen und untereinander verrechnet. Nach
   außen tritt das Raster als EINE Ebene ohne eigenen z-index auf und liegt damit unter
   allem Positionierten mit positivem z-index: Header (3) und Footer (1) decken es zu.
   Die Reihenfolge INNERHALB des Rasters bleibt unverändert — Kacheln überlagern einander
   weiter genau wie bisher, das Varianten-Pop-up liegt weiter über seinen Nachbarn.

   ANSATZPUNKT: bewusst das Raster und nicht die einzelne Kachel. Auf Kachelebene würde
   auch das Varianten-Pop-up an seiner eigenen Kachel enden und von der nächsten Kachel
   übermalt. Und bewusst nicht #MainContent, denn dort liegen auch Bildschirm-füllende
   Dialoge (etwa die Bildlupe der Produktseite), die über dem Header liegen sollen.

   Ein Raster gibt es in jedem Kachel-Zusammenhang: Shop, Suche, "Das könnte dir gefallen"
   und "Verwendete Produkte" bauen alle auf ul.grid.product-grid auf. Die Regel bleibt
   deshalb ungebunden — sie gilt für jedes Kachel-Raster der Website. */
.product-grid {
  isolation: isolate;
}

/* === Quick-add — Hover-Overlay über dem Bild === */
.card-wrapper .card {
  position: relative;
}

/* Quick-add-Container — über .card__inner (Bild), 5:4 portrait */
.card-wrapper .card .atc-overlay {
  position: absolute;
  /* Folgt dem Produktbild automatisch: gleiche Breite/Höhe/Verschiebung wie .card__inner
     über die Variablen --img-w/-h/-x/-y. Buttons unten im Bild (justify-content: flex-end). */
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  width: var(--img-w, calc(100% - 1.2rem));
  height: var(--img-h, 100%);
  margin: 0;
  /* Gleiche Verschiebung UND gleiche Neigung wie das Bild → die Buttons kleben auf dem
     Bild statt daneben zu stehen. Da das Overlay exakt Größe/Position des Bildes hat,
     ist auch der Drehpunkt (transform-origin: Mitte) automatisch derselbe. */
  transform: translate(var(--img-x, 0px), var(--img-y, 0px)) rotate(var(--img-rot, 0deg)) translateZ(0);
  backface-visibility: hidden;   /* GPU-Ebene → gedrehte KANTEN werden glatt statt treppig */

  /* === Ziffern auf gerader Grundlinie, trotz Neigung ===
     backface-visibility oben glättet nur die Kanten der Box. Die Zeichen INNERHALB
     blieben davon unberührt und wirkten versetzt — jede Ziffer schien auf einer
     eigenen Höhe zu sitzen ("huckelig"). Zwei getrennte Ursachen:

     1. Hinting rastet jede Glyphe auf ganze Pixel. Auf einer geneigten Ebene liegt die
        Grundlinie aber zwischen den Pixelreihen, und jedes Zeichen wird anders gerundet
        — die Rundungsfehler ergeben genau das Auf und Ab.
        geometricPrecision schaltet dieses Rasten ab: Die Zeichen werden exakt dort
        gezeichnet, wo sie geometrisch hingehören, also auf einer wirklich geraden
        (schrägen) Grundlinie.

     2. Subpixel-Glättung (RGB-Streifen) setzt waagerechte Pixelreihen voraus und wird
        bei gedrehtem Text schlierig. antialiased/grayscale schaltet auf reine
        Graustufen-Glättung um, die drehungsunabhängig ist.

     tabular-nums gibt allen Ziffern dieselbe Laufweite — sonst ändert sich die Breite
     beim Hochzählen (1 ist schmaler als 8) und der Preis zuckt bei jedem Klick. */
  text-rendering: geometricPrecision;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  aspect-ratio: auto;
  z-index: 120;
  /* REGLER Abstand der Buttons zur unteren Bildkante. 0 = bündig am Bildrand (aktueller
     Stand — die Deklaration fehlte zwischenzeitlich, wodurch die padding-Zeile ungültig war
     und ohnehin auf 0 zurückfiel). Größerer Wert = Buttons weiter hoch.
     Bewusst NICHT in cqw: cqw gilt nur innerhalb eines Größen-Containers (nur Shop-Seite);
     außerhalb fiele es auf den Viewport zurück — dieselbe Falle wie bei den Badges. */
  --atc-btn-bottom: 0px;
  padding: 0 0 var(--atc-btn-bottom) 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  background: transparent;
  background-color: transparent;
}

/* product-form und form — flex-column, transparent */
.card-wrapper .atc-overlay product-form,
.card-wrapper .atc-overlay form {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  pointer-events: auto;
}

/* WICHTIG: die Kinder des Formulars selbst — block-level full-width, damit sie garantiert gestapelt werden */
.card-wrapper .atc-overlay .atc-overlay__wrapper,
.card-wrapper .atc-overlay .atc-overlay__btn {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  float: none;
  flex: 0 0 auto;
}

.card-wrapper .atc-overlay .atc-overlay__wrapper {
  background: transparent;

  /* Breite der Direkt-in-den-Warenkorb-Buttons, als Anteil der Bildbreite.
     REGLER — nur diese Zahl ändern (0.6 = 60 % der Bildbreite): */
  --atc-btn-scale: 0.8;
  width: calc(100% * var(--atc-btn-scale));
  margin-inline: auto;   /* schmaler → mittig auf dem Bild halten */

  /* Warum hier und nicht bei .atc-overlay__wrapper (~4193)?
     Die Regel darüber (5271) trifft mit 3 Klassen und setzt width: 100% + margin: 0.
     Eine 1-Klassen-Regel verliert dagegen — sie sah in der Datei richtig aus, kam aber
     nie an. Gleiche Spezifität + weiter unten in der Datei = diese hier gewinnt.
     display: block aus 5271 bleibt bewusst: Mengenwähler über Preis-Button ist gewollt. */
}

/* Counter row — flex mit − / Zahl / + */
.card-wrapper .atc-overlay .atc-overlay__qty {
  display: flex;
  width: 100%;
  align-items: stretch;
  /* 0.8 nur auf der Fläche — der rote Rahmen (border) und die −/1/+ bleiben voll deckend. */
  background-color: rgba(255, 245, 229, 0.8);
  backdrop-filter: blur(2px);
  border-radius: 0.4rem;
  /* Abstand zur Preis-Schaltfläche darunter (beide liegen im atc-overlay__wrapper). */
  margin-bottom: 0.2rem;
}

.card-wrapper .atc-overlay .atc-overlay__qty-btn {
  flex: 0 0 auto;
}

.card-wrapper .atc-overlay .atc-overlay__qty-display {
  flex: 1 1 auto;
  text-align: center;
  /* stretch statt center: Das Feld füllt die volle Höhe zwischen − und +. Nur dadurch ist
     die Eingabemarke auf der GESAMTEN Fläche erreichbar und nicht bloß auf Texthöhe. */
  align-self: stretch;
  width: 100%;
  min-width: 0;
  cursor: text;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-red);
}
.card-wrapper .atc-overlay .atc-overlay__qty-btn {
  padding: 0.2rem 0.6rem;
  font-size: 1.6rem;
}

/* Desktop — Anzeige nur beim Hover */
@media (hover: hover) and (pointer: fine) {
  .card-wrapper .atc-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;

    /* DAUERHAFT eine eigene GPU-Ebene, nicht erst beim Hover.
       Nur auf einer eigenen Ebene wird der Text UNGEDREHT in die Textur gezeichnet und
       erst die fertige Textur geneigt — die Ziffern sitzen dann auf einer wirklich
       geraden Grundlinie und werden gemeinsam gekippt. Ohne Ebene setzt der Browser
       jede Glyphe einzeln an ihre gedrehte Position und rundet dabei auf ganze Pixel:
       genau der huckelige Versatz.

       Sichtbar wurde das daran, dass der Preis beim Hover ÜBER DEM BUTTON glatt blieb —
       dessen opacity: 0.85 (.atc-overlay__btn:hover) erzwingt dort eine Ebene.

       Warum hier und nicht in der Hover-Regel: will-change muss gelten, BEVOR gezeichnet
       wird. Erst beim Hover gesetzt, kommt der Hinweis zu spät — der Text ist dann schon
       gerastert. Das kostet eine Ebene je Kachel; die Alternative wäre ein dauerhaftes
       opacity: 0.999, das dasselbe erzwingt, aber als Trick schwerer zu verstehen ist. */
    will-change: transform, opacity;
  }
  
  /* Buttons nur beim Hover übers BILD (oder über die Buttons selbst) – nicht über die Überschrift. */
  .card-wrapper:has(.card__inner:hover) .atc-overlay,
  .card-wrapper .atc-overlay:hover {
    opacity: 1;
    visibility: visible;
  }
  /* Karten-Link nicht über das Bild legen, damit der Bild-Hover greift (Titel bleibt klickbar).
     Ohne diese Regel liegt Dawns unsichtbare, kartenfüllende Klickfläche (.card__heading a::after)
     über dem Bild — dann ist nicht .card__inner das oberste Element unter dem Mauszeiger, das
     :has(.card__inner:hover) oben löst nie aus und die Hover-Buttons erscheinen nie.
     Die Klickbarkeit des Bildes übernimmt stattdessen ein Handler in layout/theme.liquid. */
  :is(.template-collection, .shop-tiles) .product-card-wrapper .card__heading > a::after {
    pointer-events: none;
  }
}

/* Mobile / touch — Rückkehr in den normalen Flow unter dem Bild */
/* Mobile / touch — quick-add immer sichtbar über dem Bild */
@media (hover: none) {
  .card-wrapper .card .atc-overlay {
    opacity: 1;
    visibility: visible;
  }
}
/* === Schatten unten-rechts am Produktbild in den Karten === */
.card-wrapper .card .card__inner {
  overflow: visible;
}

/* Dawn setzt .card .card__inner .card__media { overflow: hidden } (component-card.css:76).
   Da das Bio-Logo in .card__media liegt, würde sein 20-%-Überstand an der Bildkante
   abgeschnitten. Unbedenklich auf visible: das Produktbild selbst clippt weiterhin
   .media { overflow: hidden } (~1175) — inkl. Hover-Zoom. 4 Klassen schlagen Dawns 3,
   deshalb ohne !important. */
.card-wrapper .card .card__inner .card__media {
  overflow: visible;
}

.card-wrapper .card .card__media {
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.18);
}
/* === Mobile (≤749px) — Anpassung der Karten an das neue Design === */
@media screen and (max-width: 749px) {

   /* Bildschatten — weicher und kompakter (cards 2-in-Reihe) */
  .card-wrapper .card .card__media {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
  }

  /* Produktname — etwas kleiner */
  .card-information .card__heading,
  .card-information .card__heading a,
  .card-wrapper .card__heading,
  .card-wrapper .card__heading a {
    font-size: 1.3rem !important;
  }

  /* Vendor (TERRASANA) — kompakter */
  .card .caption-with-letter-spacing,
  .card .caption-with-letter-spacing.light {
    font-size: 1.1rem !important;
    letter-spacing: 0.08rem !important;
  }

  /* Preise — kleinere Schrift, damit aktueller | durchgestrichener in eine Zeile passen */
  .card-price-current,
  .card-price-sale,
  .card-price-divider {
    font-size: 1.3rem;
  }

  .card-price-compare s {
    font-size: 1.1rem;
  }

  /* Unit price (€800/kg) — noch kompakter */
  .card-unit-price-manual {
    font-size: 1rem;
  }
}
/* ============================================
   BADGES (BIO + Discount) — einheitliche Sektion
   Feste Aufteilung: BIO rechts, discount links
   ============================================ */

/* --- BIO badge (top-RIGHT) --- */
.card-wrapper .bio-badge,
.bio-badge {
  position: absolute !important;
  /* Bezugsrahmen ist .card__inner.ratio = die Bildbox (siehe ~3826). top/right: 0 legt das
     Logo bündig in die obere rechte Bildecke; das translate schiebt es dann um 20 % der
     EIGENEN Größe darüber hinaus.
     Warum translate und nicht top: -20 %? Prozente bei top/right beziehen sich auf die
     Bildbox, bei transform: translate auf das Element selbst — nur letzteres ergibt
     "20 % des Logos ragen über die Kante". Das Logo liegt in .card__inner und dreht
     dadurch bereits mit dem Bild mit. */
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: translate(20%, -20%);
  z-index: 10 !important;
  /* Breite = 1,5 × Höhe (EU-Vorgabe, Handbuch S.3).
     ACHTUNG px als Grundwert: cqw funktioniert NUR innerhalb eines Größen-Containers. Den gibt
     es ausschließlich auf den Shop-Kacheln (container-type: size auf
     :is(.template-collection, .shop-tiles) .product-card-wrapper, ~3809).
     Überall sonst (Startseite, Suche, jede Karte ohne diese Klassen) fällt cqw auf den
     VIEWPORT zurück: 13.8cqw wären 13,8 % der Bildschirmbreite ≈ 260px statt 43px.
     Die mitskalierende cqw-Variante steht deshalb weiter unten, auf diese Kacheln begrenzt. */
  --bio-h: 43px;
  height: var(--bio-h) !important;
  width: calc(var(--bio-h) * 1.5) !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.bio-badge img {
  width: 100% !important;
  height: 100% !important;
  /* contain ist jetzt wieder korrekt UND verlustfrei: Seit die Quelle das offizielle
     538×359-Logo ist (= 1:1,5, exakt die Vorgabe aus dem EU-Handbuch S.3), hat sie
     dasselbe Verhältnis wie der Kasten — es gibt also weder Leerraum noch Beschnitt.
     Vorher (960×540 = 16:9) erzwang das einen Kompromiss: contain ließ oben/unten Luft
     (Logo blieb 16:9 und fraß den 20-%-Überstand), cover musste je 75px wegschneiden.
     Beides jetzt unnötig. Kein Beschnitt = konform zu S.22 "Form des Logos nicht ändern". */
  object-fit: contain;
  border-radius: 0;
}

/* --- Discount badge (top-LEFT, gegenüberliegende Ecke) ---
   Kein !important: .card-wrapper .card .card__badge (3 Klassen) schlägt Dawns .card__badge
   (1 Klasse) per Spezifität. */
.card-wrapper .card .card__badge {
  position: absolute;
  /* Spiegelbildlich zum Bio-Logo: bündig in die obere LINKE Bildecke, dann 20 % der
     eigenen Größe darüber hinaus (siehe Begründung zu translate beim .bio-badge). */
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  transform: translate(-20%, -20%);
  /* px als Grundwert — gleiche Falle wie beim .bio-badge: ohne Größen-Container fällt cqw
     auf den Viewport zurück (20.6cqw wären ~390px statt 64px). Die cqw-Variante für die
     Shop-Seite steht weiter unten. */
  width: 64px;
  height: 37px;
  z-index: 10;
  margin: 0;
  padding: 0;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
}

/* --- Nur Shop-Kacheln: Badges in Rastermaß (cqw), damit sie mit der Kachel mitskalieren.
   Gilt nur hier, weil nur diese Kacheln einen Größen-Container haben (container-type: size,
   ~3809) — überall sonst gelten die px-Werte oben.
   Die Zahlen entsprechen bei Design-Breite exakt den px-Werten (43px bzw. 64×37px). --- */
:is(.template-collection, .shop-tiles) .product-card-wrapper .bio-badge {
  --bio-h: 13.8cqw;
}
:is(.template-collection, .shop-tiles) .product-card-wrapper .card__badge {
  width: 20.6cqw;
  height: 11.9cqw;
}

.card-wrapper .card .card__badge .badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  border: none;
  box-sizing: border-box;
  background-color: rgba(var(--brand-red-rgb), 1);
}

/* --- Mobile (≤749px): beide Badges kleiner, symmetrisch ---
   ACHTUNG: Diese Regeln setzten früher top/right/left auf feste Pixelwerte und haben damit
   den 20-%-Überstand der Desktop-Regeln wieder aufgehoben (das transform blieb aktiv, nur
   die Kante wanderte nach innen) → das Logo ragte seitlich raus, oben aber nicht. Die
   Ecken-Werte müssen 0 bleiben, damit das translate den Überstand erzeugen kann; hier
   werden nur noch die GRÖSSEN angepasst. */
@media screen and (max-width: 749px) {
  .card-wrapper .bio-badge,
  .bio-badge {
    /* 48/32 = exakt 1,5 : 1 (gleiches Verhältnis wie Desktop) */
    width: 48px !important;
    height: 32px !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
  }

  .card-wrapper .card .card__badge {
    width: 48px;
    height: 28px;
    top: 0;
    left: 0;
    right: auto;
  }

  .card-wrapper .card .card__badge .badge {
    font-size: 1.2rem;
  }
}
/* ============================================
   MOBILE QUICK-ADD TOGGLE ("+" in der Bildecke)
   ============================================ */

.atc-overlay__toggle {
  display: none;
}

@media (hover: none) {
  /* Deaktivieren des unsichtbaren Link-Overlays auf mobile —
     damit der Klick auf den "+"-Button trifft und nicht auf den Produktlink */
  .card-wrapper .card__heading > a::after,
  .card-wrapper .card__heading > a::before {
    pointer-events: none !important;
  }

  /* "+"-Button in der rechten unteren Bildecke */
  .card-wrapper .card .atc-overlay__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-red);
    color: var(--brand-beige);
    border: none;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    padding: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  /* Auf mobile ist das Overlay standardmäßig ausgeblendet */
  .card-wrapper .card .atc-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Wenn die Karte ausgeklappt ist — Overlay sichtbar */
  .card-wrapper .card.is-expanded .atc-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Wenn ausgeklappt — Button versteckt sich, der Nutzer schließt per Tap außerhalb der Karte */
  .card-wrapper .card.is-expanded .atc-overlay__toggle {
    display: none;
  }
}
/* === Kompakte Abstände in den Produktkarten === */

/* Padding der Wrapper verringern */
.card-wrapper .card__content {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.card-wrapper .card__information {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Überschrift — ohne Abstände */
.card-wrapper .card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Vendor — ohne Abstand nach unten */
.card-wrapper .card-information .caption-with-letter-spacing,
.card-wrapper .caption-with-letter-spacing.light {
  margin: 0.2rem 0 0;
}

/* Leeren description-span zwischen Vendor und Preis ausblenden */
.card .caption-large.light:empty {
  display: none;
}

/* Container .card-information — ohne row-gap */
.card-wrapper .card-information {
  margin-top: 0 !important;
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
  gap: 0 !important;
}

/* Direkte Kinder des Containers — ohne eigene margins */
.card-wrapper .card-information > * {
  margin: 0 !important;
}

/* Vendor — kleiner Abstand nach unten */
.card-wrapper .card-information .caption-with-letter-spacing,
.card-wrapper .caption-with-letter-spacing.light {
  margin: 0.2rem 0 0 !important;
}

/* Leeren description-span ausblenden */
.card .caption-large.light:empty,
.card .caption-large.light {
  display: none;
}

/* Preisblock */
.card-price-block {
  margin: 0;
}

.card-price-line {
  margin: 0;
}

.card-unit-price-manual {
  margin-top: 0.1rem;
}

/* Auf mobile — noch kompakter */
@media screen and (max-width: 749px) {
  .card-wrapper .card__content {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .card-wrapper .card__information {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  .card-wrapper .card-information .caption-with-letter-spacing,
  .card-wrapper .caption-with-letter-spacing.light {
    margin: 0.1rem 0 0;
  }

  .card-unit-price-manual {
    margin-top: 0;
  }
}
/* === Startkacheln (category-tiles) — kompakter auf mobile === */
@media screen and (max-width: 749px) {
  /* Container */
  .category-tiles {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Raster — kompakterer Abstand */
  .category-tiles__grid {
    gap: 0.6rem !important;
  }

  /* Kachel — weniger innerer padding */
  .category-tile {
    padding: 1rem !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
  }

  /* Constellation SVG — kleiner */
  .category-tile__decoration img {
    width: 115px !important;
    height: 115px !important;
  }

  /* Title (Onlineshop / Neues / Rezepte / Über uns) */
  .category-tile__title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0.4rem 0 0.3rem;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Subtitle */
  .category-tile__subtitle {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0;
  }
}
/* === Mobile — Collection Hero (Titel + Kategoriebeschreibung) kompakter === */
@media screen and (max-width: 749px) {
  .collection-hero__text-wrapper {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .collection-hero__description.rte h2,
  .collection-hero__title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.8rem !important;
  }

  .collection-hero__description.rte,
  .collection-hero__description.rte p {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
}
/* === Mobile — Collection Hero (das farbige Feld selbst) kompakter === */
@media screen and (max-width: 749px) {
  /* Äußere Abstände der Sektion — kleiner */
  .collection-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Innerer Container — weniger padding */
  .collection-hero__inner {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Text-wrapper — ohne zusätzliche Abstände */
  .collection-hero__text-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================================
   [B11] · „MEHR LADEN", FOOTER-LINKS & TEXT-KARTEN
   ------------------------------------------------------------------------
   „Mehr laden"-Button, Footer-Downloadlinks (PDF/Widerruf) und Karten ohne Bild.
   ============================================================================ */

.collection-load-more,
.blog-load-more {
  background: var(--brand-beige) !important;
}
.collection-load-more:hover,
.blog-load-more:hover {
  background: var(--brand-red) !important;
  color: #FFFFFF;
}
/* === Footer — Menüspalten näher zusammenrücken (desktop) === */
@media screen and (min-width: 750px) {
  .footer__content-top .footer__blocks-wrapper.grid {
    column-gap: 3rem;
    justify-content: flex-start;
  }

  .footer__content-top .footer-block.footer-block--menu {
    width: auto;
    max-width: none !important;
    flex: 0 0 auto;
    margin-right: 2rem;
  }
}
/* === Widerruf-PDF-Link im Footer als Button === */
.footer .footer-block__details-content.rte a[href*=".pdf"],
.footer a[href*="Widerrufsformular"] {
  display: inline-block !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #E9D033 !important;
  background: transparent !important;
  border: 2px solid #E9D033 !important;
  border-radius: 0.4rem !important;
  padding: 0.7rem 1.6rem !important;
  text-decoration: none !important;
  margin-top: 0.5rem !important;
  opacity: 1 !important;
  transition: none !important;
}
.footer .footer-block__details-content.rte a[href*=".pdf"]:hover,
.footer a[href*="Widerrufsformular"]:hover {
  color: #E9D033 !important;
  background: transparent !important;
  border-color: #E9D033 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
/* === Footer: Versandhinweis rechts aussen ===
   Sitzt als eigenes Element im selben Flex-Container wie die Footer-Bloecke
   (sections/footer.liquid). margin-left: auto schiebt ihn an den rechten Rand —
   unabhängig davon, wie breit die Blöcke links davon gerade sind. Genau darum ist es
   kein vierter Block geworden: Der würde in der nächsten Rasterspalte landen, und die
   liegt nicht mehr rechts aussen, seit der Widerruf-Block daneben schmal gemacht und
   verschoben ist (Regel direkt darunter). */
.footer-shipping-note {
  /* Rechts POSITIONIERT, aber links AUSGERICHTET: margin-left: auto schiebt den Block
     an den rechten Rand, der Text darin beginnt trotzdem an einer gemeinsamen linken
     Kante — beide Zeilen fangen also untereinander an, statt am rechten Rand zu
     flattern. */
  margin-left: auto;
  text-align: left;
  align-self: flex-start;
  font-size: 1.4rem;      /* wie die Menülinks im Footer */
  line-height: 1.6;
}
.footer-shipping-note p {
  margin: 0;
}
@media screen and (max-width: 749px) {
  /* Mobil steht der Footer einspaltig — dort linksbündig wie alles andere. */
  .footer-shipping-note {
    margin-left: 0;
    text-align: left;
    margin-top: 2rem;
  }
}

/* === Footer: Block Text mit Widerruf-Button — schmaler machen und unter die 2. Spalte drücken === */
@media screen and (min-width: 750px) {
  /* Der Text-Block selbst — nach Inhalt, ohne Streckung */
  .footer__content-top .footer-block:has(a[href*="Widerrufsformular"]) {
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
  }

  /* Block nach links verschieben, damit der Button unter die Spalte Widerrufsrecht rückt */
  .footer__content-top .footer-block:has(a[href*="Widerrufsformular"]) {
    margin-left: -24rem !important;
    margin-top: 7.5rem !important;
  }
}
/* === Platzhalter "kein Foto": beiger Hintergrund + lesbarer dunkler Text === */
.card--card.card--text .card__inner,
.card--card.card--text .card__inner.gradient,
.card--standard.card--text .card__inner {
  background-color: var(--brand-beige) !important;
  background-image: none !important;
}

.card--text .card__heading,
.card--text .card__heading a,
.card--text .card-information > *,
.card--text .card-information .caption-with-letter-spacing {
  color: var(--brand-red) !important;
}

.card--text .card-price-current,
.card--text .card-price-sale,
.card--text .card-unit-price-manual {
  color: var(--brand-red) !important;
}

/* ============================================================================
   [B12] · OPTIONEN / VARIANTEN (MODAL + PRODUKTSEITE)
   ------------------------------------------------------------------------
   „Optionen waehlen"-Button, Varianten-Modal und Varianten-Pillen.
   ============================================================================ */

/* === Button "Optionen wählen" auf der Kachel === */
.card-wrapper .card {
  position: relative;
}
.card-wrapper .card__inner {
  position: relative;
}

.card-wrapper .card .card-options-btn {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  padding: 1rem 1.2rem;
  border: 2px solid var(--brand-red);
  border-radius: 8px;
  /* 0.8 nur auf der Fläche (= --brand-beige #FFF5E5 mit Alpha): der 2px-Rahmen und die
     Schrift bleiben dadurch voll deckend. Ein opacity: 0.8 auf dem Button hätte beides
     mit ausgeblichen. */
  background: rgba(255, 245, 229, 0.8);
  color: var(--brand-red);
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;

  /* Wie beim Preis im ATC-Overlay: Der Button sitzt absolut in .card__inner und ist damit
     mitgeneigt (--img-rot). Ohne diese beiden Angaben rastet der Browser jede Glyphe
     einzeln auf ganze Pixel, obwohl die Grundlinie schräg verläuft — die Schrift wirkt
     dann versetzt. geometricPrecision schaltet das Rasten ab, die Graustufen-Glättung
     ersetzt die Subpixel-Glättung, die waagerechte Pixelreihen voraussetzt.

     Kein tabular-nums hier: Der Button trägt reinen Text ("Optionen wählen" bzw.
     "Ausverkauft"), keine Ziffern, die beim Zählen die Breite wechseln könnten. */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card-wrapper .card .card-options-btn:hover {
  background: var(--brand-red);
  color: var(--brand-beige);
  transform: translateY(-2px);
}

.card-wrapper .card .card-options-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-wrapper .card:has(.card-options-btn) .card__heading > a::after {
  pointer-events: none;
}

/* === Geneigte Schrift auf gerader Grundlinie — der verlässliche Weg ===
   Beide Schaltflächen sitzen in .card__inner und sind mitgeneigt (--img-rot). Ohne eigene
   Textur setzt der Browser jede Glyphe einzeln an ihre gedrehte Position und rundet dabei
   auf ganze Pixel — das ergibt den huckeligen Versatz. Liegt das Element dagegen auf einer
   eigenen Ebene, wird der Text UNGEDREHT hineingezeichnet und erst die fertige Textur
   gekippt: gerade Grundlinie, gleichmäßige Abstände.

   Warum filter und nicht will-change: will-change ist nur ein HINWEIS. Für ein Element mit
   visibility: hidden (Grundzustand dieser Buttons) legt der Browser keine Ebene an, und
   beim Sichtbarwerden zieht er sie nicht mehr nach — deshalb blieb der Effekt aus. filter
   ist dagegen bindend: Es erzeugt zwingend einen eigenen Zeichenkontext, unabhängig von
   Sichtbarkeit und Zeitpunkt.

   opacity(0.999) ist dabei optisch folgenlos (0,1 % Deckkraft weniger sieht niemand) und
   nur das billigste Mittel, um diesen Kontext zu erzwingen. Alternativ ginge blur(0px);
   opacity ist die harmlosere Rechenoperation.

   Nachteil, ehrlich benannt: Der Text wird dadurch in eine Textur gerastert und mit ihr
   gedreht. Das kann ihn eine Spur weicher wirken lassen als frisch gerasterte Schrift —
   das ist der Preis für die gleichmäßige Grundlinie. */
.card-wrapper .card .card-options-btn,
.card-wrapper .card .atc-overlay__btn,
.card-wrapper .card .atc-overlay__qty {
  filter: opacity(0.999);
}

@media (hover: hover) and (pointer: fine) {
  .card-wrapper .card .card-options-btn {
    opacity: 0;
    visibility: hidden;

    /* Eigene GPU-Ebene, dauerhaft — gleiche Begründung wie bei .atc-overlay:
       nur darauf wird der Text ungedreht in die Textur gezeichnet und erst die fertige
       Textur geneigt. Muss im Grundzustand stehen, nicht in der Hover-Regel: will-change
       wirkt nur, wenn es gilt, BEVOR gezeichnet wird. */
    will-change: transform, opacity;
  }
  .card-wrapper:hover .card .card-options-btn {
    opacity: 1;
    visibility: visible;
  }
}

@media (hover: none) {
  /* Multi-Variante auf mobile — rundes "+" in der Bildecke, wie bei 1-Varianten-Produkten */
  .card-wrapper .card .card-options-btn {
    opacity: 1;
    visibility: visible;
    left: auto;
    right: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--brand-red);
    color: var(--brand-beige);
    border: none;
    font-size: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Text "Optionen wählen" verstecken, "+" anzeigen */
  .card-wrapper .card .card-options-btn::after {
    content: "+";
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-beige);
    line-height: 1;
  }
}
/* === Varianten-Modal ===
   position: absolute (NICHT fixed) → Bezugsrahmen ist .card-wrapper .card (position: relative,
   ~5204), also die Kachel des jeweiligen Produkts. Genau das war der Fehler: mit fixed hing
   das Pop-up am Viewport und war bildschirmmittig statt über seiner Kachel.
   Nachweis aus den DevTools: die Box maß 300px = exakt ihr max-width — 90 % wurden also
   gegen den Viewport gerechnet, nicht gegen die ~310px breite Kachel (davon wären es 279px).
   Die Annahme, container-type: size (~3793) auf .product-card-wrapper fange position: fixed
   ein, war falsch — hier tut es das nicht. */
.card-variant-modal {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-variant-modal[hidden] { display: none; }
.card-variant-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
/* Das Pop-up überlagert die Kachel mittig — bewusst im ursprünglichen Format.
   Zur Historie: .product-card-wrapper hat container-type: size (~3793), was die Kachel zum
   Containing Block für position: fixed macht. Das Pop-up ist dadurch ohnehin kein
   Vollbild-Modal, sondern auf die Kachel begrenzt; das Flex-Zentrieren von
   .card-variant-modal setzt es dort mittig. Ein Versuch, es stattdessen auf den
   Bildmittelpunkt und auf Bildbreite zu setzen, machte es nur schmal und unruhig →
   zurückgenommen. Auch die mitgedrehte Variante ist raus: bewusst exakt der
   ursprüngliche, funktionierende Zustand. */
.card-variant-modal__box {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 300px;
  background: var(--brand-beige);
  border: 2px solid var(--brand-red);
  border-radius: 12px;
  padding: 2rem 2rem 2.2rem;
  font-family: 'Roboto Slab', serif;
}
.card-variant-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--brand-red);
  cursor: pointer;
}
.card-variant-modal__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
/* object-fit: contain statt cover. cover füllt das 64×64-Quadrat vollständig und schneidet
   dafür alles ab, was nicht ins Format passt — bei hochformatigen Produktbildern (Flaschen,
   Tuben) also Deckel und Boden. Hier ist das Bild eine Erkennungshilfe im Variantendialog,
   das ganze Produkt muss sichtbar sein; contain skaliert es deshalb komplett hinein und
   lässt lieber Rand stehen.

   Die Box bleibt bewusst quadratisch und behält ihre feste Größe: Sie ist im Flex-Kopf des
   Dialogs neben dem Titel platziert, eine mit dem Seitenverhältnis mitwandernde Breite würde
   den Titel je nach Produktbild verschieben.

   Die Zeile wirkt auch auf das per JS eingesetzte Variantenbild (layout/theme.liquid,
   data-vq-img) — dort wird nur src getauscht, die Klasse bleibt. */
.card-variant-modal__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  /* Weißer Grund für die Fläche, die contain frei lässt. Das Element ist selbst die Box —
     ein <img> mit fester Größe —, deshalb genügt background hier und es braucht keinen
     zusätzlichen Rahmen-Container. Sichtbar wird das an zwei Stellen: seitlich neben
     hochformatigen Bildern, und bei freigestellten PNGs, die sonst das Beige des Dialogs
     durchscheinen ließen. */
  background-color: #ffffff;
}
.card-variant-modal__title {
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--brand-red);
}
.card-variant-modal__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.card-variant-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--brand-red);
  border-radius: 12px;
  background: transparent;
  color: var(--brand-red);
  font-family: 'Roboto Slab', serif;
  cursor: pointer;
  min-width: 9rem;
}
.card-variant-pill__size {
  font-weight: 700;
  font-size: 1.4rem;
}
.card-variant-pill__price {
  font-weight: 700;
  font-size: 1.3rem;
}
.card-variant-pill__unit {
  font-size: 1.15rem;
  opacity: 1;
}
.card-variant-pill.is-selected {
  background: var(--brand-red);
  color: var(--brand-beige);
}
.card-variant-pill.is-soldout {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
.card-variant-modal__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--brand-red);
  border-radius: 6px;
  width: 100%;
  margin: 0 0 1.4rem;
  overflow: hidden;
}
.card-vq-qty-btn {
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  background: transparent;
  color: var(--brand-red);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-vq-qty-btn:hover {
  background: rgba(var(--brand-red-rgb), 0.08);
}
.card-vq-qty-display {
  min-width: 3rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand-red);
}
.card-variant-modal__atc {
  width: 100%;
}
/* Hintergrund der Produktkarte (scheme-2) — transparent, damit keine roten Streifen entstehen */
.card-wrapper .card__inner[class*="color-scheme-"],
.card-wrapper .card__inner[class*="color-scheme-"].gradient {
  background-color: var(--brand-beige) !important;
  background-image: none !important;
}
.card-price-prefix {
  color: var(--brand-red);
  font-size: 1.3rem;
  font-weight: 600;
  margin-right: 0.3rem;
}
.card-variant-pill__compare {
  font-size: 1.2rem;
  text-decoration: line-through;
  opacity: 0.85;
}
.card-variant-pill.is-selected .card-variant-pill__compare,
.card-variant-pill.is-selected .card-variant-pill__unit {
  opacity: 1;
}
/* === Varianten auf der Produktseite (Pillen wie im Modal) ===
   Grundform fuer das Varianten-Modal auf den Shop-Kacheln. Die PRODUKTSEITE ueberschreibt
   das weiter unten und richtet sich dort am Kaufbutton aus; deshalb bleibt es hier rund. */
.product-form__input--pill .form__label {
  color: var(--brand-red);
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

.product-form__input--pill input[type='radio'] + label {
  border: 2px solid var(--brand-red);
  border-radius: 999px;
  background: transparent;
  color: var(--brand-red);
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 0.7rem 1.6rem;
  min-width: auto;
  transition: background 0.15s ease, color 0.15s ease;
}

.product-form__input--pill input[type='radio'] + label:hover {
  background: rgba(var(--brand-red-rgb), 0.08);
}

.product-form__input--pill input[type='radio']:checked + label {
  background: var(--brand-red);
  color: var(--brand-beige);
  border-color: var(--brand-red);
}

.product-form__input--pill input[type='radio']:focus-visible + label {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

/* === Variantenschalter der PRODUKTSEITE: Bildsprache des Kaufbuttons ===
   Sie stehen direkt ueber der Kaufbox und sollen als Teil desselben Kaufvorgangs lesbar sein.
   Vorbild ist deshalb der echte Kaufbutton dieses Themes, NICHT die runde Modal-Pille:
   kantig, harte Licht-/Schattenkante, Roboto Slab fett, Markenrot auf Beige.

   Bewusst auf .product__info-container eingegrenzt: Dieselbe Klasse traegt auch das
   Varianten-Modal der Shop-Kacheln — dort bleibt die runde Form, weil es dort keinen
   Kaufbutton als Bezug gibt.

   REGLER:
     --variant-row    Hoehe eines Schalters in Rasterzellen
     --variant-bevel  Dicke der harten Kante (wie --buybox-bevel an der Kaufbox)

   Zur Hoehe: Die Variantenzone ist --pdp-zone-variants (0.4 Zellen = 48px) hoch und
   schneidet Ueberstand ab. Beschriftung (~19px) plus Schalter muessen da hineinpassen,
   deshalb 0.24 Zellen (~29px) statt der 37.6px des Kaufbuttons. Gleich hoch wie dieser
   ginge nur, wenn --pdp-zone-variants waechst — das schoebe Bio-Block und Artikelzeilen
   nach unten und liesse den Stapel ueber die Boxhoehe laufen. */
.product__info-container .product-form__input--pill {
  --variant-row: 0.24;
  --variant-bevel: 2px;
}

.product__info-container .product-form__input--pill .form__label {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.product__info-container .product-form__input--pill input[type='radio'] + label {
  /* inline-flex, damit der Text in der festen Hoehe mittig sitzt — mit reinem padding
     haette jede Schriftgroessenaenderung die Hoehe wieder verschoben. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(var(--cell, 120px) * var(--variant-row));
  padding: 0 1.1rem;
  border: 0;
  border-radius: 0;
  background: rgba(var(--brand-red-rgb), 0.14);
  color: var(--brand-red);
  font-size: calc(var(--cell, 120px) * var(--variant-row) * 0.45);
  box-shadow:
    inset var(--variant-bevel) var(--variant-bevel) 0 rgba(255, 255, 255, 0.45),
    inset calc(var(--variant-bevel) * -1) calc(var(--variant-bevel) * -1) 0 rgba(0, 0, 0, 0.25);
}

.product__info-container .product-form__input--pill input[type='radio'] + label:hover {
  background: rgba(var(--brand-red-rgb), 0.26);
}

/* Gewaehlt: gefuellt wie der Kaufbutton. */
.product__info-container .product-form__input--pill input[type='radio']:checked + label {
  background: var(--brand-red);
  color: var(--brand-beige);
  box-shadow:
    inset var(--variant-bevel) var(--variant-bevel) 0 rgba(255, 255, 255, 0.3),
    inset calc(var(--variant-bevel) * -1) calc(var(--variant-bevel) * -1) 0 rgba(0, 0, 0, 0.45);
}

/* Gedrueckt: Licht und Schatten tauschen die Seiten — dieselbe Geste wie an der Kaufbox. */
.product__info-container .product-form__input--pill input[type='radio'] + label:active {
  box-shadow:
    inset calc(var(--variant-bevel) * -1) calc(var(--variant-bevel) * -1) 0 rgba(255, 255, 255, 0.3),
    inset var(--variant-bevel) var(--variant-bevel) 0 rgba(0, 0, 0, 0.45);
}
/* === Desktop: Varianten rechts vom Preis === */
@media screen and (min-width: 750px) {
  .product__info-container {
    position: relative;
  }

  /* Varianten-Block — in die rechte obere Ecke, auf Höhe des Preises */
  .product__info-container variant-selects {
    position: absolute;
    top: 8rem;
    right: 0;
    width: auto;
    max-width: 45%;
    margin: 0;
    text-align: right;
  }

  /* Label und Pillen — rechtsbündig ausrichten */
  .product__info-container variant-selects .product-form__input--pill {
    margin: 0;
    text-align: right;
  }

  .product__info-container variant-selects .product-form__input--pill .form__label {
    text-align: right;
  }

  /* Pillen in einer Reihe, rechtsbündig */
  .product__info-container variant-selects fieldset {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    border: 0;
    padding: 0;
  }
}
.product-form__submit-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.product-form__submit-icon {
  flex-shrink: 0;
}
/* === Dr. Hauschka — Mengen-Limit-Hinweis im Quick-Add === */
.drh-limit-msg {
  /* Liegt mittig ÜBER dem Produktbild und überlagert alles, ohne etwas zu verschieben.
     Das JS (layout/theme.liquid, showDrhMessage) hängt den Hinweis an .atc-overlay bzw.
     .card-variant-modal an — beide sind position: absolute und decken sich mit dem Bild
     bzw. der Kachel. Als normales Flex-Element war er vorher Teil des Layouts und hat die
     Kauf-Buttons verschoben; position: absolute nimmt ihn da heraus, top/left 50 % plus
     translate(-50 %, -50 %) zentriert ihn in beide Richtungen.
     pointer-events: none, damit er in den 5 Sekunden, die er sichtbar ist, keine Klicks
     auf Mengenwähler oder Kauf-Button abfängt. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;          /* über den Kauf-Buttons (z-index 120) */
  max-width: 90%;        /* bleibt innerhalb des Bildes, statt es zu sprengen */
  pointer-events: none;
  padding: 0.6rem 0.9rem;
  background: var(--brand-beige);
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
  border-radius: 6px;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

/* ============================================================================
   [B13] · SUCHE (SEITLICHE EBENE)
   ------------------------------------------------------------------------
   Von rechts einfahrende Such-Ebene samt Vorschlaegen, ein Regelsatz fuer alle Breiten.
   Danach noch: Darstellung der Artikelkarten in den Suchergebnissen.
   ============================================================================ */

/* === Suchbereich „Was suchen Sie?" — Ebene von rechts === */
/*
   Gestaltung nach Vorgabe: beige Karte (#FFF5E5) mit 2px starkem Rahmen in Dunkelrot
   (#99220A), Roboto Slab, Pinnwand-Anmutung. Die Karte fährt von rechts ein.

   Aufbau (Markup in snippets/header-search.liquid):
     .search-modal            Hülle über dem ganzen Fenster
       .modal-overlay         abdunkelnde Fläche
       .search-modal__content DIE EINFAHRENDE SCHICHT — ohne eigene Fläche, nur Rahmenmaß
         .search-modal__close-button
         .dgl-search__card    die sichtbare Karte (max. 380px)
           .dgl-search__title       „Was suchen Sie?"
           .dgl-search__row         Feld + Pfeil-Knopf
           .predictive-search       Vorschläge, eigener Kasten mit eigenem Rahmen

   Warum Schicht UND Karte getrennt sind: Die Karte soll ringsum einen Rahmen zeigen und
   380px breit bleiben. Wäre die einfahrende Schicht selbst die Karte, klebte sie an der
   Fensterkante — rechter und oberer Rahmen lägen im Anschnitt. Die Schicht ist deshalb
   etwas breiter, unsichtbar, und trägt nur den Abstand zur Fensterkante.

   Am JavaScript war nichts zu ändern: details-modal.js schließt bei Klick auf das Overlay,
   bei Klick außerhalb und mit Escape und sperrt das Scrollen der Seite.
*/

/* Hülle über dem ganzen Fenster. Selbst unsichtbar — Fläche liefern Overlay und Karte.
   Dawns Öffnungsanimation (animateMenuOpen, ein Aufklappen nach unten) wird abgeschaltet,
   die Ebene bringt ihre eigene mit. */
.header__search .search-modal,
.header__search .search-modal.modal__content,
.header__search .search-modal.modal__content.gradient,
details-modal.header__search .modal__content {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* Abdunkelnde Fläche. Dawn baut sie aus einem ::after, das erst UNTERHALB des Headers
   beginnt (top: 100%) — für den früheren Streifen richtig, hier soll die ganze Seite
   abgedunkelt werden. Deshalb ::after aus und die Fläche direkt auf das Element. */
details-modal.header__search .modal-overlay,
details-modal.header__search details[open] .modal-overlay,
.header__search details[open] .modal-overlay {
  display: block !important;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.header__search .modal-overlay::after {
  display: none !important;
}

/* Das zweite, kleine Kreuz im Header ausblenden.
   Dawns Lupen-Knopf enthält ZWEI Symbole: die Lupe und ein Kreuz (.header__icon-close). Bei
   geöffneter Suche wird das Kreuz eingeblendet — gedacht als Ersatz für die Lupe, nur blendet
   Dawn die Lupe dabei nicht aus. Beide standen deshalb nebeneinander in der Menüzeile.
   Da die Ebene ihren eigenen Schließen-Knopf mitbringt (und Klick daneben sowie Escape
   ebenfalls schließen), ist das Kreuz im Header überflüssig. */
.header__search .header__icon-close,
.header__search details[open] .header__icon-close {
  display: none !important;
}

/* --- Die einfahrende Schicht ---
   Rechts angeschlagen, über die volle Fensterhöhe. Sie hat keine eigene Fläche und keinen
   Innenabstand mehr: Die Karte darin füllt sie vollständig aus, so wie bei clearspring.co.uk.
   (Vorher lag zwischen Schicht und Fensterkante ein Rand von 24px, die Karte war dadurch eine
   kleine Box oben rechts.) */
.header__search .search-modal__content,
.header__search .search-modal__content-bottom,
.header__search .search-modal__content-top {
  /* Breite der Ebene. Die Vorgabe lag bei 380px, auf Wunsch das Anderthalbfache.
     Die Karte darin hat keine eigene Breitenbegrenzung mehr — sie folgt diesem Wert. */
  --dgl-search-width: 570px;

  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 2;
  width: min(var(--dgl-search-width), 100vw) !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  /* transform bewusst OHNE !important: Eine !important-Deklaration schlägt in der Kaskade
     auch eine Animation. Die Ebene stünde dann sofort da, statt einzufahren. */
  transform: translateX(0);
  animation: dgl-search-drawer-in 0.3s ease both;
}

@keyframes dgl-search-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Wer Bewegung im Betriebssystem abbestellt hat, bekommt die Ebene ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
  .header__search .search-modal__content,
  .header__search .search-modal__content-bottom,
  .header__search .search-modal__content-top {
    animation: none;
  }
}

/* Schließen-Knopf oben rechts IN der Karte, auf Höhe der Überschrift.
   Er ist im Markup ein Geschwister der Karte, kein Kind — absolut positioniert liegt er
   trotzdem an der richtigen Stelle, weil die Schicht (position: fixed) der Bezugsrahmen ist.
   Das ist hier sogar der bessere Weg: Die Karte scrollt innerlich, ein Knopf IN ihr würde
   beim Blättern durch eine lange Trefferliste nach oben aus dem Bild wandern.
   Dawn setzt ihn ab 990px auf position: initial und schiebt ihn per margin neben das Feld —
   deshalb hier alle Positionsangaben ausdrücklich zurücksetzen. */
.header__search .search-modal__close-button {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3;
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #99220a !important;
  color: #fff5e5 !important;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header__search .search-modal__close-button .svg-wrapper,
.header__search .search-modal__close-button .icon {
  color: #fff5e5;
  width: 14px;
  height: 14px;
}

/* --- Die Karte ---
   Sie trägt die Klasse .dgl-search__card und ist zugleich das <predictive-search>-Element.
   Ein eigener Wrapper wäre überflüssig gewesen; wichtig ist nur, dass die Klasse NICHT auch
   am inneren <form> hängt, sonst läge Rahmen in Rahmen. */
.header__search .dgl-search__card {
  display: block;
  width: 100%;
  max-width: none;
  /* Volle Fensterhöhe. Die Karte ist damit kein Kästchen mehr, sondern eine durchgehende
     Spalte am rechten Rand — der Rahmen läuft entsprechend über die ganze Höhe mit.
     Sie scrollt in sich selbst; der Schließen-Knopf liegt außerhalb und bleibt stehen. */
  height: 100%;
  padding: 28px;
  background-color: #fff5e5;
  border: 2px solid #99220a;
  font-family: 'Roboto Slab', serif;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -0.8rem 0 2.4rem rgba(0, 0, 0, 0.18);
}

.header__search .dgl-search__title {
  margin: 0 0 16px 0;
  /* Platz für den Schließen-Knopf, der auf derselben Höhe rechts sitzt. */
  padding-right: 44px;
  color: #99220a;
  font-family: 'Roboto Slab', serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Feldzeile: Eingabe + Pfeil-Knopf --- */
.header__search .dgl-search__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.header__search .dgl-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  background-color: #fff5e5;
  border: 2px solid #99220a !important;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Roboto Slab', serif;
  font-size: 14px;
  color: #2a2a2a;
  -webkit-text-fill-color: #2a2a2a;
}
.header__search .dgl-search__input:focus,
.header__search .dgl-search__input:focus-visible {
  outline: 2px solid #99220a;
  outline-offset: 2px;
  box-shadow: none;
}
/* Das Feld bleibt leer — kein Platzhaltertext. Die Regel fängt Browser ab, die von sich aus
   etwas einsetzen (Safari zeigt bei type="search" gelegentlich eigene Beschriftungen). */
.header__search .dgl-search__input::placeholder {
  color: transparent;
  opacity: 0;
}
/* Die native Lösch-Kreuz-Schaltfläche von WebKit würde neben dem Pfeil-Knopf doppelt wirken. */
.header__search .dgl-search__input::-webkit-search-cancel-button,
.header__search .dgl-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.header__search .dgl-search__submit {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  align-self: center;
  background-color: #99220a;
  color: #fff5e5;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header__search .dgl-search__submit:hover,
.header__search .dgl-search__submit:focus-visible {
  background-color: #7a1b08;
  color: #fff5e5;
}

/* Der Zurücksetzen-Knopf gehört nicht zur Gestaltung, muss aber im Markup bleiben —
   assets/search-form.js greift in toggleResetButton() ungeprüft darauf zu. */
.header__search .dgl-search__reset {
  display: none !important;
}

/* --- Vorschläge ---
   Eigener Kasten unter der Feldzeile, im Fluss der Karte statt schwebend darunter.
   position: static, weil der Kasten sonst als Popup über den Seiteninhalt fiele.

   max-height muss mit !important gesetzt werden: predictive-search.js schreibt bei jeder
   Eingabe eine berechnete Höhe direkt ins style-Attribut (Fensterhöhe minus Headerkante).
   Die galt der früheren Suchleiste; hier soll die Karte scrollen, nicht die Liste.

   background ebenfalls mit !important — sonst gewinnt
   .color-scheme-1 { background-color: transparent !important } und der Kasten bliebe
   durchsichtig. Genau daran lag es, dass die Vorschläge vorher rot hinterlegt aussahen. */
.header__search .predictive-search {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff5e5 !important;
  background-image: none !important;
  border: 2px solid #99220a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* --- Reihenfolge der Ergebnisgruppen: Produkte zuerst, Beiträge danach ---
   Die Section liefert zwei Gruppen: die erste enthält Vorschläge/Kategorien und die
   Seiten-/Beitragsliste, die zweite die Produkte. In der Quelltextreihenfolge stünden die
   Beiträge damit VOR den Produkten.

   Statt die Section umzubauen dreht flexbox die beiden Gruppen per order um. Das ist hier
   zulässig, weil beide Gruppen eigenständige, beschriftete Listen sind — die Vorlesereihen-
   folge für Screenreader bleibt zwar die des Quelltexts, aber jede Gruppe trägt ihre eigene
   Überschrift („Produkte“, „Beiträge“), es geht also kein Zusammenhang verloren. */
.header__search .predictive-search__results-groups-wrapper {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  border-bottom: 0;
}
.header__search .predictive-search__result-group {
  display: block;
}
.header__search .predictive-search__result-group:first-child {
  order: 2;
}
.header__search .predictive-search__result-group:last-child {
  order: 1;
}
/* Dawn gibt der ersten Gruppe ab 750px eine feste Breite (flex: 0 0 26.4rem). In einer
   Spalte wäre das eine feste HÖHE — die Gruppe würde auf 26,4rem aufgeblasen oder
   abgeschnitten. Drei Klassen im Selektor, damit die Regel Dawns zwei schlägt. */
.header__search .predictive-search__result-group:first-child,
.header__search .predictive-search__result-group:last-child,
.header__search .predictive-search__result-group:only-child {
  flex: 0 0 auto;
}
/* Dawn blendet die doppelt gerenderte Seiten-/Beitragsliste je nach Bildschirmbreite in der
   einen oder anderen Spalte aus und setzt die sichtbare auf display: initial — an einem
   <div> heißt das inline. Hier gehört sie als Block gesetzt. Die Ausblendregeln bleiben
   unangetastet, sonst stünde die Liste doppelt da. */
.header__search .predictive-search__result-group:first-child .predictive-search__pages-wrapper {
  display: block;
}

/* Beschriftung „Produkte“ über der Liste */
.header__search .predictive-search__heading {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 0;
  color: #99220a !important;
  font-family: 'Roboto Slab', serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.header__search .predictive-search__results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Ein Treffer --- */
.header__search .predictive-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  background-color: transparent;
}

/* Bildkachel: immer exakt 50 × 65, unabhängig vom Seitenverhältnis des Fotos.
   object-fit: contain statt cover — cover würde die Kachel füllen und dafür bei
   hochformatigen Produktbildern Deckel und Boden abschneiden.
   Der weiße Grund ist die Fläche, die contain frei lässt; er entspricht den Produktkacheln
   im übrigen Shop. Dunkelrot erscheint nur bei der Ersatzfläche für Produkte ohne Bild
   (.predictive-search__image--empty, erzeugt in sections/predictive-search.liquid). */
.header__search .predictive-search__image {
  flex: 0 0 auto;
  display: block;
  width: 50px !important;
  height: 65px !important;
  max-width: 50px;
  object-fit: contain;
  background-color: #ffffff;
  border-radius: 4px;
}
.header__search .predictive-search__image--empty {
  background-color: #99220a;
}

/* Treffer OHNE Bildkachel — Beiträge und Rezepte — enger setzen.
   Die 10px oben und unten sind auf die 65px hohe Produktkachel abgestimmt; bei einer reinen
   Textzeile reißen sie die Liste unnötig auseinander. Die Zeilen bleiben mit rund 24px Höhe
   auch auf dem Handy noch bequem zu treffen. */
.header__search .predictive-search__item:not(.predictive-search__item--link-with-thumbnail) {
  padding-top: 4px;
  padding-bottom: 4px;
}

.header__search .predictive-search__item-content {
  display: block;
  min-width: 0;
}

.header__search .predictive-search__item-heading {
  margin: 0;
  color: #99220a !important;
  font-family: 'Roboto Slab', serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* Preis. Der Selektor greift auch die Bausteine aus snippets/price.liquid ab, damit die
   dortige Markenfarbe hier nicht durchschlägt. */
.header__search .predictive-search__item .price,
.header__search .predictive-search__item .price *,
.header__search .predictive-search__item .price__regular,
.header__search .predictive-search__item .price-item {
  margin-top: 0;
  color: #666666 !important;
  font-family: 'Roboto Slab', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.header__search .predictive-search__item .price {
  margin-top: 2px;
}

/* Hervorhebung beim Überfahren und bei Tastatursteuerung (aria-selected setzt das JS). */
.header__search .predictive-search__list-item[aria-selected='true'] > *,
.header__search .predictive-search__list-item:hover > *,
.header__search .predictive-search__item[aria-selected='true'],
.header__search .predictive-search__item:hover {
  background-color: rgba(153, 34, 10, 0.08) !important;
}
.header__search .predictive-search__list-item:hover .predictive-search__item-heading {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* Der „Alle Ergebnisse anzeigen“-Knopf unter der Liste */
.header__search .predictive-search__item--term {
  justify-content: space-between;
  color: #99220a !important;
  font-family: 'Roboto Slab', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* === Suchergebnisse: Artikel ohne Foto — beiger Medienblock === */
.article-card-wrapper .card__inner.color-scheme-2,
/* Kein !important: diese Selektoren (bis zu 4 Klassen, .article-card…color-scheme-2.gradient)
   schlagen Dawns Farbschema-Regeln (1–2 Klassen) per Spezifität. */
.article-card-wrapper .card__inner.color-scheme-2.gradient,
.card.article-card.card--standard.card--text .card__inner,
.card.article-card.card--standard.card--text .card__inner.color-scheme-2.gradient,
.article-card .card__inner.color-scheme-2,
.article-card .card__inner.color-scheme-2.gradient {
  background-color: var(--brand-beige);
  background-image: none;
  --gradient-background: var(--brand-beige);
}

/* Text in der Artikelkarte ohne Foto — Bordeaux */
.article-card-wrapper .card--text .card__heading,
.article-card-wrapper .card--text .card__heading a,
.article-card-wrapper .card--text .full-unstyled-link {
  color: var(--brand-red);
}
/* === Artikel ohne Foto in der Suche — gradient-Variable überschreiben === */
.article-card-wrapper .card__inner.gradient,
.article-card-wrapper .card.color-scheme-2,
.article-card-wrapper .color-scheme-2.gradient,
div.card__inner.color-scheme-2.gradient {
  --gradient-background: var(--brand-beige);
  background: var(--brand-beige);
  background-color: var(--brand-beige);
  background-image: none;
}
/* === Badge auf Artikelkarten ausblenden (Artikel haben keinen Rabatt, das Feld ist leer und Bordeaux) === */
.article-card-wrapper .card__badge,
.article-card .card__badge {
  display: none !important;
}
/* === Header: Menü überlappt Länderauswahl — Fix === */
@media screen and (min-width: 990px) and (max-width: 1360px) {
  .header__inline-menu .header__menu-item {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: 1.4rem;
  }
}

/* ============================================================================
   [B14] · WARENKORB
   ------------------------------------------------------------------------
   Beige Karten-Optik fuer Warenkorb: Positionen, Summen und Buttons.
   ============================================================================ */

/* === Warenkorb-Hinweis: Produktbild wie eine Shop-Kachel ===
   Gleiche Idee wie im Shop: leichter Schatten und eine minimale Neigung, die über die
   Positionen zyklisch wechselt und dadurch zufällig wirkt. Dieselben vier Winkel wie
   dort (siehe .product-grid > li:nth-child(4n+…)).

   Steht hier in base.css und nicht in component-cart-notification.css — Dawns
   Komponenten-CSS bleibt unangetastet. Ein Spezifitätskonflikt entsteht nicht: Die
   Dawn-Regel setzt nur display und margin, transform und box-shadow sind dort gar nicht
   vergeben.

   Schatten bewusst kleiner als bei den Kacheln (dort 3px 5px 12px): Das Vorschaubild ist
   nur 70px groß, der Kachelschatten würde es erschlagen. Einziger Regler für die
   Stärke ist die Zeile box-shadow.

   Den Winkel liefert --img-rot als Inline-Style aus sections/cart-notification-product.liquid,
   abgeleitet aus der Produkt-ID. Bewusst nicht per :nth-child wie im Shop: cart-notification.js
   überträgt nur das INNERE des .cart-item-Elements in den Hinweis, ein Wrapper mit der
   Variablen darauf existiert im fertigen DOM also gar nicht. */
.cart-notification-product__image {
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.16);
  /* translateZ(0) + backface-visibility wie bei den Kacheln: erzwingt eine GPU-Ebene,
     damit die gedrehten Kanten glatt bleiben statt treppig zu rastern. */
  transform: rotate(var(--img-rot, 0deg)) translateZ(0);
  backface-visibility: hidden;
}

/* === Warenkorb: Produktbilder als quadratische Kacheln wie im Shop ===
   Bisher behielt jedes Bild sein eigenes Seitenverhältnis — hohe und breite Produkte
   waren dadurch unterschiedlich groß. Jetzt sitzt jedes Bild in einem gleich großen
   Quadrat und wird darin eingepasst (object-fit: contain, also ohne Beschnitt).

   Steht in base.css und nicht in component-cart-items.css — Dawns Komponenten-CSS bleibt
   unangetastet. Die zwei Klassen im Selektor sind nötig, weil component-cart-items.css NACH
   base.css lädt und bei gleicher Spezifität gewinnen würde. */
.cart-items .cart-item__image-container {
  /* EINZIGER REGLER für die Kachelgröße. */
  --cart-tile: 10rem;
  width: var(--cart-tile);
  height: var(--cart-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  /* Schatten und Neigung wie bei den Shop-Kacheln (dort 3px 5px 12px, hier eine Spur
     kleiner, weil die Kachel nur 100px misst). Den Winkel liefert --img-rot als
     Inline-Style aus sections/main-cart-items.liquid. */
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15);
  transform: rotate(var(--img-rot, 0deg)) translateZ(0);
  /* translateZ(0) + backface-visibility wie im Shop: erzwingt eine GPU-Ebene, damit die
     gedrehten Kanten glatt bleiben statt treppig zu rastern. */
  backface-visibility: hidden;
}
.cart-items .cart-item__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: 0.7rem;
}

/* === Warenkorb: Mülleimer größer und kräftiger ===
   „Fetter“ geht hier nicht über die Linienstärke: Das Symbol besteht aus GEFÜLLTEN
   Flächen (fill=currentColor in icon-remove.svg), eine stroke-width gibt es dort nicht
   zu erhöhen. Eine zusätzliche Kontur in derselben Farbe verdickt stattdessen die
   vorhandenen Formen — Deckel, Korpus und die beiden Streben werden dadurch gleichmäßig
   stärker. Der Wert bezieht sich auf das viewBox-Raster 0 0 16 16, nicht auf Pixel:
   0.5 entspricht dort gut 3 % der Symbolbreite. */
.cart-items cart-remove-button .icon-remove {
  width: 2.2rem;
  height: 2.2rem;
  stroke: currentColor;
  stroke-width: 0.5;
}

/* === Warenkorb: Beige-Platte im Seitenstil === */
cart-items.page-width,
#main-cart-footer {
  background: var(--brand-beige);
}

cart-items.page-width {
  padding-top: 3rem;
  border-radius: 12px 12px 0 0;
}

#main-cart-footer {
  padding-bottom: 4rem;
  border-radius: 0 0 12px 12px;

  /* Kein Hintergrund über die ganze Breite mehr — daneben soll das Raster durchscheinen.
     Beige gibt es nur noch als Karte hinter dem Summenblock, siehe .cart__footer .cart__blocks.
     Auch KEIN overflow: hidden hier: Der Summenblock wird per transform nach oben versetzt
     und ragt dabei über diese Kante hinaus — ein Beschnitt würde ihm den Kopf abschneiden. */
  background: none;

  /* REGLER: Abstand nach unten zum Seitenfuß, in Rasterzellen. Eine ganze Zelle, damit
     der Warenkorb unten bündig auf einer Rasterlinie endet. */
  --cart-footer-gap: 1;
  margin-bottom: calc(var(--cell, 120px) * var(--cart-footer-gap));
}

/* Die beige Fläche hinter dem Summenblock kommt aus der bestehenden Regel
   „.cart__footer .cart__blocks“ weiter unten — eine abgerundete Karte, die genau so breit
   ist wie der Block selbst. Hier stand zwischenzeitlich eine zusätzliche, größere Platte
   als Pseudo-Element; sie war doppelt gemoppelt und ragte über die Karte hinaus, was die
   harte Kante im Raster erzeugte. Entfernt. */

/* === Fußbereich: Polster raus und unten kürzen ===
   Dawn gibt dem Fußbereich 5rem Polster nach unten
   (.cart__footer-wrapper:last-child .cart__footer in component-cart.css). Die ID im
   Selektor ist nötig, weil component-cart.css NACH base.css lädt — mit gleicher oder
   geringerer Spezifität würde Dawns Regel gewinnen.

   Bewusst OHNE negativen Rand: Ein Kürzen des Kastens rückt nur den Seitenfuß hoch,
   es lässt kein Raster erscheinen. */
#main-cart-footer .cart__footer {
  padding-bottom: 0;
}

/* === Summenblock: breiter und höher ===
   Dawn gibt beiden Spalten des Fußbereichs pauschal 35rem (.cart__footer > *). Das war
   fuer "Geschätzte Gesamtkosten" neben dem Betrag zu schmal — die Summe brach um. */
.cart__footer > .cart__blocks {
  /* REGLER Breite des Summenblocks. */
  width: 42rem;
  /* REGLER: senkrechter Versatz in Rasterzellen. Negativ = nach oben.

     Steht auf 0, damit der Summenblock INNERHALB von .cart__footer bleibt. Bei -0,8 ragte
     er rund 58 px ueber dessen Oberkante hinaus — nachgemessen mit Umrissen auf beiden
     Kaesten. transform veraendert nur die Darstellung, nicht das Layout: Der Platz im
     Fussbereich blieb also reserviert und darunter klaffte eine ebenso grosse Luecke.

     Wer den Block wieder anheben will, aendert diese eine Zahl — er verlaesst dann aber
     zwangslaeufig wieder seinen Kasten. */
  --blocks-y: 0;
  transform: translateY(calc(var(--cell, 120px) * var(--blocks-y)));
}

@media screen and (min-width: 990px) {
  cart-items.page-width,
  #main-cart-footer {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Tabellenkopf PRODUKT / ANZAHL / GESAMTSUMME */
.cart-items th {
  color: var(--brand-red);
  opacity: 0.6;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(var(--brand-red-rgb), 0.25);
}

/* Trennlinien zwischen den Produkten */
.cart-item {
  border-bottom: 1px solid rgba(var(--brand-red-rgb), 0.15);
}

/* Summenzeile */
.totals__total,
.totals__total-value {
  color: var(--brand-red);
}

.tax-note {
  color: var(--brand-red);
  opacity: 0.75;
}

/* Link «Weiter shoppen» */
.cart__login-title,
cart-items .underlined-link {
  color: var(--brand-red);
}

/* Checkout-Button — hover etwas dunkler */
.cart__checkout-button:hover {
  filter: brightness(0.85);
}
/* === Warenkorb: Titel zentriert === */
.cart__title,
cart-items .title--primary,
cart-items h1 {
  text-align: center;
  width: 100%;
}
/* === Warenkorb: Weiter-shoppen-Button unter Zur Kasse === */
.cart__ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart__ctas .cart__checkout-button,
.cart__ctas .cart__continue-button.button {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

.cart__continue-button.button {
  background: var(--brand-red);
  color: var(--brand-beige);
  text-align: center;
}

.cart__continue-button.button:hover {
  filter: brightness(0.85);
}
/* === Warenkorb: Tabellenkopf (Produkt/Anzahl/Gesamtsumme) ausblenden === */
.cart-items thead {
  display: none;
}
/* === Warenkorb: Bilder und Texte größer === */

/* Produktfoto */
.cart-item__image {
  width: 130px;
  max-width: 130px;
  height: auto;
}

@media screen and (min-width: 750px) {
  .cart-item__image-container {
    width: 130px;
  }
}

/* Produktname */
.cart-item__name {
  font-size: 1.8rem;
}

/* === Name und Varianten über die volle Breite der Detailspalte ===
   Dawn deckelt in component-cart-items.css JEDES direkte Kind der Zelle bei 30rem
   (.cart-item__details > *). Der Produktname brach dadurch früher um, als die Spalte
   es nötig gemacht hätte.

   Das <dl> muss mitgenannt werden: Die Varianten (.product-option) stecken darin, und
   solange die Liste selbst bei 30rem endet, hilft eine Breite an den Einträgen nichts.
   Drei Klassen im Selektor, weil component-cart-items.css nach base.css lädt —
   Dawns Regel hätte bei gleicher Spezifität gewonnen. */
.cart-item .cart-item__details .cart-item__name,
.cart-item .cart-item__details > dl,
.cart-item .cart-item__details .product-option {
  max-width: none;
}

/* Preis unter dem Namen und Varianten (Größen: 50 ml) */
.cart-item .product-option,
.cart-item__price-wrapper .price,
.cart-item__old-price {
  font-size: 1.5rem;
}

/* Preis rechts (Zeilensumme) */
.cart-item__totals .price {
  font-size: 1.8rem;
}

/* Preis pro Einheit (€/kg, €/l) */
.cart-item .unit-price {
  font-size: 1.2rem;
}

/* Mengenzähler − 1 + */
.cart-item .quantity__input {
  font-size: 1.6rem;
}
/* === Warenkorb: Foto+Info als ein Beige-Block === */

/* Ohne Abstände zwischen den Zeilen — durchgehende Fläche */
.cart-items table,
table.cart-items {
  border-collapse: separate;
  border-spacing: 0;
}

/* Beiger Hintergrund nur auf den Foto- und Beschreibungszellen */
.cart-item .cart-item__media,
.cart-item .cart-item__details {
  background: var(--brand-beige);
  border: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.cart-item .cart-item__media {
  padding-left: 2rem;
}

.cart-item .cart-item__details {
  padding-right: 2rem;
}

/* Abrundung: oben beim ersten Produkt, unten beim letzten */
.cart-item:first-child .cart-item__media {
  border-radius: 12px 0 0 0;
}

.cart-item:first-child .cart-item__details {
  border-radius: 0 12px 0 0;
}

.cart-item:last-child .cart-item__media {
  border-radius: 0 0 0 12px;
}

.cart-item:last-child .cart-item__details {
  border-radius: 0 0 12px 0;
}
/* === Warenkorb: Abstand unter Titel + schmalerer Beige-Block === */

/* Abstand zwischen dem Titel und dem Produktblock */
.title-wrapper-with-link {
  margin-bottom: 4rem;
}

/* Fläche schmaler machen: die Beschreibungsspalte dehnt sich nicht über die volle Breite */
.cart-item .cart-item__details {
  width: 50rem;
  max-width: 50rem;
}

/* Fotospalte — fest */
.cart-item .cart-item__media {
  width: 16rem;
}
/* === Warenkorb: Anzahl+Preis als ein Beige-Block === */

/* Beiger Hintergrund auf den Mengen- und Summenzellen */
.cart-item .cart-item__quantity,
.cart-item .cart-item__totals {
  background: var(--brand-beige);
  border: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Mengenspalte schmaler machen — entfernt die Lücke bis zum Preis */
.cart-item .cart-item__quantity {
  width: 18rem;
  padding-left: 2rem;
}

.cart-item .cart-item__totals {
  padding-right: 2rem;
}

/* Abrundung: oben beim ersten Produkt, unten beim letzten */
.cart-item:first-child .cart-item__quantity {
  border-radius: 12px 0 0 0;
}

.cart-item:first-child .cart-item__totals {
  border-radius: 0 12px 0 0;
}

.cart-item:last-child .cart-item__quantity {
  border-radius: 0 0 0 12px;
}

.cart-item:last-child .cart-item__totals {
  border-radius: 0 0 12px 0;
}
/* === Warenkorb: Preis direkt neben Anzahl === */
.cart-item .cart-item__totals {
  text-align: left;
}

.cart-item__totals .cart-item__price-wrapper,
.cart-item__totals .price,
.cart-item__totals .unit-price {
  text-align: left;
  justify-content: flex-start;
}
/* === Warenkorb: Rückfrage zu nicht lieferbaren Artikeln ===
   Füllt die linke, sonst leere Hälfte des Fußbereichs. Dawn legt .cart__footer als
   Flex-Zeile mit justify-content: space-between an — dieser Block ist das erste Kind
   und sitzt damit links, der Summenblock rechts.

   Die Breite muss gesetzt werden, weil Dawn beiden Spalten pauschal 35rem gibt
   (.cart__footer > *); die Antworttexte sind dafür zu lang. */
.cart__footer > .cart-fallback {
  /* REGLER Breite der Frage-Spalte. */
  width: 46rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--brand-red);
}

/* === Roter Schein bei fehlender Auswahl ===
   Als weicher Lichtsaum um die Buchstaben, nicht als Fläche dahinter: ein stark
   weichgezeichneter text-shadow ohne Versatz, der die Schrift ringsum umgibt.

   text-shadow VERERBT sich — deshalb steht die Animation auf der Gruppe selbst und
   erfasst Frage, Antworten, Beschriftungen und Meldung in einem Zug, ohne dass jedes
   Element einzeln genannt werden muss.

   Animiert wird der Schatten direkt (nicht die Deckkraft eines Elements): Nur so bleibt
   die Schrift währenddessen unverändert lesbar und ausschließlich der Saum klingt aus.

   Zwei Regler:
     --glow-blur      wie weich der Saum ausläuft (größer = diffuser)
     --glow-strength  wie kräftig er leuchtet (kleiner = heller und zurückhaltender)

   Der Schatten liegt in ZWEI Lagen übereinander: eine weite für den diffusen Schein und
   eine halb so weite, die den Saum direkt an der Schrift verdichtet. Eine einzelne Lage
   wird bei hoher Deckkraft nicht kräftiger, sondern nur größer und matschig — die zweite
   Lage bringt die Intensität, ohne die weiche Außenkante zu verlieren.
   Ihre Dichte hängt an --glow-core, damit sich beide Lagen getrennt einstellen lassen. */
.cart-fallback {
  /* Gelb E9D033 — dasselbe Gelb wie im Fusszeilen-Hover und am Header-Balken.
     Als RGB-Tripel, weil rgba() im Keyframe daraus die Deckkraft mischt. */
  --glow-rgb: 233, 208, 51;
  --glow-blur: 22px;
  /* Kraeftiger als zuvor (war 0.9 / 0.35): Gelb auf beigem Grund hat weniger Kontrast
     als das vorherige Rot und braucht mehr Dichte, um gleich stark zu wirken. */
  --glow-strength: 1;
  /* REGLER Dichte der inneren Lage, als Anteil der äußeren. Sie bestimmt, wie satt der
     Saum direkt an der Schrift wirkt. 0 = nur der weiche Außenschein. */
  --glow-core: 0.7;
  /* REGLER Anfahrzeit. Der Schein verloescht NICHT mehr von selbst — diese Zeit ist nur
     noch das Aufblenden. */
  --glow-duration: 0.45s;
}

/* forwards haelt den Endzustand fest: Nach dem Aufblenden bleibt der Schein stehen, bis
   assets/cart-delivery-choice.js die Klasse bei der Auswahl entfernt. */
.cart-fallback.is-glowing {
  animation: cart-fallback-glow-halten var(--glow-duration) ease-out forwards;
}

/* Die Farbe steht als --glow-rgb am Element. Ohne Angabe bleibt es beim Markenrot —
   der Reisbalken benutzt dieselben Keyframes und aendert sich dadurch nicht. */
@keyframes cart-fallback-glow {
  0% {
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0);
  }
  7% {    /* zügig an — er soll auffallen */
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), var(--glow-strength)),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), calc(var(--glow-core) * var(--glow-strength)));
  }
  28% {   /* kurz stehen bleiben */
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), var(--glow-strength)),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), calc(var(--glow-core) * var(--glow-strength)));
  }
  100% {  /* und lange, gleichmäßig verlöschen */
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0);
  }
}

/* Zweite Fassung fuer die Lieferbarkeitsfrage: Sie faehrt nur HOCH und bleibt dann stehen.
   Ausgeschaltet wird sie nicht von der Zeit, sondern vom Klick auf eine der Optionen
   (assets/cart-delivery-choice.js nimmt dort die Klasse weg). Deshalb gibt es kein
   Verloeschen im Ablauf — solange nichts gewaehlt ist, leuchtet es. */
@keyframes cart-fallback-glow-halten {
  0% {
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), 0);
  }
  100% {
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), var(--glow-strength)),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), calc(var(--glow-core) * var(--glow-strength)));
  }
}

/* Das Eingabefeld nimmt den geerbten Saum nicht mit — dort soll die eingetippte
   Telefonnummer scharf bleiben. */
.cart-fallback.is-glowing .field__input {
  text-shadow: none;
}

/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt den Saum
   dauerhaft und leise statt pulsierend — die Information geht nicht verloren. */
@media (prefers-reduced-motion: reduce) {
  .cart-fallback.is-glowing {
    animation: none;
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), var(--glow-strength)),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), calc(var(--glow-core) * var(--glow-strength)));
  }
}

/* Eigene Fehlermeldung unter den Optionen. */
.cart-fallback__error {
  margin: 1.4rem 0 0;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-red);
}
.cart-fallback__error[hidden] {
  display: none;
}

.cart-fallback__question {
  font-family: 'Roboto Slab', var(--font-heading-family), serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.35;
  padding: 0;
  margin-bottom: 1.6rem;
}

.cart-fallback__option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  line-height: 1.4;
  cursor: pointer;
}

/* Eigene Optik statt des Systemknöpfchens — passend zur Marke.
   accent-color färbt den Punkt, ohne das Element nachbauen zu müssen; das erhält
   die Bedienbarkeit per Tastatur und die Vorlesbarkeit. */
.cart-fallback__option input[type='radio'] {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0.2rem 0 0;
  accent-color: var(--brand-red);
  cursor: pointer;
}

.cart-fallback__phone {
  margin: 0.4rem 0 0 2.7rem;   /* auf Höhe des Textes der zweiten Option eingerückt */
}
.cart-fallback__phone[hidden] {
  display: none;
}
.cart-fallback__phone-label {
  display: block;
  font-size: 1.3rem;
  opacity: 0.75;
  margin-bottom: 0.4rem;
}
.cart-fallback__phone .field__input {
  width: 100%;
  max-width: 26rem;
  padding: 0.9rem 1.2rem;
  font-size: 1.5rem;
  color: var(--brand-red);
  background: #fff;
  border: 1px solid rgba(var(--brand-red-rgb), 0.4);
  border-radius: 6px;
}
.cart-fallback__phone .field__input:focus {
  outline: 2px solid var(--brand-red);
  outline-offset: 1px;
}

@media screen and (max-width: 749px) {
  .cart__footer > .cart-fallback {
    width: 100%;
    margin-bottom: 3rem;
  }
}

/* === Warenkorb: Zwischensumme-Block als Beige-Karte === */
.cart__footer .cart__blocks {
  background: var(--brand-beige);
  border-radius: 12px;
  padding: 3rem;
}
/* === Warenkorb: Minus bleibt bei Menge 1 bedienbar ===
   Dawn setzt dem Minus-Knopf bei erreichtem Minimum die Klasse .disabled (halbtransparent,
   Cursor „nicht erlaubt“). Im Warenkorb löscht der Knopf dort jetzt die Position
   (assets/cart-minus-removes.js) — er soll deshalb normal bedienbar aussehen. */
.cart-item .quantity__button[name='minus'].disabled {
  cursor: pointer;
  opacity: 1;
}

/* === Header: Bestellwert und Hinweis rechts vom Warenkorb-Symbol ===
   Markup in sections/header.liquid, nachgeführt von assets/header-cart-bar.js.

   Reihenfolge nach rechts: Symbolleiste → Bestellwert/Hinweis (zweizeilig) → Balken.

   Wie der Balken AUS DEM FLUSS genommen. Das ist zwingend und nicht Geschmackssache:
   Die Symbolleiste ist im Layout „top-center“ an ihrer RECHTEN Kante verankert. Ein
   Element im normalen Fluss verbreitert sie, und weil rechts festgehalten wird, wandern
   sämtliche Symbole nach links ins Menü hinein.

   REGLER — alle auf .header__icons, weil mehrere Elemente sie brauchen:
     --hct-abstand   Luft zwischen Warenkorb-Symbol und Bestellwert
     --hct-luecke    Luft zwischen Bestellwert und Balken
     --hct-zone      wie weit das Leuchten nach rechts reicht

   Eine feste Platzreserve für den Bestellwert gibt es nicht mehr: Seit beide in einer
   gemeinsamen Flex-Zeile stehen, richtet sich der Balken nach der tatsächlichen Breite
   des Betrags und rückt bei einer Stelle mehr von selbst weiter nach rechts. */
.header__icons {
  --hct-abstand: 1.2rem;
  --hct-luecke: 1.2rem;
  --hct-zone: 24rem;

  /* Eigener Stapel. Urspruenglich noetig, damit der gelbe Schein mit z-index: -1 INNERHALB
     blieb und nicht hinter den Hintergrund des Kopfbereichs rutschte. Der Schein ist
     inzwischen durch das kurze Aufblinken ersetzt, das ohne z-index auskommt — die Zeile
     bleibt trotzdem stehen: Sie kapselt den ganzen Warenkorbbereich als eigene Ebene ab,
     sodass kein z-index von hier drinnen je mit dem Rest der Seite konkurrieren kann.
     Dieselbe Absicherung wie beim Kachel-Raster (.product-grid weiter oben). */
  isolation: isolate;
}

/* Der gemeinsame Kasten: Bestellwert links, Hinweis mit Balken rechts daneben.
   Nur DIESER Kasten haengt aus dem Fluss — seine beiden Kinder stehen darin normal
   nebeneinander. Dadurch folgt der Balken der tatsächlichen Breite des Bestellwerts:
   ein längerer Betrag schiebt ihn von selbst weiter nach rechts.

   REGLER:
     --hct-abstand   Luft zwischen Warenkorb-Symbol und Bestellwert
     --hct-luecke    Luft zwischen Bestellwert und Balken */
.header-cart-zone {
  position: absolute;
  left: calc(100% + var(--hct-abstand));
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: var(--hct-luecke);
  pointer-events: none;   /* rein informativ — soll keine Klicks abfangen */
}

.header-cart-total {
  flex: 0 0 auto;
  line-height: 1.25;
  color: currentColor;
  white-space: nowrap;   /* der Betrag bestimmt die Breite und bricht nie um */
}

/* Der Bestellwert orientiert sich an der Summe im Warenkorb (.totals__total-value):
   dieselbe Schreibweise mit vorangestelltem Zeichen und dieselbe Betonung. */
.header-cart-total__value {
  font-size: 1.4rem;
  font-weight: 700;
  white-space: nowrap;   /* der Betrag soll nie umbrechen */
}

/* Der Balken steht IM gemeinsamen Kasten und braucht seine eigene absolute Lage nicht
   mehr — die Flex-Zeile setzt ihn hinter den Bestellwert. Genau das macht die
   Verschiebung abhängig vom Betrag: keine geratene Reservebreite mehr, kein Überlappen.

   REGLER --hcb-versatz: zusätzliche Feinverschiebung nach rechts, in RASTERZELLEN —
   dieselbe Einheit wie überall sonst im Theme. --cell setzt grid-background.js am
   Dokument, der Wert steht also auch im Kopfbereich zur Verfügung; der Ersatzwert
   greift nur, falls das Skript einmal nicht läuft. Negativ = nach links. */
.header-cart-zone .header-cart-bar {
  --hcb-versatz: 0;
  position: static;
  transform: none;
  flex: 0 0 auto;
  margin-left: calc(var(--cell, 120px) * var(--hcb-versatz));
}

/* Leerer Warenkorb: ausblenden statt „Bestellwert: €0,00“ auf jeder Seite zu zeigen.
   Nur unsichtbar, nicht entfernt — beim ersten hineingelegten Artikel taucht er dadurch
   ohne Neuladen wieder auf, genau wie der Balken daneben. */
.header-cart-total.is-empty {
  display: none;
}
/* Ist nichts im Warenkorb, verschwinden beide Teile — dann bleibt kein leerer Kasten
   mit Zwischenraum stehen. */
.header-cart-zone:has(.header-cart-total.is-empty) {
  gap: 0;
}

/* === Header: kurzes gelbes Aufblinken beim Hinzufügen ===
   Ersetzt das frühere Popup und den davor hier stehenden gelben Schein. Der Schein lag
   als weichgezeichnetes Pseudo-Element hinter dem ganzen Bereich und klang über 1,6s aus;
   er ist samt seiner Regler --hcg-farbe/-dauer/-weich und der Bildfolge header-cart-glow
   vollständig entfernt.

   Stattdessen blinken zwei konkrete Dinge kurz auf:
     der Bestellwert          bekommt einen gelben Kasten
     die Zahl am Warenkorb    wird gelb mit roter Ziffer

   ── Warum Klasse statt Animation ────────────────────────────────────────────────────
   Die Ziffer in der Blase wird weiter unten mit !important beige gefärbt (die Farbregel
   der unteren Kopfreihe färbt mit .header__icons * ALLES rot, dagegen hält dort eine
   Regel mit !important). Laut Kaskade schlägt eine wichtige Deklaration des Autors JEDE
   Animation — eine @keyframes-Regel käme an dieser Farbe also nie vorbei. Eine Klasse
   dagegen kann mit höherer Spezifität und ebenfalls !important dagegenhalten.

   Die Klasse setzt und entfernt assets/header-cart-bar.js mit 300 ms Abstand. Das Gelb
   erscheint OHNE Übergang — im Bild des Klicks — und blendet nach 300 ms über
   --hcf-tempo aus. Nach rund 0,4s ist es weg.

   REGLER: --hcf-gelb, --hcf-rot, --hcf-tempo hier; --hcf-polster-x/-y (Grösse des
   gelben Kastens) an .header-cart-total.
   Die DAUER steht nicht hier, sondern als 300 im Skript — sie ist ein Zeitgeber, keine
   CSS-Eigenschaft. --hcf-tempo gilt nur für das Ausblenden und kommt zur Dauer HINZU:
   bei 500ms und 0,1s ist nach rund 0,6s alles vorbei.

   Alle drei Flächen — gelber Kasten, Grund der Blase, Ziffer darin — tragen dasselbe
   --hcf-tempo und werden von derselben Klasse geschaltet. Dadurch beginnen und enden sie
   im selben Bild. Wer eine davon abweichend einstellt, bricht genau diesen Gleichlauf. */
.header__icons {
  --hcf-gelb: #e9d033;
  --hcf-rot: var(--brand-red, #99220a);
  /* --hcf-kasten gab es hier früher für den Schattenring; seine Aufgabe haben
     --hcf-polster-x/-y an .header-cart-total übernommen. */
  --hcf-tempo: 0.1s;   /* war 0.15s — mitverkürzt, siehe Hinweis oben */
}

/* Der gelbe Kasten um den Bestellwert — EINE einzige gemalte Fläche.

   VORHER stand hier Füllung plus gleichfarbiger box-shadow-Ring. Das waren zwei getrennt
   gemalte Teile, die der Browser während des Übergangs unabhängig voneinander aufbaut:
   Der Schatten liegt AUSSERHALB der Rahmenbox und wird gegen sie ausgespart, die Füllung
   liegt darin. Beim Ineinanderlaufen zweier Halbtransparenzen an dieser Kante blitzte
   dazwischen ein Spalt auf — innen der Kasten, aussen ein Rahmen, dazwischen nichts.

   JETZT ist es nur noch der Hintergrund. Damit er über den Text hinausreicht, bekommt das
   Element ein Polster — und einen negativen Rand von genau derselben Grösse, der es
   wieder aufhebt. Die äussere Box (die Randbox, nach der Flexbox misst) bleibt dadurch
   exakt so gross wie vorher: Der Balken daneben rückt keinen Pixel, obwohl der Kasten
   nach aussen wächst. Genau deshalb hatte ich ursprünglich zum Schatten gegriffen; der
   Trick mit dem aufgehobenen Polster leistet dasselbe, ohne die Flaeche zu zerteilen.

   REGLER --hcf-polster-x/-y: wie weit der Kasten über den Betrag hinausgeht. */
.header-cart-total {
  --hcf-polster-x: 0.6rem;
  --hcf-polster-y: 0.3rem;
  padding: var(--hcf-polster-y) var(--hcf-polster-x);
  margin: calc(var(--hcf-polster-y) * -1) calc(var(--hcf-polster-x) * -1);
  border-radius: 2px;
  background-color: transparent;
  /* Gilt nur für den RÜCKWEG — siehe die Regel darunter. */
  transition: background-color var(--hcf-tempo) ease;
}

/* SOFORT da, ohne Übergang: transition: none steht im Zielzustand und gilt deshalb beim
   HINWEG. Der Rückweg nimmt die Transition aus der Regel darüber, blendet also weich aus.

   Das ist zugleich die Lösung für den Gleichlauf mit der Zahl am Warenkorb-Symbol:
   product-form.js veroeffentlicht cartUpdate (wo diese Klasse gesetzt wird) und tauscht
   ERST DANACH die Sektion mit der Zahl aus. Die neue Blase erscheint also bereits mit
   gesetzter Klasse — ein frisch eingefügtes Element hat keinen Ausgangszustand und
   springt ohne Übergang sofort auf Gelb, während der Bestellwert noch einblendete. Genau
   das sah man als Versatz. Blendet gar nichts mehr ein, kann auch nichts auseinander
   laufen: Beide sind im ersten Bild gelb. Der Rückweg läuft synchron, weil dann beide
   Elemente längst dastehen. */
.header__icons.is-cart-flash .header-cart-total {
  background-color: var(--hcf-gelb);
  transition: none;
}

/* Die Zahl am Warenkorb-Symbol. Der Grund bleibt ohne !important — dort steht keine
   wichtige Deklaration im Weg.

   Die ZIFFER steckt in einem eigenen <span aria-hidden> und braucht die Transition
   deshalb ausdrücklich noch einmal: Sie erbt sie nicht. Ohne diese Zeile sprang die
   Ziffer beim Abräumen sofort auf Beige zurück, während der gelbe Grund unter ihr noch
   0,1s lang ausblendete — für einen Moment stand also Beige auf Gelb, und das Ende wirkte
   unsauber. Jetzt gehen Grund, Rahmen und Ziffer gemeinsam zurück. */
.cart-count-bubble,
.cart-count-bubble span[aria-hidden] {
  transition:
    background-color var(--hcf-tempo) ease,
    border-color var(--hcf-tempo) ease,
    color var(--hcf-tempo) ease;
}

/* Wie beim Bestellwert: ohne Übergang hin, mit Übergang zurück — fuer beide Ebenen,
   damit auch der Hinweg geschlossen bleibt. */
.header__icons.is-cart-flash .cart-count-bubble,
.header__icons.is-cart-flash .cart-count-bubble span[aria-hidden] {
  transition: none;
}
.header__icons.is-cart-flash .cart-count-bubble {
  background-color: var(--hcf-gelb);
  border-color: var(--hcf-gelb);
}

/* Die Ziffer darin. Diese Regel MUSS !important tragen und fünf Klassen tief sein:
   Die Regel weiter unten färbt sie mit vier Klassen und !important beige. Bei zwei
   wichtigen Deklarationen entscheidet die Spezifität — hier 0,5,0 gegen 0,4,0. */
.header.header--top-center > .header__icons.is-cart-flash .cart-count-bubble,
.header.header--top-center > .header__icons.is-cart-flash .cart-count-bubble * {
  color: var(--hcf-rot) !important;
}

/* Wer Bewegung reduziert haben möchte, bekommt den Farbwechsel ohne Übergang — aber
   sehr wohl den Wechsel selbst: Er ist die Rückmeldung, dass etwas im Warenkorb gelandet
   ist, und darf nicht ersatzlos entfallen. */
@media (prefers-reduced-motion: reduce) {
  .header-cart-total,
  .cart-count-bubble,
  .cart-count-bubble span[aria-hidden] {
    transition: none;
  }
}

/* === Warenkorb-Popup ===
   Sichtbar entfernt. Bewusst nur ausgeblendet und NICHT aus sections/header.liquid
   gelöscht: product-form.js prüft mit
       else if (!this.cart) { window.location = window.routes.cart_url; }
   ob es ein Popup oder eine Schublade gibt — fehlt beides, springt der Shop bei JEDEM
   Hinzufügen auf die Warenkorbseite. So bleibt der Ablauf heil, und Dawn aktualisiert
   über dieses Element weiterhin den Zähler am Warenkorb-Symbol.
   An seine Stelle tritt das gelbe Leuchten oben. */
cart-notification {
  display: none !important;
}

@media screen and (max-width: 989px) {
  /* Auf schmalen Bildschirmen ist im Kopf kein Platz dafür; der Balken daneben
     verschwindet dort aus demselben Grund. */
  .header-cart-total {
    display: none;
  }
}

/* === Header: kleiner Fortschrittsbalken neben dem Warenkorb-Symbol ===
   Dieselben zwei Schwellen wie der Reisbalken im Warenkorb, nur auf wenigen Pixeln.
   Markup in sections/header.liquid, Logik in assets/header-cart-bar.js, die Beträge in
   snippets/cart-schwellen.liquid.

   REGLER — hier ändern, nicht im Skript:
     --hcb-breite / --hcb-hoehe   Maße des Balkens
     --hcb-abstand                Luft zwischen Warenkorb-Symbol und Balken
     --hcb-rot/-gelb/-gruen       die drei Zustandsfarben */
.header-cart-bar {
  --hcb-breite: 5rem;
  --hcb-hoehe: 0.9rem;
  --hcb-abstand: 1rem;
  --hcb-textbreite: 14rem;
  --hcb-rot: var(--brand-red);
  --hcb-gelb: #E9D033;
  --hcb-gruen: #7B8552;

  /* Aus dem Fluss genommen und rechts neben die Symbolleiste gehängt.
     Der Grund steht ausführlich im Kommentar in sections/header.liquid: Die Leiste ist
     im Layout „top-center“ an ihrer RECHTEN Kante verankert. Ein Element im normalen
     Fluss würde sie verbreitern, und weil rechts festgehalten wird, wanderten sämtliche
     Symbole nach links ins Menü hinein. So bleibt jedes Symbol auf den Pixel stehen. */
  position: absolute;
  left: calc(100% + var(--hcb-abstand));
  top: 50%;
  transform: translateY(-50%);

  /* Hinweis OBEN, Fortschritt darunter. align-items: stretch sorgt dafür, dass der
     Balken die volle Breite des Blocks einnimmt — er ist damit genau so lang, wie der
     Hinweistext maximal breit werden kann (--hcb-textbreite). */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: var(--hcb-textbreite);
  pointer-events: none;   /* rein informativ — soll keine Klicks abfangen */
}

/* Bezugspunkt für das absolut positionierte Kind. Im Layout „top-center“ ist die Leiste
   ohnehin absolut positioniert und damit schon Bezugspunkt; diese Zeile trägt die
   Platzierung in die übrigen Logo-Anordnungen mit, falls dort einmal umgestellt wird. */
.header__icons {
  position: relative;
}

/* Leerer Warenkorb: kein Hinweis. Ausgeblendet statt entfernt, damit der Balken beim
   ersten hineingelegten Artikel ohne Neuladen erscheinen kann. */
.header-cart-bar.is-empty {
  display: none;
}

.header-cart-bar__track {
  display: block;
  flex: 0 0 auto;
  /* Volle Blockbreite statt eigener Breite — so lang wie der Hinweis darüber. */
  width: 100%;
  height: var(--hcb-hoehe);
  background: rgba(var(--brand-red-rgb), 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.header-cart-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hcb-rot);
  transition: width 0.25s ease-out, background-color 0.25s ease-out;
}

/* Die drei Zustände. Welcher gilt, setzt das Skript als data-stufe — aus derselben
   Funktion, die auch den Satz daneben bestimmt (assets/cart-hinweis.js). Farbe und
   Wortlaut können dadurch nicht auseinanderfallen. */
.header-cart-bar[data-stufe='versand'] .header-cart-bar__fill {
  background: var(--hcb-gelb);
}
/* === Warnung: Artikel würde den Höchstbestellwert reißen ===
   Kurz rot, dann langsam zurück. Umgesetzt als Überblendung der Hintergrundfarbe und
   nicht als Farbwechsel per Klasse: So kehrt der Balken von selbst in seine normale
   Farbe zurück, ohne dass das auslösende Skript die aktuelle Stufe kennen muss.
   REGLER --hcb-warn-dauer. */
.header-cart-bar {
  --hcb-warn-dauer: 2.2s;
}
.header-cart-bar.is-max-warnung .header-cart-bar__fill {
  animation: hcb-max-warnung var(--hcb-warn-dauer) ease-out;
}
@keyframes hcb-max-warnung {
  0% { background-color: var(--hcb-rot); }
  25% { background-color: var(--hcb-rot); }   /* kurz stehen bleiben */
  100% { background-color: var(--hcb-gruen); }
}
@media (prefers-reduced-motion: reduce) {
  .header-cart-bar.is-max-warnung .header-cart-bar__fill {
    animation: none;
  }
}

/* Hoechstbestellwert erreicht: voll und rot. Die Aussage ist eine andere als bei allen
   anderen Stufen — hier geht es nicht mehr weiter, statt dass noch etwas fehlt. */
.header-cart-bar[data-stufe='max'] .header-cart-bar__fill {
  background: var(--hcb-rot);
}

.header-cart-bar[data-stufe='frei'] .header-cart-bar__fill {
  background: var(--hcb-gruen);
}

/* Feste Breite und Umbruch auf zwei Zeilen — NICHT aus Geschmack, sondern weil die
   Gesamtbreite sonst vom Satz abhinge und der Kasten unberechenbar wuerde.

   Nachgemessen: In einer Zeile ist der laengste Satz („Noch 17,50 € bis zum
   Mindestbestellwert“) rund 190px breit. Zusammen mit Balken und Luft ergibt das mehr,
   als zwischen der Symbolleiste und dem rechten Rand frei ist — bei 1100, 1200 und
   1280px Fensterbreite lief der Satz sichtbar ueber die Kante hinaus, erst ab etwa
   1366px passte er. Mit fester Textbreite steht die Gesamtbreite dagegen bei jedem
   Fenster fest (Balken + Luft + --hcb-textbreite) und bleibt innerhalb der freien
   Flaeche. Der Wortlaut bleibt dabei unveraendert derselbe wie im Warenkorb. */
/* Der Hinweissatz steht seit der Umstellung im Textblock neben dem Symbol und nicht mehr
   im Balken. Die Breite gibt der Balkenblock vor (--hcb-textbreite), der Satz bricht
   darin um. */
.header-cart-bar__text {
  width: auto;
  font-size: 1.15rem;
  line-height: 1.2;
  white-space: normal;
  opacity: 0.85;
}
/* Erreicht und unter dem Mindestbestellwert treten hervor — dazwischen ist der Hinweis
   nur eine Auskunft, an den beiden Enden eine Aussage. Gleiche Abstufung wie im
   Warenkorb (.cart-rice.is-below-min / .is-free). */
/* Die Betonung hängt jetzt am Textblock statt am Balken: Beide sind Geschwister, ein
   Nachfahren-Selektor vom Balken aus erreicht den Satz nicht mehr. Das Skript setzt
   data-stufe deshalb auf beiden. */
.header-cart-bar[data-stufe='min'] .header-cart-bar__text,
.header-cart-bar[data-stufe='frei'] .header-cart-bar__text,
.header-cart-bar[data-stufe='max'] .header-cart-bar__text {
  font-weight: 700;
}
/* Beim Hoechstbestellwert zusaetzlich in Rot — er ist kein Fortschritt, sondern eine
   Grenze. */
.header-cart-bar[data-stufe='max'] .header-cart-bar__text {
  color: var(--hcb-rot);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .header-cart-bar__fill {
    transition: none;
  }
}

/* Unter 1100px greift die absolute Kopfzeilen-Anordnung nicht mehr (siehe den großen
   Block weiter oben) und der Platz neben den Symbolen fehlt. Der Hinweis entfällt dort;
   im Warenkorb selbst steht er weiterhin, dort in voller Größe. */
@media screen and (max-width: 1099px) {
  .header-cart-bar {
    display: none;
  }
}

/* === Warenkorb: Fortschrittsbalken aus Reiskörnern ===
   Ersetzt den früheren Textzeilen-Hinweis „Mindestbestellwert: 30 € — es fehlen noch …“
   und zeigt beide Schwellen auf einer Skala. Gezeichnet wird auf ein Canvas
   (assets/cart-rice-bar.js), die Beträge stehen als data-Attribute im Markup. */
/* Hülle um Reisbalken und Fußbereich — dient allein als Sperrfläche fürs Raster.
   Polster und negativer Rand heben sich auf, der Inhalt bleibt also exakt stehen; nur das
   Rechteck wird größer.

   REGLER --zone-up: wie weit der Kasten nach OBEN über den Reisbalken hinausreicht.

   Der Wert ist bewusst so groß, dass die Hülle die Positionsliste ÜBERLAPPT statt nur bis
   an sie heranzureichen. Grund: Die waagerechten Rasterlinien hängen am Dokument, die
   Kästen aber verschieben sich mit der Artikelzahl — eine Warenkorbzeile ist rund 110px
   hoch, eine Rasterzelle 90px. Bei jeder Artikelzahl liegen die Linien deshalb anders zu
   den Kästen. Bliebe zwischen Positionsliste und Balken eine Lücke, fände eine Linie sie
   frueher oder spaeter — bei zwei Artikeln war das der Fall, bei einem und drei nicht.
   Ohne Lücke kann das nicht mehr passieren, unabhängig von der Artikelzahl. */
.cart-zone {
  --zone-up: 6rem;
  padding-top: var(--zone-up);
  margin-top: calc(var(--zone-up) * -1);
}

.cart-rice {
  margin: 0 0 3rem;
  color: var(--brand-red);

  /* Gleiche Regler wie bei der Lieferbarkeitsfrage — der Schein soll an beiden Stellen
     identisch aussehen. Die Keyframes werden mitbenutzt, statt sie ein zweites Mal zu
     schreiben; die Farbe kommt ueber --glow-rgb hinein. */
  --glow-rgb: 233, 208, 51;   /* E9D033 */
  --glow-blur: 22px;
  --glow-strength: 1;
  --glow-core: 0.7;
  /* Nur noch die Anfahrzeit — der Schein verloescht nicht mehr von selbst. */
  --glow-duration: 0.45s;
}

/* Gelber Schein auf dem Hinweis, wenn unter dem Mindestbestellwert zur Kasse gegangen
   werden soll. Bewusst nur auf der Statuszeile und nicht auf dem ganzen Balken: Dort
   steht der Grund, und die Reiskörner sind ein Canvas, das kein text-shadow annimmt.

   Die haltende Fassung der Keyframes: Der Schein faehrt hoch und bleibt stehen. Beendet
   wird er nicht von der Zeit, sondern erst, wenn der Mindestbestellwert erreicht ist —
   assets/cart-rice-bar.js nimmt die Klasse dann in render() weg. */
.cart-rice.is-glowing .cart-rice__status {
  animation: cart-fallback-glow-halten var(--glow-duration) ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .cart-rice.is-glowing .cart-rice__status {
    animation: none;
    text-shadow:
      0 0 var(--glow-blur) rgba(var(--glow-rgb, var(--brand-red-rgb)), var(--glow-strength)),
      0 0 calc(var(--glow-blur) / 2) rgba(var(--glow-rgb, var(--brand-red-rgb)), calc(var(--glow-core) * var(--glow-strength)));
  }
}

.cart-rice__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.cart-rice__status {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
/* Solange der Mindestbestellwert nicht erreicht ist, tritt der Hinweis stärker hervor —
   dort hängt die Bestellung, nicht am Versand. */
.cart-rice.is-below-min .cart-rice__status {
  font-weight: 700;
}
.cart-rice.is-free .cart-rice__status {
  font-weight: 700;
}

.cart-rice__total {
  font-size: 1.6rem;
  font-weight: 700;
}

/* Die Rinne, in der die Körner liegen. Feste Höhe, weil das Canvas mit 52px
   gezeichnet wird (BAR_HEIGHT im Skript). */
.cart-rice__track {
  position: relative;
  height: 52px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(var(--brand-red-rgb), 0.3);
  border-radius: 4px;
}
.cart-rice__track canvas {
  display: block;
  height: 52px;
}

/* Marke für den Mindestbestellwert. Ihre Lage setzt das Skript in Prozent, damit sie
   auch bei geänderten Beträgen von selbst an der richtigen Stelle sitzt. */
.cart-rice__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-red);
  opacity: 0.55;
  pointer-events: none;
}
.cart-rice__mark.is-reached {
  opacity: 0.25;   /* erreicht: tritt zurück, statt zu verschwinden */
}
.cart-rice__mark[hidden] {
  display: none;
}
/* Die Marke für versandkostenfrei nur dort, wo es auch einen Höchstbestellwert gibt —
   sie unterscheidet sich von der Mindestbestellwert-Marke durch die Strichelung, damit
   auf einen Blick klar ist, dass es zwei verschiedene Grenzen sind. */
.cart-rice__mark--free {
  width: 0;
  border-left: 2px dashed var(--brand-red);
}

/* Höchstbestellwert erreicht: Der Hinweis wird zur Grenze statt zum Fortschritt. */
.cart-rice.is-max .cart-rice__status {
  font-weight: 700;
  color: var(--brand-red);
}

.cart-rice__scale {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 1.2rem;
  opacity: 0.75;
}

@media screen and (max-width: 749px) {
  .cart-rice__scale {
    flex-direction: column;
    gap: 0.2rem;
  }
}
/* === Warenkorb: Trennlinie zwischen Artikeln und Footer entfernen === */
.cart-items td,
.cart-items th,
.cart-item,
.cart-items tbody,
.cart-items {
  border: none;
}

.cart__footer,
.cart__footer > div {
  border-top: none;
}

/* ============================================================================
   [B15] · BLOG
   ------------------------------------------------------------------------
   Layout und Gestaltung des Blog-Index liegen vollständig in
   assets/blog-neues.css (Rasterlayout in Zellen).

   Hier stand früher:
       @media (min-width: 750px) { .blog-main .blog-grid {
         background: var(--brand-beige); padding: 5rem 6rem; } }
   Ein deckender beiger Block über der ganzen Inhaltsspalte — ein Rest des alten
   Blog-Designs. Er lag ÜBER dem Rasterhintergrund (grid-background.js zeichnet auf
   ein Canvas mit z-index: -1) und hat ihn dort vollständig verdeckt. Weil der Block
   dieselbe Farbe wie die Seite hatte, sah das aus wie ein harter Rasterschnitt.
   Sein Polster (6rem) schob außerdem die Kacheln aus der Rasterspalte.
   Beides ist mit dem Rasterlayout unvereinbar und deshalb entfernt — das Raster
   wird jetzt nur noch von .blog-card__media und .blog-card__title weich geschnitten
   (siehe BLOCKING_SELECTORS in grid-background.js).
   ============================================================================ */