/* ==========================================================================
   Fonts — self-hosted.
   Loading these from Google is not an option: the shop's consent manager
   classifies fonts.googleapis.com as a marketing service and blocks the
   stylesheet until consent, so the page would render in a fallback face for
   most visitors. Latin + latin-ext subsets only.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/dm-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/dm-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/wp-content/themes/farmula-redesign/assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Farmula webshop — design tokens extracted from Figma "Home" (235:15)
   ========================================================================== */

:root {
  /* colors — names follow the Figma color styles */
  --blue: #29265d;          /* headings, dark buttons, footer bg */
  --green: #00a687;         /* CTAs, highlights */
  --dark-grey: #3b3a47;     /* body copy */
  --light-grey: #b8b7cc;    /* category labels, old prices, placeholders */
  --grey: #87869a;          /* search placeholder, tax note */
  --red: #fb1b13;           /* remove-from-cart */
  --light-blue: #efecf9;    /* borders, menu bar, section backgrounds */
  --sea-blue: #373476;      /* footer bottom bar */
  --divider: #e1def3;       /* FAQ separators */
  --tag: #bfd968;           /* NEU tag */
  --tag-text: #222424;

  /* type */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* layout */
  --page-width: 1728px;
  --page-margin: 99px;

  /* effects */
  --shadow-card: 0 4px 20px rgba(34, 36, 36, 0.04), 0 2px 2px rgba(34, 36, 36, 0.04);
  --radius-card: 24px;
  --radius-btn: 4px;
}

html, body { margin: 0; padding: 0; }
/* the reset is scoped to the design canvas so it cannot reach WordPress chrome
   (admin bar, plugin markup) that lives outside .page */
.page, .page *, .page *::before, .page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* .page carries the fixed design canvas, so the same stylesheet works standalone
   and inside a WordPress template that owns <body>. */
.page {
  width: var(--page-width);
  margin: 0 auto;
  background: #fff;
  font-family: var(--font-body);
  /* Figma pins the optical size to 14 on every text node; letting the browser
     pick it by font-size makes the glyphs narrower and changes every line break. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  color: var(--dark-grey);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  font-variation-settings: "opsz" 14, "wdth" 100;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; border: none; outline: none; background: transparent; }
img { display: block; }
.accent { color: var(--green); }

/* --- type scale --------------------------------------------------------- */

.hero h1 { font-size: 72px; line-height: normal; letter-spacing: -2.88px; }
.about h2, .brochure h2, .faq__heading, .services__heading {
  font-size: 60px; line-height: normal; letter-spacing: -2.4px;
}
.service-card h3 { font-size: 40px; line-height: normal; letter-spacing: -1.6px; }

/* --- shared components -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--radius-btn);
  background: var(--green);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}
.btn--lg { padding: 20px 32px; }
.btn--sharp { border-radius: 2px; }
.btn--ghost { background: none; border: 1px solid rgba(255, 255, 255, 0.2); }

/* square icon button — nav, cart, carousel arrows, FAQ toggles */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-btn);
  background: #fff;
}
.icon-btn--primary { background: var(--blue); border-color: var(--blue); }
.icon-btn--accent { background: var(--green); border-color: var(--green); }
/* the design has no disabled state, so an inactive arrow keeps its normal look */
.icon-btn.is-disabled { pointer-events: none; }
.icon-btn img { width: 24px; height: 24px; }
.btn img { width: 24px; height: 24px; }

/* slider dots */
.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dot.is-active { background: #fff; border-color: #fff; }

/* --- interaction states -------------------------------------------------
   The Figma frame is a static mock: it specifies exactly one hover (the cart
   button on the second product card) and no focus or disabled states. These
   keep the page usable by keyboard and give every control feedback, without
   introducing any colour or shape the design does not already use. */

.btn { transition: background-color 0.2s ease, border-color 0.2s ease; }
.btn:hover { background: #00b895; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.icon-btn { transition: background-color 0.2s ease, border-color 0.2s ease; }
.icon-btn:hover { border-color: var(--light-grey); }
.icon-btn--primary:hover { background: #35317a; border-color: #35317a; }
.menu__list a,
.footer__col ul a { transition: color 0.2s ease; }
.menu__list a:hover { color: var(--green); }
.footer__col ul a:hover { color: var(--green); }
.product-card h3 a:hover { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.testimonials :focus-visible,
.footer :focus-visible,
.hero :focus-visible { outline-color: #fff; }
/* Text fields count as :focus-visible even on a mouse click, so the keyboard
   ring made every click into a field look like a state of its own. The ring
   stays for buttons and links; a field answers in its border instead — the
   box that has one, since some fields sit borderless inside a bordered form. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; }
.field:focus-within,
.qty__value:focus,
.navbar__search input:focus,
.wissen__search input:focus,
.newsletter__form:focus-within,
.checkout.woocommerce-checkout .checkout-fields > .form-row .input-text:focus,
.checkout.woocommerce-checkout .checkout-fields > .form-row textarea:focus,
.checkout.woocommerce-checkout .checkout-fields > .form-row:focus-within {
  border-color: var(--light-grey);
}

@media (prefers-reduced-motion: reduce) {
  .page *,
  .page *::before,
  .page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Nav bar — 1728 × 104
   ========================================================================== */

/* The frame fixes the nav bar and the menu strip when it scrolls, so both stay
   on screen. Sticky rather than fixed: the 152px they take stay in the flow, so
   every section below keeps the y-coordinate the frame gives it.
   --sticky-top is the WordPress admin bar, measured by script.js — see there
   for why it cannot be a constant. */
.navbar {
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 20;
  height: 104px;
  background: #fff;
  border-bottom: 1px solid var(--light-blue);
}

/* Going down the page the header steps out of the way, coming back up it
   returns. It is moved by a transform rather than by giving up its sticky box,
   so the page does not reflow while it scrolls and the two boxes are still
   there to come back to. script.js sets the class. */
.navbar,
.menu { transition: transform 0.3s ease; }
.is-header-hidden .navbar { transform: translateY(-100%); }
/* the strip rests 104px lower, so it travels its own height plus the bar's */
.is-header-hidden .menu { transform: translateY(-152px); }
.navbar__logo { position: absolute; left: 99px; top: 20px; }
.navbar__logo img { width: 203px; height: 64px; }

.navbar__search {
  position: absolute;
  left: 382px;
  top: 28px;
  display: flex;
  align-items: center;
  width: 680px;
  height: 48px;
}
.navbar__search input {
  flex: 1;
  height: 48px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--light-blue);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-grey);
}
.navbar__search input::placeholder { color: var(--light-grey); }
.navbar__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0 4px 4px 0;
  background: var(--green);
}

/* The FiboSearch form the navbar renders where the plugin is active — the
   live shop's search-as-you-type. The wrapper takes the field's box, the
   plugin's input takes the design input's clothes, its submit the green
   square; the suggestion panel keeps the plugin's own styling, which is
   what the live shop shows. */
.navbar__search--fibo .dgwt-wcas-search-wrapp { flex: 1; width: auto; max-width: none; }
.navbar__search--fibo .dgwt-wcas-search-form { margin: 0; padding: 0; }
/* the plugin parks its magnifier inside the field's left; the design's sits
   on the green square the navbar adds beside the form */
.navbar__search--fibo .dgwt-wcas-ico-magnifier { display: none; }
.navbar__search--fibo .dgwt-wcas-sf-wrapp { display: flex; align-items: center; }
/* the plugin's own rule is .dgwt-wcas-sf-wrapp input[type=search]
   .dgwt-wcas-search-input — three classes and an element, 40px tall with
   40px of left padding for the magnifier hidden above. The wrapper class in
   front settles it, as the checkout's field selectors do. */
.navbar__search--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
  flex: 1;
  height: 48px;
  margin: 0;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--light-blue);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-grey);
}
/* the plugin sets its placeholder italic in grey; the design's is upright */
.navbar__search--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  color: var(--light-grey);
  font-style: normal;
  font-weight: 500;
}
.navbar__search--fibo .dgwt-wcas-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  background: var(--green);
}
.navbar__search--fibo .dgwt-wcas-search-submit:hover { background: var(--green); }
.navbar__search--fibo .dgwt-wcas-search-submit svg { width: 24px; height: 24px; }
.navbar__search--fibo .dgwt-wcas-search-submit svg path { fill: #fff; }

/* The FiboSearch suggestion panel, dressed as the design's dropdown. The plugin
   appends this wrapper to the end of <body>, not inside .navbar__search--fibo,
   so these rules are unscoped and match the plugin's own selector weight; the
   theme's stylesheet loads after the plugin's, so it wins on equal specificity.
   The details box on the right and the SKU line are switched off in FiboSearch's
   own settings, so the panel is the design's single column of categories and
   products. */
.dgwt-wcas-suggestions-wrapp {
  padding: 6px 0;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(41, 38, 93, 0.12);
  background: #fff;
  font-family: var(--font-body);
  color: var(--blue);
}
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion,
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion:hover {
  border: 0;
  text-decoration: none;
}
/* section headings: grey, upper case, spaced */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline {
  padding: 14px 20px 4px;
  pointer-events: none;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
  color: var(--grey);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* a thin rule opens every section but the first, and the "show all" row */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline:not(:first-child),
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more {
  border-top: 1px solid var(--divider);
  margin-top: 6px;
}
/* category rows: navy name over its grey breadcrumb */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax {
  padding: 8px 20px;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-st { display: block; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax strong {
  display: block;
  color: var(--blue);
  font-size: 16px;
  font-weight: 500;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-breadcrumbs {
  display: block;
  color: var(--grey);
  font-size: 13px;
  font-weight: 400;
}
/* product rows: thumbnail, navy name, navy bold price pinned right */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-si {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--light-blue);
  background: #fff;
  overflow: hidden;
}
/* The plugin's own stylesheet gives .dgwt-wcas-si img its own border, radius,
   padding and white background. Stacked inside our bordered box that reads as a
   second frame around the image, sometimes with a visible gap. Strip the
   plugin's frame so only our container border shows, per the design. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-si img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 3px;
  background: none;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-st { min-width: 0; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-st-title {
  color: var(--blue);
  font-size: 15px;
  font-weight: 500;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-sku { display: none; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { flex: 0 0 auto; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .amount,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .woocommerce-Price-currencySymbol {
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
/* the resting selection and hover: a faint lilac wash on the pickable rows */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product:hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected {
  background: rgba(239, 236, 249, 0.55);
}
/* "Alle Produkte ansehen (n)": the design's green, centred and spaced */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more {
  padding: 14px 20px;
  text-align: center;
}
/* the extra class beats the plugin's own two-class colour rule, whose load
   order relative to the theme differs between the staging and live builds */
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion-more .dgwt-wcas-st-more,
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion-more .dgwt-wcas-st-more-total {
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.navbar__info {
  position: absolute;
  right: 298px;
  top: 31px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark-grey);
  white-space: nowrap;
}
.navbar__code { color: var(--light-grey); text-transform: uppercase; }

.navbar__account { position: absolute; left: 1513px; top: 27px; }
.navbar__cart { position: absolute; left: 1579px; top: 27px; }
/* the desktop canvas shows the whole menu, so the hamburger only exists below
   the breakpoint — see the mobile block at the foot of this file */
.navbar__menu-btn { display: none; }
.navbar__cart-num {
  position: absolute;
  left: 32px;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 40px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

/* ==========================================================================
   Menu — 1728 × 48
   ========================================================================== */

.menu {
  position: sticky;
  top: calc(var(--sticky-top, 0px) + 104px);
  z-index: 19;
  height: 48px;
  background: var(--light-blue);
}
.menu__list {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 48px;
  padding-left: var(--page-margin);
}
.menu__list a {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue);
}
.menu__konzept { display: flex; align-items: center; gap: 8px; }
.menu__konzept img { width: 24px; height: 24px; }

/* ==========================================================================
   Hero — 1728 × 600, two slides
   ========================================================================== */

/* touch-action: pan-y lets the browser scroll the page vertically but hands
   horizontal swipes to the slider's JS (script.js onSwipe), so a swipe switches
   the slide instead of dragging the whole page sideways. */
.hero { position: relative; height: 600px; background: #d9d9d9; touch-action: pan-y; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media { position: absolute; top: 0; height: 600px; object-fit: cover; }
.hero__media--1 { right: 0; width: 1067px; }
.hero__media--2 { right: 0; width: 1138px; }

.hero__shape { position: absolute; left: 0; top: 0; height: 600px; }
.hero__shape--1 { width: 891px; }
.hero__shape--2 { width: 951px; }

.hero__content {
  position: absolute;
  left: 99px;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 619px;
}
/* Light text on a dark ground blooms in the browser and reads heavier than
   Figma renders it; dropping one weight step matches the design's ink. */
.hero h1 { color: #fff; font-weight: 500; }
.hero__lead { font-size: 22px; line-height: 40px; color: #fff; }

.hero__bullets { display: flex; flex-direction: column; gap: 16px; }
.hero__bullets li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}
.hero__bullets li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--green);
}

/* slide 2 product shot with the dark fade at its foot */
.hero__product {
  position: absolute;
  left: 621px;
  top: 382px;
  width: 302px;
  height: 231px;
  overflow: hidden;
}
.hero__product img {
  position: absolute;
  left: -14.81%;
  top: -27.04%;
  width: 130.29%;
  height: 152.34%;
  max-width: none;
}
.hero__product::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(41, 38, 93, 0) 49.784%, rgba(41, 38, 93, 0.8) 100%);
}
.hero__off { position: absolute; left: 851px; top: 331px; width: 140px; height: 140px; }

.hero__dots { position: absolute; left: 99px; top: 544px; display: flex; gap: 12px; }

/* Trusted Shops seal — overhangs the hero into the section below, and links to
   the shop's review profile.
   The asset is generated: inc/trustedshops.php refreshes its rating daily, so
   the figures do not freeze at whatever they were the day the design was drawn.
   Its rounded corners live in the file's alpha channel, rebuilt from the Figma
   export, which is why nothing is clipped here. */
.hero__badge {
  position: absolute;
  display: block;
  left: 1595px;
  top: 483px;
  z-index: 2;
}
.hero__badge img { width: 93px; height: 157px; }

/* ==========================================================================
   Product carousel — track starts 96px left of the viewport
   ========================================================================== */

.products { position: relative; height: 698px; margin-top: 80px; }
.products__viewport { width: var(--page-width); height: 608px; overflow: hidden; }
.products__track {
  display: flex;
  gap: 30px;
  /* the first card starts on the page margin so it is never half-cut; the row
     bleeds off the right edge instead, which is where the arrows take over.
     Padding rather than a transform, because the transform is what the script
     animates — this way each canvas states its own resting offset in CSS. */
  padding-left: var(--page-margin);
  transition: transform 0.4s ease;
}

.product-card {
  position: relative;
  flex: 0 0 360px;
  width: 360px;
  height: 608px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0;
  box-shadow: var(--shadow-card);
}
.product-card__img {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 320px;
  height: 320px;
  object-fit: cover;
}
.product-card__tag {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 10px 20px;
  border-radius: 40px;
  background: var(--tag);
  color: var(--tag-text);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
/* Every title in the mock is one line; the real catalogue has plenty that wrap
   to two. The price row is therefore pinned to the foot of the card and the text
   above it clamped, so a long name can never push the price out of the card. */
.product-card__info {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 364px;
  bottom: 86px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
/* the category and title keep their full height; the description is the element
   that gives way, so a two-line product name is never cut mid-word */
.product-card__cat,
.product-card h3 { flex: 0 0 auto; }
.product-card h3,
.product-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* capped at two whole lines so the text never ends on a half-cut line */
.product-card__desc { flex: 0 1 auto; min-height: 0; max-height: 52px; }
/* Frame 638:373 (2026-08-06) rebuilds the shop card as the v2 card, and its
   13px description fits where the old 18px one was sliced mid-line — the
   reason the grid dropped it. The card's own rules live with .shop__grid
   below the grid definition. */
.product-card__cat {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--light-grey);
}
.product-card h3 { font-size: 28px; line-height: 40px; }
.product-card__desc { font-size: 18px; line-height: 26px; }
.product-card__row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* WooCommerce hangs a "Warenkorb anzeigen" link on the button after an AJAX
   add. The card has no room for it — it lands beside the plus and pushes the
   price sideways — and the badge in the header is what says the add worked.
   `.woocommerce a.added_to_cart` is two classes and an element, so this is
   three and an element. */
.page .product-card a.added_to_cart { display: none; }
.product-card__price { display: flex; align-items: center; gap: 7px; width: 184px; }
.price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: var(--blue);
}
.price--old { color: var(--light-grey); text-decoration: line-through; }

/* the design shows card 2 with the cart button hovered */
.product-card .icon-btn:hover { background: var(--green); border-color: var(--green); }
.product-card .icon-btn:hover img { filter: brightness(0) invert(1); }

/* WooCommerce flags the button with `loading` while the AJAX add runs and
   with `added` once it lands. Staging answers in ~2s, and a button that shows
   nothing for two seconds reads as dead — so the click is acknowledged at
   once: the glyph gives way to a ring until the shop answers. Carousel and
   grid then show the frame's Im-Warenkorb state (further down, with the v2
   card); the article shortcode's card keeps its view-cart link hidden, so
   there the `added` check on the button is the acknowledgement. */
.product-card .icon-btn { position: relative; }
.product-card .icon-btn.loading { pointer-events: none; }
.product-card .icon-btn.loading img { opacity: 0; }
.product-card .icon-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--light-blue);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wb-products .product-card .icon-btn.added img { display: none; }
.wb-products .product-card .icon-btn.added::after {
  content: '';
  width: 24px;
  height: 24px;
  background: url(assets/icon-check.svg) no-repeat center / 24px;
}
/* hovered, the button turns green — a green check on it would vanish */
.wb-products .product-card .icon-btn.added:hover {
  background: #fff;
  border-color: var(--light-blue);
}

.products__arrows {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
#prevBtn img { transform: scaleX(-1); }

/* --- v2 carousel (frame 548:203, home only) --------------------------------
   The row is a run of 282px cards that bleeds off both edges of the canvas
   under a white fade, with the arrows floating over the fades. The related
   carousel on the product page and the shop grid keep the previous card —
   their frames have not changed. */

.products--v2 { height: 560px; margin-top: 64px; }
.products--v2 .products__viewport { width: 100%; height: 560px; padding-top: 16px; }
/* no resting padding: script.js centers the row when the padding is 0 */
.products--v2 .products__track { gap: 20px; padding-left: 0; }
/* revision 571:1744 drops the description and the tick rows from the desktop
   card and reserves the name two full lines; the mobile canvas (548:1101)
   still draws them, so they stay in the markup and step aside here */
.products--v2 .product-card { flex: 0 0 282px; width: 282px; height: 466px; }
/* Figma aligns the stroke inside the frame, so its 21px inset is our 20px
   padding plus the border */
.products--v2 .product-card__img { left: 20px; top: 20px; width: 240px; height: 240px; }
.products--v2 .product-card__info { left: 20px; right: 20px; top: 272px; bottom: 86px; gap: 12px; }
.products--v2 .product-card h3 { font-size: 24px; line-height: 36px; height: 72px; }
.products--v2 .product-card__desc,
.products--v2 .product-card__ticks { display: none; }
.products--v2 .product-card__row { left: 20px; right: 20px; bottom: 20px; }

/* After an AJAX add the card shows the state frame 571:1744 draws, on the
   carousel and (since 2026-08-06, Moritz) the shop grid alike: the price
   gives way to a green check + "Im Warenkorb" — WooCommerce's own view-cart
   link, renamed in inc/cart-badge.php and unhidden here against the .page
   rule that hides it everywhere else — and the frame's green arrow square
   sits at the row's end. The whole row is that one link into the cart; the
   re-add button steps aside, so the state cannot re-add. */
.products--v2 .product-card__row:has(.added_to_cart) .product-card__price,
.shop__grid .product-card__row:has(.added_to_cart) .product-card__price,
.products--v2 .product-card__row:has(.added_to_cart) .icon-btn,
.shop__grid .product-card__row:has(.added_to_cart) .icon-btn,
.product__buy:has(a.added_to_cart) .product__cart { display: none; }
.page .products--v2 .product-card a.added_to_cart,
.page .shop__grid .product-card a.added_to_cart,
.page .product__buy a.added_to_cart {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--green);
}
.page .products--v2 .product-card a.added_to_cart::before,
.page .shop__grid .product-card a.added_to_cart::before,
.page .product__buy a.added_to_cart::before {
  content: '';
  flex: 0 0 24px;
  height: 24px;
  background: url(assets/icon-check.svg) no-repeat center / 24px;
}
.page .products--v2 .product-card a.added_to_cart::after,
.page .shop__grid .product-card a.added_to_cart::after,
.page .product__buy a.added_to_cart::after {
  content: '';
  flex: 0 0 50px;
  height: 50px;
  margin-left: auto;
  border-radius: var(--radius-btn);
  background: var(--green) url(assets/arrow-carousel.svg) no-repeat center / 24px;
}
/* the card under the frame's cursor annotation carries the deeper shadow */
.products--v2 .product-card:hover { box-shadow: 0 4px 16px rgba(34, 36, 36, 0.08), 0 2px 1px rgba(34, 36, 36, 0.02); }

.product-card__ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-card__ticks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  color: var(--dark-grey);
}
.product-card__ticks img { flex: 0 0 16px; }

.products--v2::before,
.products--v2::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 1;
  pointer-events: none;
}
.products--v2::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.products--v2::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }

.products--v2 .products__arrows { position: static; }
.products--v2 .products__arrows .icon-btn { position: absolute; top: 252px; z-index: 2; }
.products--v2 #prevBtn { left: 20px; }
.products--v2 #nextBtn { right: 20px; }

/* ==========================================================================
   Testimonials — 1728 × 520, dark band
   ========================================================================== */

.testimonials {
  position: relative;
  height: 520px;
  /* revision 571:1744 pulls the band up to two pixels under the fades */
  margin-top: 2px;
  background: var(--blue);
  /* horizontal swipes drive the slider (script.js), not a sideways page drag */
  touch-action: pan-y;
}

.testimonials__video { position: absolute; left: 99px; top: 80px; width: 490px; height: 360px; }
/* direct child only — the play button nests its own icon in here */
.testimonials__video > img {
  width: 490px;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-card) 0 0 0;
}
/* The reel is portrait and the tile is not, so it does not play in the tile:
   the play button opens a lightbox where the video stands near full height.
   The overlay's markup sits outside .page — the canvas zoom above the
   breakpoint must not scale it — and closes on the button, the backdrop and
   Escape, stopping the video as it goes. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 30, 0.85);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox__player {
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 8px;
  background: #000;
}
.video-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: none;
}
/* the close glyph is navy; on the dark backdrop it turns white */
.video-lightbox__close img { filter: brightness(0) invert(1); }
.video-lightbox__close:hover { border-color: rgba(255, 255, 255, 0.7); }
.testimonials__play {
  position: absolute;
  left: 205px;
  top: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--green);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
.testimonials__play img { width: 40px; height: 40px; }

.testimonials__body {
  position: absolute;
  left: 619px;
  top: 80px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 1010px;
}
.testimonials__quote { flex: 0 0 auto; width: 29.44px; height: 19.92px; }
.testimonials__col { display: flex; flex-direction: column; gap: 28px; flex: 1; }

.testimonials blockquote {
  font-size: 48px;
  font-style: italic;
  line-height: normal;
  letter-spacing: -1.92px;
  color: #fff;
  font-weight: 350;
}
.testimonials__meta { display: flex; align-items: center; justify-content: space-between; }
.testimonials__author { display: flex; flex-direction: column; gap: 8px; }
.testimonials__name { font-size: 22px; line-height: 40px; color: #fff; }
.testimonials__place {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--light-grey);
}
.testimonials__line { border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }
/* A slide is a wrapper without a box: display: contents leaves the tile and
   the body laid out exactly as before, and hiding the wrapper hides the voice.
   Each slide carries its own copy of the dots, in flow under its own rule —
   a voice without a story button is shorter, and a pinned dots row would hang
   below its rule. script.js keeps the copies in step. */
.testimonials__slide { display: none; }
.testimonials__slide.is-active { display: contents; }
.testimonials__dots { display: flex; gap: 12px; }

/* ==========================================================================
   Services — 1728 × 1016, lilac band with a rounded bottom-right corner
   ========================================================================== */

.services {
  height: 1016px;
  padding-top: 100px;
  background: var(--light-blue);
  border-radius: 0 0 80px 0;
}
.services__heading { text-align: center; }
.services__grid {
  display: grid;
  grid-template-columns: 750px 750px;
  gap: 40px 30px;
  margin: 64px 0 0 var(--page-margin);
}

.service-card {
  position: relative;
  display: flex;
  width: 750px;
  height: 320px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.service-card__img {
  position: relative;
  flex: 0 0 320px;
  width: 320px;
  height: 320px;
  border-radius: var(--radius-card) 0 0 0;
  overflow: hidden;
}
.service-card__img > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__img--mirror > img:first-child { transform: scaleX(-1); }
/* the photo fades into the card instead of ending on a hard edge */
.service-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 50%);
}
.service-card__icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  width: 64px;
  height: 64px;
}
.service-card__icon--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
}
.service-card__icon--circle img { width: 37px; height: 37px; }
.service-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 382px;
  margin: 40px 0 0 24px;
}
.service-card__text p { font-size: 18px; line-height: 26px; }

/* ==========================================================================
   Über Farmula — 1728 × 621
   ========================================================================== */

.about { position: relative; height: 621px; margin-top: 80px; }
.about__img {
  position: absolute;
  left: 99px;
  top: 0;
  width: 880px;
  height: 621px;
  object-fit: cover;
  object-position: bottom;
  border-radius: var(--radius-card) var(--radius-card) 0 var(--radius-card);
}
.about__text {
  position: absolute;
  left: 1059px;
  top: 47px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 570px;
}
.about__text p { font-size: 18px; line-height: 26px; }

/* ==========================================================================
   Broschüre + Newsletter — 1728 × 816
   ========================================================================== */

.brochure {
  position: relative;
  height: 816px;
  margin-top: 80px;
  background: var(--light-blue);
  border-radius: 80px 0 0 0;
}
.brochure__vector { position: absolute; right: -65px; top: -10px; width: 484px; height: 279px; }

.brochure__intro {
  position: absolute;
  left: 99px;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 880px;
}
.brochure__intro p { font-size: 18px; line-height: 26px; }

.newsletter {
  position: absolute;
  left: 99px;
  top: 392px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 880px;
  height: 344px;
  padding: 40px 56px 40px 47px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.newsletter h3 { font-size: 28px; line-height: 40px; }
.newsletter__text { display: flex; flex-direction: column; gap: 16px; }
.newsletter__text p { font-size: 18px; line-height: 26px; }
.newsletter__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 24px;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-btn);
  background: #fff;
}
.newsletter__form input { flex: 1; height: 58px; font-size: 16px; }
.newsletter__form input::placeholder { color: var(--light-grey); }

.brochure__cover { position: absolute; left: 1069px; top: 100px; }
.brochure__book { width: 490px; height: 585px; object-fit: cover; }
.brochure__shadow {
  position: absolute;
  left: 135.73px;
  top: 572.8px;
  width: 217.17px;
  height: 14.93px;
}

/* ==========================================================================
   FAQ — 1728 × 1254
   ========================================================================== */

.faq { position: relative; margin-top: 80px; padding: 0 var(--page-margin); }
.faq__heading { line-height: 72px; }
.faq__list { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }

/* the separators are drawn as pseudo-elements: in Figma they are zero-height
   strokes, so a real border would push every following section down by 1px */
.faq__item { position: relative; padding-top: 40px; }
.faq__item::before,
.faq__contact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1530px;
  border-top: 1px solid var(--divider);
}
/* The row keeps a constant 50px height in both states so that opening an answer
   never shifts the question itself — only the answer below it animates. */
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 50px;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { flex: 1; max-width: 1280px; font-size: 28px; line-height: 40px; }

/* Open/closed styling is driven by [open], not by the markup, so every toggle
   animates the same way whichever item the visitor clicks. */
.faq__toggle {
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.faq__item[open] .faq__toggle { background: var(--blue); border-color: var(--blue); }
.faq__toggle img {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq__toggle-open { opacity: 0; }
.faq__toggle-closed { opacity: 1; transform: scaleY(-1); }
.faq__item[open] .faq__toggle-open { opacity: 1; }
.faq__item[open] .faq__toggle-closed { opacity: 0; transform: none; }

/* padding rather than margin: the height animation has to include the gap */
.faq__answer {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 1280px;
  padding-top: 14px;
  overflow: hidden;
}
.faq__answer p { font-size: 18px; line-height: 26px; }

.faq__contact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 750px;
  margin-top: 40px;
  padding: 24px;
  border-radius: 16px;
  background: var(--light-blue);
}
/* the separator sits 40px above the box, not on its edge */
.faq__contact::before { top: -40px; }
.faq__contact h3 { font-size: 28px; line-height: 40px; }
.faq__contact p { font-size: 18px; line-height: 26px; }

/* ==========================================================================
   Footer — 1728 × 768 (648 main + 120 bottom bar)
   ========================================================================== */

.footer { margin-top: 100px; }
.footer__main {
  position: relative;
  height: 648px;
  background: var(--blue);
  color: #fff;
}
.footer__col { position: absolute; top: 100px; }
.footer__col--brand { left: 99px; }
.footer__logo { width: 240px; height: 75px; }
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 261px;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 500;
}
.footer__col--info { left: 489px; }
.footer__col--legal { left: 879px; }
.footer__col--last { left: 1269px; display: flex; flex-direction: column; gap: 40px; }

.footer__col h3 { font-size: 28px; line-height: 40px; color: #fff; font-weight: 500; }
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 261px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
}

.footer__block { display: flex; flex-direction: column; gap: 24px; }
.footer__social { display: flex; align-items: center; gap: 20px; }
.footer__tiles { display: flex; flex-wrap: wrap; gap: 20px; width: 360px; }
.footer__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 44px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  padding: 0 var(--page-margin);
  background: var(--sea-blue);
  color: #fff;
}
.footer__bottom p { font-size: 14px; font-weight: 500; opacity: 0.5; }
.footer__badges { display: flex; align-items: center; gap: 24px; }
.footer__badges img { width: 50px; height: 50px; }

/* ==========================================================================
   Shop / Products — Figma frame "Products" (377:101), 1728 × 5205
   ========================================================================== */

/* the shop page closes tighter under the last section than the home page does */
.page--shop .footer { margin-top: 80px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 0 var(--page-margin);
  font-size: 16px;
  font-weight: 500;
  color: var(--blue);
}
.breadcrumbs img { width: 16px; height: 16px; }
.breadcrumbs a:hover { color: var(--green); }
/* the page you are already on is greyed out */
.breadcrumbs span { color: var(--light-grey); }

/* The height follows the grid rather than being pinned, because the number of
   products is the shop's to decide — at the design's twelve it comes to the
   frame's 2700px. Only the sidebar is taken out of flow; the main column keeps
   its place in it so it can push the section open. */
.shop { position: relative; margin-top: 80px; min-height: 708px; }
.shop__side { position: absolute; left: var(--page-margin); top: 0; width: 211px; }
.shop__main { margin-left: 489px; width: 1140px; }

.shop-cats { display: flex; flex-direction: column; gap: 12px; }
.shop-cats a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: var(--blue);
  white-space: nowrap;
}
.shop-cats__dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--blue); }
.shop-cats a:hover,
.shop-cats .is-active a { color: var(--green); }
.shop-cats a:hover .shop-cats__dot,
.shop-cats .is-active .shop-cats__dot { background: var(--green); }

.shop__head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.shop__head h1 { font-size: 40px; line-height: normal; letter-spacing: -1.6px; }
.shop__sort { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.shop__sort p { font-size: 18px; font-weight: 600; line-height: 26px; }
/* A real <select>: the frame draws a field with a chevron, and a native control
   keeps the shop sortable by keyboard and without JS. The chevron is the
   background rather than a child, since a select cannot hold one. */
.shop__sort-field {
  appearance: none;
  width: 280px;
  height: 48px;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  background: #fff url(assets/icon-sort.svg) no-repeat right 12px center;
  background-size: 24px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-grey);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.shop__sort-field:hover { border-color: var(--light-grey); }

.shop__empty { grid-column: 1 / -1; font-size: 20px; line-height: 32px; }
/* the desktop canvas shows the categories as a sidebar, so the control that
   folds them out only exists below the breakpoint */
.shop__filter-btn { display: none; position: relative; }

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 364px);
  gap: 24px;
  margin-top: 40px;
}

/* Frame 638:373 (2026-08-06): the shop card is the v2 card at 364 × 505 — the
   240px shot centred, 24/36 name, the 13px description back in two lines or
   up to three tick rows, the price row on the foot. Laid out in flow like the
   cart's cross-sells: position: static switches the base card's offsets off,
   and the info block takes the slack so the row stays put under names of any
   length. */
.shop__grid .product-card {
  display: flex;
  flex-direction: column;
  width: auto;
  /* the three-line description needs ~20px more than the frame's two-line 505,
     so a two-line product name and a full description never clip each other */
  height: 525px;
  padding: 20px;
}
/* the theme wraps the shot in a link; its line box must not add a descender */
.shop__grid .product-card > a { display: block; line-height: 0; }
.shop__grid .product-card__img {
  position: static;
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto 12px;
  transform: none;
}
.shop__grid .product-card__info {
  position: static;
  flex: 1;
  gap: 12px;
  overflow: hidden;
}
.shop__grid .product-card h3 { font-size: 24px; line-height: 36px; font-weight: 500; }
/* the frame gives the shop card a description preview of up to three lines,
   overriding the base card's two; enough words are passed for it to fill and
   the -webkit-box clamps the rest with an ellipsis */
.shop__grid .product-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  max-height: 51px;
}
.shop__grid .product-card__row { position: static; margin-top: 20px; }
/* the empty media box spans the content (638:1758) and keeps its centring */
.shop__grid .product-card__img--empty { display: flex; width: 100%; }

/* a product with no image still has to fill the media box */
.product-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-blue);
  border-radius: var(--radius-card) 0 0 0;
}
.product-card__img--empty img { width: 148px; height: 85px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.pagination__gap { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.pagination .icon-btn { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.pagination .icon-btn.is-current { color: #fff; }
.pagination__prev img { transform: scaleX(-1); }

/* text beside the USP card; a row rather than two absolute boxes, so the
   section grows with whichever column is taller */
.shop-about {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin-top: 80px;
  padding: 0 var(--page-margin);
}
.shop-about__text {
  flex: 0 0 840px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.shop-about__text h2 { font-size: 60px; line-height: normal; letter-spacing: -2.4px; }
.shop-about__text p { font-size: 20px; line-height: 32px; }

.usp {
  flex: 0 0 620px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 32 less the 1px border: Figma keeps the stroke inside the frame's padding,
     CSS puts it outside, and the card has to land on the frame's 388px */
  padding: 31px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 10px rgba(34, 36, 36, 0.04), 0 2px 1px rgba(34, 36, 36, 0.04);
}
.usp__row { display: flex; align-items: center; gap: 24px; }
/* likewise the separators, which are zero-height strokes in the frame */
.usp__row + .usp__row { border-top: 1px solid var(--divider); padding-top: 23px; }
.usp__text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.usp__text h3 { font-size: 24px; font-weight: 500; line-height: 36px; }
.usp__text p { font-size: 20px; line-height: 32px; }
.usp img { width: 48px; height: 48px; }

/* Text page (frame 648:2892): breadcrumbs and title, then the page's own
   content beside the highlights card — the same two columns as the product
   page's "Das Tier im Fokus" band. */
.text-page__title {
  margin: 48px 0 0 var(--page-margin);
  font-size: 60px;
  line-height: normal;
  letter-spacing: -2.4px;
}
.text-page {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin: 48px 0 80px;
  padding: 0 var(--page-margin);
}
.text-page__content {
  flex: 0 0 840px;
  min-width: 0;
  font-size: 20px;
  line-height: 32px;
  color: var(--dark-grey);
}
.text-page__content > :first-child { margin-top: 0; }
.text-page__content p { margin: 0 0 24px; }
.text-page__content h2,
.text-page__content h3,
.text-page__content h4 {
  font-family: var(--font-display);
  color: var(--blue);
  margin: 40px 0 16px;
}
.text-page__content h2 { font-size: 32px; line-height: normal; letter-spacing: -1px; }
.text-page__content h3 { font-size: 24px; line-height: 36px; }
.text-page__content h4 { font-size: 20px; line-height: 28px; }
.text-page__content a { color: var(--green); }
.text-page__content a:hover { text-decoration: underline; }
.text-page__content ul,
.text-page__content ol { margin: 0 0 24px; padding-left: 22px; }
.text-page__content ul { list-style: disc; }
.text-page__content li { margin-bottom: 8px; }
.text-page__content img { max-width: 100%; height: auto; }

/* ==========================================================================
   Wissenbank — Figma frames "Wissenbank" (454:1780) and its 402px mobile
   counterpart (456:48)

   Structurally the shop archive: a category sidebar, a heading, a grid and
   pagination — so it reuses .shop rather than restating that geometry. Only
   the sidebar's width, the grid and the article card are its own.
   ========================================================================== */

/* the brochure sits straight on the footer here, unlike the other pages */
.page--wissen .footer { margin-top: 0; }

.shop--wissen .shop__side { width: 227px; }

/* the article search frame 571:5759 sets beside the heading; the button is
   the nav bar's green one */
.wissen__search { display: flex; align-items: center; width: 400px; height: 48px; }
.wissen__search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--light-blue);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-grey);
}
.wissen__search input::placeholder { color: var(--light-grey); }
/* the categories are the sidebar on this canvas; the field is the mobile form */
.shop--wissen .shop__sort { display: none; }

.wissen__grid {
  display: grid;
  grid-template-columns: repeat(2, 555px);
  gap: 30px;
  margin-top: 40px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 24/24/32 less the 1px border — Figma keeps the stroke inside the frame */
  padding: 23px 23px 31px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0;
  box-shadow: 0 4px 10px rgba(34, 36, 36, 0.04), 0 2px 1px rgba(34, 36, 36, 0.04);
}
.article-card__upper { display: flex; flex-direction: column; gap: 24px; }
.article-card__img { width: 100%; height: 320px; object-fit: cover; border-radius: 8px; }
/* a post with no featured image still has to fill the media box, or the cards
   in a row start at different heights */
.article-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-blue);
}
.article-card__img--empty img { width: 148px; height: 85px; }
.article-card__text { display: flex; flex-direction: column; gap: 16px; }
.article-card__date {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--light-grey);
}
.article-card h2 { font-size: 28px; line-height: 40px; }
.article-card h2 a:hover { color: var(--green); }
.article-card__excerpt { font-size: 18px; line-height: 26px; }
/* pinned to the foot so the button lines up across a row of uneven cards */
.article-card .btn { align-self: flex-start; margin-top: auto; }

/* the text sits at the top, the USP card hangs at the bottom of the band */
.shop-about--wissen { min-height: 484px; }
.shop-about--wissen .usp { align-self: flex-end; }
.shop-about__text { gap: 0; }
.shop-about__text h2 { margin-bottom: 32px; }
.shop-about__text ul { font-size: 20px; line-height: 32px; }

/* ==========================================================================
   Warenkorb — Figma frames "Warenkorb" (475:309) and its 402px mobile
   counterpart (475:890)
   ========================================================================== */

/* this page carries no broschüre band, so the footer follows the content */
.page--cart .footer { margin-top: 100px; }

/* the back link sits in the title row since frame 571:4414 (2026-08-03) */
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 80px var(--page-margin) 0;
}
.cart__title {
  font-size: 60px;
  line-height: normal;
  letter-spacing: -2.4px;
}

.cart {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin: 40px var(--page-margin) 0;
}
.cart__main { flex: 0 0 960px; }
.cart__side { flex: 0 0 490px; display: flex; flex-direction: column; gap: 24px; }

.cart__items { display: flex; flex-direction: column; gap: 24px; }

/* States the design has no frame for: an empty cart, WooCommerce's own notices
   after a removal, and the no-JS update button. Set in the page's own type so
   they do not arrive in the browser's. */
.cart__empty { font-size: 20px; line-height: 32px; }
.cart__update { margin-top: 24px; }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  margin-bottom: 24px;
  padding: 20px 24px;
  /* woocommerce.css puts its green border-top and an icon-font check into
     ::before on these boxes; both painted over the design's box — the check
     sat on the product's name (Moritz, 2026-08-06) */
  border: 0;
  border-radius: var(--radius-card);
  background: var(--light-blue);
  font-size: 18px;
  line-height: 26px;
  color: var(--blue);
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before { content: none; }
/* the one action in a notice — the removal's "Rückgängig?" — in the page's
   green rather than the browser's link blue */
.woocommerce-message a { color: var(--green); font-weight: 600; }
.woocommerce-error { color: var(--red); }

/* The line item is a white card since frame 571:4414; it was a lilac slab.
   Unlike the checkout's boxes this frame keeps its stroke outside the padding
   (the content sits 25px in, 24 padding plus the border), so the padding is
   stated in full. */
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 10px rgba(34, 36, 36, 0.04), 0 2px 1px rgba(34, 36, 36, 0.04);
}
.cart-item__body { display: flex; align-items: center; gap: 32px; }
/* .page carries the height past `.woocommerce img { height: auto }` — a class
   and an element, which beats a lone class and squashes the 4:3 thumbnail */
.page .cart-item__img {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}
.cart-item__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cart-item h2 { font-size: 28px; line-height: 40px; }
.cart-item__qty { display: flex; align-items: center; gap: 16px; }
.cart-item__qty p { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.cart-item__delete {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--red);
}
.cart-item__delete:hover { text-decoration: underline; }
.cart-item__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}
.cart-item__total {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.6px;
  color: var(--blue);
}
.cart-item__unit { font-size: 18px; font-weight: 400; line-height: 26px; color: var(--dark-grey); }

.cart__back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--green);
}
/* the frame mirrors the right-arrow glyph rather than drawing a left one */
.cart__back img { transform: scaleX(-1); }
.cart__back:hover { text-decoration: underline; }

/* the boxes beside the items: summary, shipping note, payment methods */
.cart-box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 32 less the 1px border — Figma keeps the stroke inside the frame */
  padding: 31px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 10px rgba(34, 36, 36, 0.04), 0 2px 1px rgba(34, 36, 36, 0.04);
}
.cart-box__head { display: flex; align-items: center; gap: 24px; }
.cart-box__head h2 { flex: 1; font-size: 24px; font-weight: 500; line-height: 36px; }
.cart-box__head img { flex: 0 0 48px; width: 48px; height: 48px; }
/* zero-height stroke in the frame */
.cart-box__rule { border: none; border-top: 1px solid var(--divider); margin-bottom: -1px; }

.cart-box__total { display: flex; flex-direction: column; gap: 4px; }
.cart-box__total-row { display: flex; justify-content: space-between; }
.cart-box__total-row p {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.6px;
  color: var(--blue);
}
.cart-box__note { font-size: 15px; font-weight: 400; color: var(--grey); }
.cart-box__cta { justify-content: center; }

.cart-box__pay { display: flex; flex-wrap: wrap; gap: 20px; }
.cart-box__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 56px;
  border: 1px solid var(--light-blue);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* the shipping note is one row, so it carries no rule and no gap of its own */
.cart-box--shipping { gap: 0; }
.cart-box--shipping .cart-box__head h2 { line-height: 36px; }

/* the not-yet-qualified variant (frame 668:568): label and its bar stack in the
   head's left slot, the delivery icon keeps the 48px column. 18px semibold navy
   over an 8px fully-rounded track that fills green toward the free-shipping
   threshold; the 24px head gap matches the frame's 354px-to-icon offset. */
.cart-box--progress .cart-box__head { align-items: center; }
.cart-box__ship { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cart-box__ship-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--blue);
}
.cart-box__ship-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--light-blue);
  overflow: hidden;
}
.cart-box__ship-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--green);
}

.suggest { margin-top: 80px; }
.suggest__heading {
  margin-bottom: 40px;
  font-size: 40px;
  line-height: normal;
  letter-spacing: -1.6px;
}
/* Frame 571:4414 fills the column with three of the v2 carousel cards at 300px.
   The base card positions its content absolutely against a fixed height; on
   mobile these cards follow their content instead, so this variant lays the
   card out in flow — position: static switches the base offsets off. */
.suggest__grid { display: grid; grid-template-columns: repeat(3, 300px); gap: 30px; }
.suggest__grid .product-card {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 522px;
  padding: 20px;
}
.suggest__grid .product-card__img {
  position: static;
  width: 240px;
  height: 240px;
  margin-bottom: 12px;
}
.suggest__grid .product-card__info {
  position: static;
  flex: 1;
  gap: 12px;
  overflow: hidden;
}
.suggest__grid .product-card__row { position: static; margin-top: 16px; display: flex; }
.suggest__grid .product-card h3 { font-size: 24px; line-height: 36px; }
.suggest__grid .product-card__desc {
  display: -webkit-box;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  max-height: 34px;
}

/* ==========================================================================
   Bestellung — Figma frames "Bestellung" (482:1553) and its 402px mobile
   counterpart (487:430), 1728 × 2461
   ========================================================================== */

/* The checkout strips the chrome down to a logo and the legal links: nothing on
   the page leads anywhere but forward or back to the cart. */
.navbar--slim { height: 104px; background: var(--blue); border-bottom: none; }
.navbar--slim .navbar__logo { left: var(--page-margin); top: 20px; }

.page--checkout .footer { margin-top: 100px; }
.footer--slim .footer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  height: 200px;
  padding: 40px var(--page-margin);
}
.footer__legal { display: flex; gap: 40px; font-size: 16px; font-weight: 500; }
.footer__legal a { transition: color 0.2s ease; }
.footer__legal a:hover { color: var(--green); }
/* the copyright keeps the 40px it has on every page; the badges stay centred */
.footer--slim .footer__bottom-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  margin-top: 40px;
}
.footer--slim .footer__note { font-size: 13px; }

.checkout__back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 40px var(--page-margin) 0;
  width: fit-content;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--green);
}
.checkout__back:hover { text-decoration: underline; }

.checkout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px var(--page-margin) 0;
}
/* 40px since frames 599:6712/599:7090 — the checkout family left the 60 behind */
.checkout__head h1 { font-size: 40px; line-height: normal; letter-spacing: -1.6px; }
.checkout__secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--sea-blue);
}

.checkout {
  display: flex;
  /* wrap, because checkout.js prepends its error list straight into this
     row: as a third flex item it was squeezed into a 169px strip beside the
     columns. Wrapped, the list takes the whole first line and the two
     columns sit below unchanged — column-gap rather than gap, so the new
     row costs no 80px of air; the notice's own margin is the spacing. */
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 80px;
  margin: 40px var(--page-margin) 0;
}
.checkout .woocommerce-NoticeGroup { flex: 0 0 100%; }
.checkout ul.woocommerce-error,
.checkout ul.woocommerce-message,
.checkout ul.woocommerce-info { list-style: none; }
/* inside an error the links keep the error's red, not the page's green */
.woocommerce-error a { color: inherit; }
/* the "… wurde dem Warenkorb hinzugefügt" message prints before the form, so it
   sits in .checkout-wrap rather than inside the form's own row and misses the
   page gutter the heading and the form both carry — it ran edge to edge under
   the "Ihre Bestellung" heading. Give it the same inset so it lines up. */
.checkout-wrap .woocommerce-notices-wrapper { margin: 0 var(--page-margin); }
/* the form is one lilac slab with a single rounded corner, like the cart's
   line items — not the white card the summary beside it sits in */
.checkout__form {
  flex: 0 0 960px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px;
  background: var(--light-blue);
  border-radius: 0 40px 0 0;
}
.checkout__side { flex: 0 0 490px; display: flex; flex-direction: column; gap: 24px; }

.checkout-block { display: flex; flex-direction: column; gap: 24px; }
.checkout-block h2 { font-size: 28px; line-height: 40px; }
.checkout-block__head { display: flex; align-items: flex-start; justify-content: space-between; }
.checkout-block__title { display: flex; flex-direction: column; gap: 8px; }
.checkout-block__title p { font-size: 18px; line-height: 26px; color: var(--grey); }
.checkout__login { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--green); }
.checkout__login:hover { text-decoration: underline; }

.checkout-fields { display: flex; flex-direction: column; gap: 20px; }
.checkout-fields__row { display: flex; gap: 24px; }
.checkout-fields__row .field { flex: 1; }
/* the fields frame 599:6712 sets at half width, alone on their row */
.field--half { width: 436px; }
.checkout .field-group { width: 436px; }
.checkout-fields__rule { border: none; border-top: 1px solid var(--divider); margin-bottom: -1px; }

/* one field: a white box the input sits inside, so the select can carry its
   label in the same frame the text inputs fill edge to edge */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field {
  display: flex;
  align-items: center;
  height: 64px;
  /* 24/16 less the 1px border — Figma keeps the stroke inside the frame */
  padding: 0 15px 0 23px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: 4px;
}
/* 18px, not the frame's 16: the labels, the country select and every line of
   copy beside these fields are 18px, and the typed address read smaller than
   all of it. Moritz's call, 2026-07-31. */
.field input {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  color: var(--dark-grey);
}
.field input::placeholder { color: var(--light-grey); }
.field__hint { font-size: 13px; font-weight: 500; color: var(--grey); }

.field--select {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  /* from the top like the floated labels beside it: label at 10, value under */
  justify-content: flex-start;
  gap: 4px;
  padding-top: 10px;
  /* the 55px band under the chevron belongs to the select, not the box: a
     click only opens the picker when it lands on the select itself — on the
     label it merely focuses. So the box keeps no right padding and the select
     spans the full width, carrying the 55px as its own. */
  padding-right: 0;
}
.field__label { font-size: 13px; font-weight: 500; color: var(--light-grey); }

/* Every field floats its label the way the design draws Land/Region: as long
   as the field is empty the placeholder is the label, and the moment it has
   content the name appears small in the field's upper corner with the value
   dropping under it. Pure CSS — :placeholder-shown knows whether there is
   content, :has() lifts that to the box. */
.field { position: relative; }
.field:not(.field--select) .field__label {
  display: none;
  position: absolute;
  left: 24px;
  top: 10px;
  line-height: normal;
}
.field:has(input:not(:placeholder-shown)) .field__label { display: block; }
.field:has(input:not(:placeholder-shown)) {
  align-items: flex-end;
  padding-bottom: 11px;
}
.field--select select {
  appearance: none;
  /* the whole box is the hit area: a select only opens for a click that lands
     on the control itself, and the chevron is centred on the 64px row — the
     26px line box the flow gave the select left the arrow's upper half over
     bare label. Parked absolute over the field instead, the value pinned by
     padding to the flow's own position (measured: 31px under the padding
     edge, 31 + 26 + 5 = the 62px padding box). The label shows through the
     transparent control. */
  position: absolute;
  inset: 0;
  padding: 31px 55px 5px 23px;
  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
  color: var(--dark-grey);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
/* the chevron is the nav's, turned over — the design uses the same glyph */
.field--select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%) scaleY(-1);
  background: url(assets/icon-chevron-up.svg) center / 24px 24px no-repeat;
  pointer-events: none;
}

/* Checkboxes and radios are drawn rather than imported: both are a 22px box
   inside a 24px slot, and a real input keeps the label clickable. */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--dark-grey);
  cursor: pointer;
}
.check--top { align-items: flex-start; }
.check a { text-decoration: underline; }
.check input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px;
  appearance: none;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  cursor: pointer;
}
.check input:checked {
  background: var(--green) url(assets/check-white.svg) center / 13.5px 9.81px no-repeat;
}

.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 15px 0 23px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: 4px;
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--green); }
.choice input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px;
  appearance: none;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 50%;
  cursor: pointer;
}
/* filled green with a light-blue pip, not a green pip on white */
.choice input:checked { background: var(--green); }
.choice input:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 7px;   /* centred in the 20px box the 1px border leaves */
  border-radius: 50%;
  background: var(--light-blue);
}
.choice__label { flex: 1; font-size: 18px; line-height: 26px; color: var(--dark-grey); }
.choice__logo { width: 32px; height: 24px; object-fit: contain; }
.choice__logo--wide { width: 113px; height: 16px; }

.checkout__submit { max-width: 400px; justify-content: center; }

/* the summary reuses the cart's white box; only its contents are new */
.summary { display: flex; flex-direction: column; gap: 16px; }
.summary__row { display: flex; align-items: center; gap: 16px; }
.summary__img { flex: 0 0 100px; width: 100px; height: 100px; object-fit: cover; }
.summary__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.summary__name { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.summary__qty { font-size: 16px; font-weight: 500; color: var(--grey); }
.summary__line { display: flex; align-items: center; justify-content: space-between; }
.summary__line p { font-size: 16px; font-weight: 500; color: var(--grey); }
.summary__price,
.summary__line .summary__value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: var(--blue);
}

.cart-box--sum { gap: 4px; }
.checkout-total { display: flex; flex-direction: column; gap: 4px; }
.checkout-total__row { display: flex; align-items: flex-start; justify-content: space-between; }
.checkout-total__row p {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
  color: var(--blue);
}
.checkout-total__row .checkout-total__value {
  font-size: 40px;
  line-height: normal;
  letter-spacing: -1.6px;
}
.checkout-total__note { font-size: 16px; font-weight: 500; color: var(--grey); }

/* --- the same page, rendered by WooCommerce ------------------------------

   Everything below only ever matches inside the WordPress theme: the static
   checkout.html above carries the design's own classes, while WooCommerce emits
   its own markup that has to be mapped onto them. Kept together here so the two
   never drift: a change to the design's checkout has to be answered in this
   block, and the block says which WooCommerce class it is answering. */

/* WooCommerce nests the fields two wrappers deep; the design has one column, so
   the wrappers step out of the way and their children lay themselves out. */
.checkout .col2-set,
.checkout .col-1,
.checkout .col-2,
.checkout .woocommerce-account-fields,
.checkout__side .woocommerce-checkout-review-order,
.checkout-review { display: contents; }

/* the address block and the order note come out of form-shipping.php, one
   section later than the fields they belong with — the card's 40px section gap
   is pulled back to the 20px the fields use between themselves */
.checkout .woocommerce-shipping-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: -20px;
}
.checkout .woocommerce-additional-fields { margin-top: -20px; }
/* WooCommerce's own "ship to a different address?" is the posted one; the
   design's inverted twin above it is the one that is seen */
.checkout__ship-different { display: none; }

.checkout-note { display: flex; flex-direction: column; gap: 20px; }
.checkout-note__field { display: none; }
.checkout-note:has(input:checked) .checkout-note__field { display: block; }

/* one field per row, except the pairs the design puts side by side.
   Scoped by :has(> .form-row) so it only touches the fields WooCommerce emits —
   the static page's own .checkout-fields stays the plain column it is. */
.checkout-fields:has(> .form-row) { flex-flow: row wrap; gap: 20px 24px; }
/* `.woocommerce form .form-row` gives every row 3px of padding and 6px of margin
   and outweighs a two-class selector, so the form's own two classes are both
   named here. The gap above is the design's spacing; the rest is WooCommerce
   pushing rows apart on top of it. */
.checkout.woocommerce-checkout .checkout-fields > .form-row { flex: 0 0 100%; margin: 0; padding: 0; }
/* the same weight as the flex: 0 0 100% above, or that rule wins and every
   half quietly renders full width — which it did until 2026-08-03 */
.checkout.woocommerce-checkout .checkout-fields > .form-row.farmula-half {
  flex: 0 0 calc(50% - 12px);
}
/* a half-width field alone on its row: the margin fills the other half, so the
   next field cannot fit beside it and wraps */
.checkout.woocommerce-checkout .checkout-fields > .form-row.farmula-half--alone {
  margin-right: calc(50% - 12px);
}

/* the placeholder is the label, so the label itself is only for screen readers */
.farmula-hide-label > label,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.checkout abbr.required { border: none; text-decoration: none; }

/* Both of the form's classes again, and for the same reason as the rows above:
   `.woocommerce form .form-row .input-text` sets the height, the padding, the
   weight and the border of every field here, and one class more is what settles
   it. Without this the fields render 41px tall with 9px of padding, weight 400
   and WooCommerce's near-black border — which is what they did until 2026-07-31,
   while checkout.html measured a perfect 64px, because on the static page there
   is no woocommerce.css to lose to. */
/* WooCommerce wraps every control in an inline span, whose line box put 6px
   around each field — the rows stood at 70 beside the country's 64 */
.checkout .form-row .woocommerce-input-wrapper { display: block; }
.checkout.woocommerce-checkout .form-row input.input-text,
.checkout.woocommerce-checkout .form-row textarea.input-text {
  display: flex;
  width: 100%;
  height: 64px;
  padding: 0 15px 0 23px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: 4px;
  /* the same 18px .field input carries — see there */
  font-size: 18px;
  font-weight: 500;
  color: var(--dark-grey);
}
/* The note gets WooCommerce's `input-text` class as well, and the rule above
   would otherwise hold it at a single field's height: a class beats an element,
   so `.input-text` there outranks a bare `textarea` here however late it comes.
   Both selectors carry the class for that reason. */
.checkout.woocommerce-checkout .form-row textarea.input-text {
  height: 128px;
  padding: 19px 15px 19px 23px;
  resize: vertical;
}
.checkout .form-row .input-text::placeholder,
.checkout .form-row textarea::placeholder { color: var(--light-grey); }

/* The floating label, WooCommerce edition: the label WooCommerce renders is
   parked off screen while the placeholder does its job, and comes back small
   into the field's upper corner as soon as the field has content — the same
   state the design draws for Land/Region. The un-hiding must outweigh the
   .farmula-hide-label clip rule, which the :has() chain does. */
.checkout .checkout-fields > .form-row,
.checkout .field-group > .form-row { position: relative; }
.checkout .form-row.farmula-hide-label:has(input.input-text:not(:placeholder-shown)) > label {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  left: 24px;
  top: 10px;
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--light-grey);
  pointer-events: none;
}
/* scoped to the placeholder-labelled rows: a field without a placeholder — the
   coupon, say — always counts as "not showing" one and must not shift */
.checkout.woocommerce-checkout .form-row.farmula-hide-label:has(input.input-text:not(:placeholder-shown)) input.input-text {
  padding-top: 22px;
}
.checkout.woocommerce-checkout .form-row.woocommerce-invalid .input-text { border-color: var(--red); }

/* a field with a select carries its label above the value, the way the design
   draws Land/Region — so the box is the row itself, not the control */
/* The form's two classes carry the padding past our own
   .checkout.woocommerce-checkout … .form-row { padding: 0 } — which had been
   zeroing this row's 23px since the wiring, parking the label a pixel off the
   border. Invisible until the floated labels stood beside it. */
.checkout .form-row:has(select),
.checkout.woocommerce-checkout .checkout-fields > .form-row:has(select) {
  position: relative;
  display: flex;
  flex-direction: column;
  /* from the top like the floated labels beside it, not centred: the label at
     10, the value under it at the same height as a filled field's */
  justify-content: flex-start;
  gap: 4px;
  height: 64px;
  /* no right padding: the 55px band under the chevron is the select's own —
     a click there must land on the select to open the picker, a click on the
     row only focuses it */
  padding: 10px 0 0 23px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: 4px;
}
.checkout .form-row:has(select) > label {
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--light-grey);
}
.checkout .form-row:has(select) select {
  appearance: none;
  /* the whole box is the hit area, as in the static edition above — absolute
     over the row, out of WooCommerce's inline wrapper span. The value sits
     33px under the padding edge here, not the static 31: the plugin CSS gives
     the label two more pixels of line. 33 + 26 + 3 = the 62px padding box.
     The 23px left is the design's, replacing WooCommerce's own .5em; the 55px
     right keeps the value clear of the chevron. */
  position: absolute;
  inset: 0;
  padding: 33px 55px 3px 23px;
  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
  color: var(--dark-grey);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
.checkout .form-row:has(select)::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%) scaleY(-1);
  background: url(assets/icon-chevron-up.svg) center / 24px 24px no-repeat;
  pointer-events: none;
}

/* WooCommerce's own checkbox rows, and the legal ones Germanized adds before
   the order button.
   The form's second class is repeated in the selector on purpose. Something in
   the plugin CSS keeps these labels inline at the same weight as a three-class
   selector and, loading later, wins the tie — and an inline label makes its
   checkbox an inline box that ignores width, which is how the AGB box collapsed
   to two pixels. Both classes are really on the form; naming both is what
   settles it. */
.checkout.woocommerce-checkout .form-row .checkbox,
.checkout.woocommerce-checkout .wc-gzd-checkbox-placeholder label,
.checkout .form-row .checkbox,
.checkout .wc-gzd-checkbox-placeholder label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--dark-grey);
  cursor: pointer;
}
.checkout.woocommerce-checkout .form-row .checkbox input[type="checkbox"],
.checkout.woocommerce-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"],
.checkout .form-row .checkbox input[type="checkbox"],
.checkout .wc-gzd-checkbox-placeholder input[type="checkbox"] {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px;
  appearance: none;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  cursor: pointer;
}
.checkout.woocommerce-checkout .form-row .checkbox input[type="checkbox"]:checked,
.checkout.woocommerce-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]:checked,
.checkout .form-row .checkbox input[type="checkbox"]:checked,
.checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]:checked {
  background: var(--green) url(assets/check-white.svg) center / 13.5px 9.81px no-repeat;
}
.checkout a { text-decoration: underline; }
.checkout h2 a,
.checkout .checkout__login,
.checkout .checkout__back { text-decoration: none; }

/* the payment methods and the order button, which core puts in one wrapper */
.checkout #payment { display: flex; flex-direction: column; gap: 40px; }
.checkout .wc_payment_methods { padding: 0; }
.checkout .payment_box {
  margin-top: 8px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--light-blue);
  border-radius: 4px;
  font-size: 16px;
  line-height: 26px;
}
.checkout .payment_box p:last-child { margin-bottom: 0; }
.checkout .place-order { display: flex; flex-direction: column; gap: 20px; margin: 0; }

/* Germanized renders the order button itself; form-checkout.php lifts its block
   out of the order review and prints it at the foot of the card instead */
.checkout .wc-gzd-order-submit { display: flex; flex-direction: column; gap: 20px; }
.checkout .wc-gzd-order-submit .place-order { gap: 20px; }
.checkout .wc-gzd-checkbox-placeholder:empty { display: none; }

/* The promo-code fold (frame 621:379), in the Bestellübersicht between the
   items and the totals. Folded it is one grey line with a chevron; open it is
   the field — floating its label like every other — with the navy Anwenden
   beside it. It replaced WooCommerce's coupon banner over the form. */
.coupon-fold { display: flex; flex-direction: column; gap: 12px; }
.coupon-fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  font-size: 15px;
  line-height: normal;
  color: var(--grey);
}
/* the chevron points down while folded, up while open */
.coupon-fold__head img { transform: scaleY(-1); }
.coupon-fold.is-open .coupon-fold__head img { transform: none; }
.coupon-fold__body { display: flex; gap: 16px; }
.coupon-fold__body[hidden] { display: none; }
.coupon-fold__field { flex: 1; }
.coupon-fold__apply {
  flex: 0 0 160px;
  height: 64px;
  border-radius: 4px;
  background: var(--sea-blue);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.coupon-fold__apply:hover { background: var(--blue); }
/* the apply answer arrives in WooCommerce's notice box; the fold is its box */
.coupon-fold__note:empty { display: none; }
.coupon-fold__note .woocommerce-error,
.coupon-fold__note .woocommerce-message,
.coupon-fold__note .woocommerce-info {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 15px;
  line-height: 20px;
  color: var(--dark-grey);
}
.coupon-fold__note ul { margin: 0; padding: 0; list-style: none; }
.coupon-fold__note .woocommerce-error { color: var(--red); }

/* real product names are longer than the frame's samples: the name wraps, the
   price does not */
.summary__price { white-space: nowrap; }
.summary__name { overflow-wrap: break-word; }

/* ==========================================================================
   Bestellbestätigung — Figma frames "Order Confirmation" (599:7090) and its
   402px counterpart (599:7548), 1728 × 1752. The full nav bar without the menu
   strip, three lilac cards on the left, the two address cards on the right.
   ========================================================================== */

/* the frame mirrors the right-arrow glyph rather than drawing a left one */
.page--confirm .checkout__back img { transform: scaleX(-1); }
/* the checkout underlines its links; nothing in these cards is a text link */
.confirm a { text-decoration: none; }

.confirm__main {
  flex: 0 0 960px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* a lilac slab with the one rounded corner, like the checkout's form card */
.confirm-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--light-blue);
  border-radius: 0 24px 0 0;
}
.confirm-card__lead { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.confirm-card__copy { font-size: 15px; line-height: 20px; color: var(--dark-grey); }

.confirm-facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; }
.confirm-facts div { display: flex; flex-direction: column; gap: 4px; }
.confirm-facts dt {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--grey);
}
.confirm-facts dd { margin: 0; font-size: 15px; color: var(--dark-grey); }

.confirm-order { gap: 40px; }
.confirm-order__table { display: flex; flex-direction: column; gap: 16px; }
.confirm-order__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--blue);
}
.confirm-order__row p { margin: 0; }
.confirm-order__row--item {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--dark-grey);
}
.confirm-order__rule { width: 100%; border: none; border-top: 1px solid var(--light-grey); margin-bottom: -1px; }
.confirm-order__actions { display: flex; gap: 20px; }
.confirm-order__actions .btn { flex: 1; justify-content: center; }
.btn--danger { background: var(--red); }

.confirm-address {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 26px;
  color: var(--blue);
}
.confirm-address p { margin: 0; }

/* Whatever the gateway still needs — bank details for a transfer, a code. It
   writes its own headings and lists into the card, and hands its text over
   inside WooCommerce's own notice box — a grey fill, a coloured top rule and
   an icon before the first line. The design's card is already around it, so
   the inner box is flattened and its type set to the card's. */
.confirm-card--instructions h2,
.confirm-card--instructions h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--blue);
}
.confirm-card--instructions p,
.confirm-card--instructions li {
  font-size: 15px;
  line-height: 20px;
  color: var(--dark-grey);
}
.confirm-card--instructions p { margin: 0; }
.confirm-card--instructions ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.confirm-card--instructions .woocommerce-info,
.confirm-card--instructions .woocommerce-message,
.confirm-card--instructions .woocommerce-notice {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.confirm-card--instructions .woocommerce-info::before,
.confirm-card--instructions .woocommerce-message::before,
.confirm-card--instructions .woocommerce-notice::before { content: none; }

/* The review stays a table so a plugin's <tr> still has one to sit in, but
   without WooCommerce's shop_table class: only the tag was needed, and the class
   brings a grey fill, a border, row rules and cell padding with it. */
.checkout-review__table { width: 100%; border: none; border-collapse: collapse; }
.checkout-review__table,
.checkout-review__table tbody,
.checkout-review__table tr { display: block; }
.checkout-review__table tr,
.checkout-review__table td,
.checkout-review__table th {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-size: inherit;
}
.checkout-review__table tr + tr { margin-top: 16px; }
.checkout-review__table td.summary__row { display: flex; }
.checkout-review__table .summary__img {
  width: 100px;
  height: 100px;
  max-width: none;
  object-fit: cover;
}

/* ==========================================================================
   Blog Article — Figma frames "Blog Article" (459:555) and its 402px mobile
   counterpart (461:1611)
   ========================================================================== */

/* the brochure sits straight on the footer here too */
.page--article .footer { margin-top: 0; }

.article__title {
  margin: 80px var(--page-margin) 0;
  font-size: 60px;
  line-height: normal;
  letter-spacing: -2.4px;
}

/* the piece on the left, who wrote it and where to share it on the right */
.article {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin: 64px var(--page-margin) 0;
}
.article__body { flex: 0 0 960px; display: flex; flex-direction: column; gap: 40px; }
/* height:auto matters — the width/height attributes are presentational hints,
   and an explicit height beats aspect-ratio. Without it the hero keeps its
   637px on every width, which happens to be right at 960 and nowhere else. */
.article__hero {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 637;
  object-fit: cover;
  border-radius: 8px;
}

.article__text { display: flex; flex-direction: column; gap: 24px; }
.article__text p { font-size: 18px; line-height: 26px; }
.article__text h2 { font-size: 28px; line-height: 40px; }
.article__text ul { list-style: disc; padding-left: 20px; font-size: 18px; line-height: 26px; }
/* images inside the running text are wider than they are tall, unlike the hero */
.article__text img {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 532;
  object-fit: cover;
  border-radius: 8px;
}

.article__meta { flex: 0 0 489px; display: flex; flex-direction: column; gap: 32px; }
.article__meta-block { display: flex; flex-direction: column; gap: 12px; }
.article__meta-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--grey);
}
.article__meta-value { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.article__meta-value a:hover { color: var(--green); }

.article__author { display: flex; flex-direction: column; gap: 16px; }
.article__author-row { display: flex; align-items: center; gap: 16px; }
.article__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.article__author-name { display: flex; flex-direction: column; gap: 4px; }
.article__author-title { font-size: 18px; font-weight: 600; line-height: 26px; color: var(--blue); }
.article__author-role { font-size: 16px; font-weight: 500; color: var(--grey); }
.article__author-bio { font-size: 16px; font-weight: 500; }

.article__share { display: flex; align-items: center; gap: 20px; }
.article__share img { width: 32px; height: 32px; }
.article__share a,
.article__copy { display: block; transition: opacity 0.2s ease; }
.article__share a:hover,
.article__copy:hover { opacity: 0.7; }
/* the copy button is the only control here with no destination, so it says so */
.article__copy { position: relative; }
.article__copy.is-copied::after {
  content: "Link kopiert";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--radius-btn);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

/* WordPress wraps content images in a figure; the design has neither caption
   frame nor margin around them */
.article__text figure { margin: 0; }
.article__text figure img { margin: 0; }

/* further reading: the Wissenbank card in a three-column row */
.more { margin: 80px var(--page-margin) 0; }
.more__heading {
  margin-bottom: 40px;
  font-size: 40px;
  line-height: normal;
  letter-spacing: -1.6px;
}
.more__grid { display: grid; grid-template-columns: repeat(3, 490px); gap: 30px; }
.more__grid .article-card__img { height: 278px; }

/* ==========================================================================
   Product Details — Figma frame "Product Details" (401:393), 1728 × 5184
   ========================================================================== */

.page--product .footer { margin-top: 80px; }

.product__name {
  margin: 80px 0 0 var(--page-margin);
  font-size: 60px;
  line-height: normal;
  letter-spacing: -2.4px;
}

/* two columns on a lilac band: the gallery card, and everything you read */
.product {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin-top: 64px;
  padding: 80px var(--page-margin);
  background: var(--light-blue);
}

.product__card {
  /* the anchor for the zoom lens script.js lays over the shot on hover */
  position: relative;
  flex: 0 0 750px;
  padding: 32px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.product__zoom {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
}
.product__photo {
  width: 560px;
  height: 560px;
  margin: 0 auto;
  /* contain, not cover: a product shot cropped to a square loses its lid */
  object-fit: contain;
}

.product__thumbs { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
.product__thumb {
  width: 100px;
  height: 100px;
  padding: 0;
  border: 1px solid var(--light-grey);
  transition: opacity 0.2s ease;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* the frame dims every shot but the one on show */
.product__thumb:not(.is-active) { opacity: 0.4; }
.product__thumb:hover { opacity: 1; }

.product__usps { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.product__checks { display: flex; gap: 40px; }
.product__checks ul { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.product__checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 26px;
}
.product__checks img { flex: 0 0 24px; }

/* Frames 571:2716/571:3050: on the mobile canvas the description folds to its
   first heading and paragraph behind this green toggle. script.js reveals the
   button and adds the class, so without JS everything simply stays open; on
   the desktop canvas neither has any effect. */
.product__more {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--green);
}
.product__more img { transform: scaleY(-1); }
.product__more.is-open img { transform: none; }
/* zero-height stroke in the frame, so it must not add a row of its own */
.product__rule { border: none; border-top: 1px solid var(--divider); margin-bottom: -1px; }

.product__ask,
.product__download {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--green);
}
.product__ask:hover,
.product__download:hover { text-decoration: underline; }

.product__info { flex: 0 0 700px; display: flex; flex-direction: column; gap: 24px; }

/* The WordPress template wraps this row in the add-to-cart form, the static
   page does not, so both carry the layout. */
/* the frame stacks the price, the tax note and then the action row (frame
   647:2731): quantity stepper and the cart button share one line under them */
.product__buy,
.product__buy-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.product__buy-form { width: 100%; }
.product__buy-price { display: flex; flex-direction: column; gap: 8px; }
.product__buy-actions { display: flex; align-items: center; gap: 16px; }
.product__price-row { display: flex; align-items: center; gap: 16px; }
.product__price {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.6px;
  color: var(--blue);
}
/* On sale WooCommerce prints <del> regular </del> <ins> sale </ins>. The frame
   (647:2732) sets the struck regular price the same 40px as the sale price, in
   grey, 8px before it; the sale price keeps the navy and drops the underline
   <ins> carries by default. */
.product__price del {
  margin-right: 8px;
  color: var(--light-grey);
}
.product__price ins { text-decoration: none; }
.product__tax { font-size: 16px; font-weight: 500; color: var(--grey); }

/* the click's acknowledgement while WooCommerce's loading class is on the
   button — the card's ring, in white on the green ground */
/* the frame's buy button is 50px tall to line up with the quantity stepper's
   boxes, where the theme's default button is 58 */
.product__cart { position: relative; padding-top: 12px; padding-bottom: 12px; }
.product__cart.loading { pointer-events: none; color: transparent; }
.product__cart.loading img { opacity: 0; }
.product__cart.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.qty { display: flex; gap: 8px; }
.qty__value {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--blue);
}
.qty__down img { transform: scaleY(-1); }
/* the design's field is a plain box; the stepper beside it does the stepping */
.qty__value { appearance: textfield; -moz-appearance: textfield; }
.qty__value::-webkit-outer-spin-button,
.qty__value::-webkit-inner-spin-button { appearance: none; margin: 0; }

.product__desc { display: flex; flex-direction: column; gap: 24px; }
/* The frame opens the description with one big heading and sets the rest a step
   down. Real descriptions from the shop use <h2> throughout, so the size comes
   from the position rather than the level. */
.product__desc h2,
.product__desc h3 { font-size: 28px; line-height: 40px; letter-spacing: 0; }
.product__desc h2:first-of-type {
  font-size: 40px;
  line-height: normal;
  letter-spacing: -1.6px;
}
.product__desc p { font-size: 18px; line-height: 26px; }
/* Prose lists keep their bullets. Figma stores them as one text node with line
   breaks, which reads in the metadata as though there were none — the rendered
   frame shows the discs, so check the render, not the node. */
.product__desc ul,
.shop-about__text ul { list-style: disc; padding-left: 20px; }
.product__desc ul { font-size: 18px; line-height: 26px; }

/* the spec rows alternate white and half-white, which reads as a stripe over
   the lilac band without needing a second colour */
.product__spec {
  display: flex;
  gap: 40px;
  padding: 8px 16px;
  background: #fff;
  font-size: 18px;
  line-height: 26px;
}
.product__spec:nth-child(even) { background: rgba(255, 255, 255, 0.5); }
.product__spec dt { flex: 0 0 200px; font-weight: 600; }
.product__spec dd { flex: 1; }

/* related products: the home carousel with a heading above it */
/* the related row is the v2 carousel since frame 571:2249; the heading stands
   above the section, which follows 48 under it instead of its usual 64 */
.products__heading {
  margin: 80px 0 0 var(--page-margin);
  font-size: 60px;
  line-height: normal;
  letter-spacing: -2.4px;
}
.products__heading + .products--v2 { margin-top: 48px; }

/* ==========================================================================
   Mobile — Figma frames "Home Mobile" (346:123) and "Menu Open" (376:91)

   The design ships two canvases and nothing between them: 1728px and 402px.
   Above the breakpoint script.js scales the 1728px canvas to the viewport, so
   the fixed-pixel desktop layout holds its proportions down to roughly 900px.
   At 900px it hands over to this block, which drops the absolute positioning
   for normal flow and a 20px page margin, and stays fluid from there down —
   402px is the design width, not a minimum, and phones narrower than that are
   common.

   Only the geometry changes. The type scale, colours, radii and shadows are
   the same tokens as the desktop canvas, except where Figma states otherwise:
   the hero H1 (72 -> 44px), the testimonial quote (48 -> 28px), the section
   headings (60 -> 40px) and the FAQ questions (28 -> 24px).
   ========================================================================== */

@media (max-width: 900px) {

  :root { --page-margin: 20px; }

  .page {
    width: 100%;
    position: relative;
  }

  /* --- nav bar (346:124) — 402 x 170 ------------------------------------ */

  .navbar { height: 170px; }
  .navbar__logo { left: var(--page-margin); top: 32px; }
  .navbar__logo img { width: 160px; height: 50px; }

  /* the three controls hang off the right edge so they stay put on any width */
  .navbar__account,
  .navbar__cart,
  .navbar__menu-btn {
    left: auto;
    top: 35px;
    width: 44px;
    height: 44px;
  }
  .navbar__account { right: 140px; }
  .navbar__cart { right: 80px; }
  .navbar__menu-btn { right: var(--page-margin); }
  .navbar__cart .icon-btn { width: 44px; height: 44px; }
  .navbar__cart-num { left: 26px; }

  .navbar__menu-btn { display: inline-flex; position: absolute; }
  /* stacked so the button keeps one box while the glyphs cross-fade */
  .navbar__menu-btn img { position: absolute; transition: opacity 0.2s ease; }
  .navbar__menu-close { opacity: 0; }
  .is-menu-open .navbar__menu-btn { background: var(--blue); border-color: var(--blue); }
  .is-menu-open .navbar__menu-open { opacity: 0; }
  .is-menu-open .navbar__menu-close { opacity: 1; }

  .navbar__search {
    left: var(--page-margin);
    right: var(--page-margin);
    top: 102px;
    width: auto;
    transition: top 0.25s ease;
  }
  .navbar__info { display: none; }

  /* --- menu open (376:91) — the nav bar grows to 638 -------------------- */

  .is-menu-open .navbar { height: 638px; }
  .is-menu-open .navbar__search { top: 490px; }
  .is-menu-open .navbar__info {
    display: flex;
    left: var(--page-margin);
    right: auto;
    top: 558px;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
  }
  /* the desktop frame upper-cases this span, the Menu Open frame does not */
  .navbar__code { text-transform: none; }

  /* the desktop menu strip becomes the vertical list inside that panel */
  .menu { display: none; }
  /* the panel travels with the nav bar, which is pinned to the top of the
     viewport — hence fixed rather than absolute against the page, which would
     leave the links behind at the document's top once the page is scrolled.
     There is no zoom below the breakpoint, so fixed lands on real pixels. */
  .is-menu-open .menu {
    display: block;
    position: fixed;
    z-index: 21;
    left: var(--page-margin);
    top: calc(var(--sticky-top, 0px) + 106px);
    height: auto;
    background: none;
  }
  .is-menu-open .menu__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: auto;
    padding-left: 0;
  }
  /* the row is as tall as its 16px label; without this the list item's own
     strut makes every row taller and the list grows into the search */
  .is-menu-open .menu__list li { line-height: 20px; }

  /* --- hero (348:345) — 402 x 627 --------------------------------------- */

  .hero { height: 627px; background: #fff; }
  /* the media sits above the copy instead of beside it, and the dark ground
     is a band rather than the angled shape the desktop canvas uses */
  .hero__slide::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* one pixel under the media's 226px edge: on fractional device-pixel
       ratios the two edges round apart and a white hairline of page ground
       shows between video and band (Moritz' phone, 2026-08-06). The band
       slides behind the opaque media instead; same bottom edge. */
    top: 225px;
    height: 364px;
    background: var(--blue);
  }
  .hero__media {
    left: 0;
    right: 0;
    width: 100%;
    height: 226px;
  }
  .hero__shape,
  .hero__product,
  .hero__off { display: none; }

  .hero__content {
    left: var(--page-margin);
    right: var(--page-margin);
    top: 266px;
    width: auto;
  }
  .hero h1 { font-size: 44px; letter-spacing: -1.76px; }
  .hero__lead { font-size: 18px; line-height: 26px; }
  /* the 24px icon sets the button's row height in the frame, not the label */
  .hero .btn--lg { line-height: 24px; }
  .hero__bullets li { font-size: 18px; line-height: 26px; }
  .hero__dots { left: var(--page-margin); top: 533px; }
  .hero__badge { left: auto; right: var(--page-margin); top: 470px; }

  /* --- product carousel (348:331) — one card per view ------------------- */

  .products { height: 610px; margin-top: 20px; }
  /* the viewport is a native scroller here: a swipe is the gesture a touch
     user reaches for, snap keeps a card per view, and the arrows drive
     scrollLeft (script.js). scroll-behavior stays in CSS so a programmatic
     scroll glides — and the tests can turn it off without touching the code */
  .products__viewport {
    width: 100%;
    height: 528px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--page-margin);
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .products__viewport::-webkit-scrollbar { display: none; }
  .products__track { gap: 20px; }
  /* one card, with the page margin left and right of it: the track's padding
     is already outside this percentage, so only one margin is subtracted */
  .product-card {
    flex-basis: calc(100% - var(--page-margin));
    width: auto;
    height: 528px;
    scroll-snap-align: start;
  }
  /* the shot is centred at 240px rather than filling the card's full width */
  .product-card__img {
    left: 50%;
    transform: translateX(-50%);
    top: 24px;
    width: 240px;
    height: 240px;
  }
  .product-card__info { top: 284px; }

  /* The mobile frame (548:1101) draws the v2 card at 362 × 509 — the shot
     centred, the tick rows and the description visible again, the price row
     pinned — with the arrows floating over the shot at the viewport's edges
     under short white fades. */
  .products--v2 { height: 509px; margin-top: 2px; }
  .products--v2 .products__viewport { height: 509px; padding-top: 0; }
  .products--v2 .products__track { padding-left: var(--page-margin); }
  .products--v2 .product-card {
    flex-basis: calc(100% - var(--page-margin));
    width: auto;
    height: 509px;
  }
  .products--v2 .product-card__img {
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    width: 240px;
    height: 240px;
  }
  .products--v2 .product-card__info { left: 20px; right: 20px; top: 272px; bottom: 90px; gap: 12px; }
  .products--v2 .product-card h3 { height: auto; max-height: 72px; }
  .products--v2 .product-card__desc {
    display: -webkit-box;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    max-height: 34px;
  }
  .products--v2 .product-card__ticks { display: flex; }
  .products--v2 .product-card__row { left: 20px; right: 20px; bottom: 20px; }
  /* The fades shrink to short tails behind the arrows. The frame parks both
     over the shot (116px); Moritz wants them on the card's vertical middle
     (2026-08-06) — a documented deviation. */
  .products--v2::before,
  .products--v2::after { top: calc(50% - 25px); bottom: auto; height: 50px; width: 90px; }
  .products--v2 .products__arrows .icon-btn { top: 50%; transform: translateY(-50%); }
  .products--v2 #prevBtn { left: 0; }
  .products--v2 #nextBtn { right: 0; }

  /* --- testimonials (346:202) ------------------------------------------- */

  .testimonials {
    height: auto;
    margin-top: 40px;
    padding: 40px var(--page-margin);
  }
  .testimonials__video {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 266px;
  }
  .testimonials__video > img { width: 100%; height: 266px; }
  .testimonials__play {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .testimonials__body {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: column;
    width: auto;
    margin-top: 32px;
  }
  /* At 28px the light-on-dark bloom that the desktop quote corrects for is
     negligible, and the lighter weight costs a line break: weight 350 fits the
     quote into four lines where the frame sets five. */
  .testimonials blockquote {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1.12px;
    font-weight: 400;
  }
  /* author over button rather than side by side */
  .testimonials__meta { flex-direction: column; align-items: stretch; gap: 28px; }

  /* every button that spans the column centres its label and steps down a
     size; only the hero keeps the desktop 18px/600 (btn--lg) */
  .about .btn,
  .brochure__intro .btn,
  .newsletter__form .btn,
  .testimonials__meta .btn {
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    /* the icon, not the label, sets the row height in the frame */
    line-height: 24px;
  }
  /* Figma aligns strokes to the inside of a frame, so the padding it states
     already contains the 1px stroke. CSS puts the border outside the padding
     box, so every bordered box here takes the border back out of its padding —
     otherwise each one is 2px taller than the frame and the error accumulates
     down the page. */
  .testimonials__meta .btn--ghost { padding: 15px 19px; }

  /* same reason: the frame's separator is a zero-height stroke */
  .testimonials__line { margin-bottom: -1px; }

  /* --- services (348:394) ----------------------------------------------- */

  .services { height: auto; padding: 40px 0; }
  .services__heading { font-size: 40px; letter-spacing: -1.6px; }
  .services__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 32px var(--page-margin) 0;
  }
  /* photo on top, copy underneath */
  .service-card {
    flex-direction: column;
    width: auto;
    height: auto;
    padding-bottom: 40px;
  }
  .service-card__img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  /* the photo now fades downwards into the copy instead of sideways */
  .service-card__img::after {
    background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 50%);
  }
  .service-card h3 { font-size: 28px; line-height: 40px; letter-spacing: 0; }
  .service-card__text { width: auto; margin: 24px 24px 0; }

  /* --- über farmula (348:504) ------------------------------------------- */

  .about {
    height: auto;
    margin: 40px var(--page-margin) 0;
    display: flex;
    flex-direction: column;
  }
  .about__img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 255px;
  }
  .about__text {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    align-items: stretch;
    margin-top: 32px;
  }
  .about h2 { font-size: 40px; letter-spacing: -1.6px; }
  .about__text p { font-size: 20px; line-height: 32px; }

  /* --- broschüre + newsletter (450:481) --------------------------------- */

  /* source order is intro, newsletter, cover; the mobile frame leads with the
     book, so the three blocks are reordered rather than moved in the markup */
  .brochure {
    height: auto;
    margin-top: 40px;
    padding: 40px var(--page-margin);
    display: flex;
    flex-direction: column;
  }
  /* the vector bleeds off the right edge behind the book */
  .brochure__vector { right: -42px; top: -10px; width: 297px; height: 171px; }
  .brochure__cover {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    width: 240px;
    height: 288px;
    margin: 0 auto;
  }
  .brochure__book { width: 240px; height: 287px; }
  .brochure__shadow { left: 66px; top: 281px; width: 106px; height: 7px; }
  .brochure__intro {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    align-items: stretch;
    margin-top: 24px;
  }
  .brochure h2 { font-size: 40px; letter-spacing: -1.6px; }
  /* Every mobile frame draws this paragraph 8 lines tall (256px); the
     browser's DM Sans wraps the same copy into 7, which left every mobile
     page 32px short through the band. The drawn height is reserved instead
     of chasing Figma's line breaks, which no font metric guarantees. */
  .brochure__intro p { font-size: 20px; line-height: 32px; min-height: 256px; }

  .newsletter {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 40px;
    padding: 31px 23px;  /* 32/24 less the 1px border — see above */
  }
  .newsletter__text p { font-size: 20px; line-height: 32px; }
  .newsletter__form { padding: 3px 3px 3px 15px; }
  .newsletter__form input { height: 53px; }
  /* no icon in this one, so the label alone sets the height */
  .newsletter__form .btn { line-height: normal; }

  /* --- FAQ (348:543) ---------------------------------------------------- */

  .faq { margin-top: 40px; }
  .faq__heading { font-size: 40px; line-height: normal; letter-spacing: -1.6px; }
  .faq__list { gap: 32px; margin-top: 64px; }
  .faq__item { padding-top: 32px; }
  .faq__item::before,
  .faq__contact::before { width: 100%; }
  .faq__item summary { align-items: flex-start; gap: 16px; }
  .faq__item summary h3 {
    max-width: none;
    font-size: 24px;
    line-height: 28px;
  }
  /* the answer keeps to the question's column rather than running under the
     toggle: 50px button plus the 16px gap beside it */
  .faq__answer { width: calc(100% - 66px); gap: 32px; padding-top: 24px; }
  .faq__answer p { font-size: 20px; line-height: 32px; }
  .faq__contact { width: auto; margin-top: 32px; }
  .faq__contact::before { top: -32px; }
  .faq__contact p { font-size: 20px; line-height: 32px; }

  /* --- footer (348:612) — one column ------------------------------------ */

  .footer { margin-top: 40px; }
  .footer__main {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px var(--page-margin);
  }
  .footer__col {
    position: static;
    left: auto;
    top: auto;
  }
  .footer__col--brand { display: flex; flex-direction: column; }
  .footer__contact { width: auto; }
  .footer__col ul { width: auto; }
  /* the three blocks of the last column become columns of their own */
  .footer__col--last { display: contents; }

  .footer__bottom { height: 98px; }

  /* --- shop (444:248) and its filter panel (444:1543) ------------------- */

  .page--shop .footer { margin-top: 40px; }

  .breadcrumbs { gap: 8px; margin-top: 24px; }

  /* one column: the head, the category list, the grid and the paging all
     become rows of the same stack, which is what lets the list fold out
     between the sort row and the products */
  .shop {
    height: auto;
    margin-top: 40px;
    padding: 0 var(--page-margin);
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .shop__main { display: contents; }
  .shop__head {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    height: auto;
  }
  .shop__head h1 { letter-spacing: -1.6px; }
  .shop__sort { justify-content: flex-start; gap: 16px; }
  .shop__sort p { display: none; }
  .shop__sort-field { width: auto; flex: 1; }

  .shop__filter-btn { display: inline-flex; width: 48px; height: 48px; }
  .shop__filter-btn img { position: absolute; transition: opacity 0.2s ease; }
  /* the open state has no white chevron asset of its own — it is the sort
     field's chevron inverted and turned to point back up */
  .shop__filter-close { opacity: 0; filter: brightness(0) invert(1); transform: scaleY(-1); }
  .is-filter-open .shop__filter-btn { background: var(--green); border-color: var(--green); }
  .is-filter-open .shop__filter-open { opacity: 0; }
  .is-filter-open .shop__filter-close { opacity: 1; }

  .shop__side {
    order: 2;
    position: static;
    width: auto;
    display: none;
  }
  .is-filter-open .shop__side { display: block; }

  .shop__grid { order: 3; grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
  /* frame 638:887 stacks the cards at their content's height, like the cart's
     cross-sells — the 505px box is the desktop grid's */
  .shop__grid .product-card { height: auto; }
  .pagination { order: 4; margin-top: 0; }
  .pagination__extra { display: none; }

  /* --- das tier im fokus (450:436) -------------------------------------- */

  .shop-about {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 40px;
    padding: 0 var(--page-margin);
  }
  .shop-about__text {
    flex: 0 0 auto;
    width: auto;
  }
  .shop-about__text h2 { font-size: 40px; letter-spacing: -1.6px; }

  .usp {
    flex: 0 0 auto;
    width: auto;
    margin-top: 32px;
    padding: 23px 19px;  /* 24/20 less the 1px border */
  }

  /* text page: one column, the card under the content (the .usp margin above
     provides the gap) */
  .text-page__title { margin-top: 24px; font-size: 40px; letter-spacing: -1.6px; }
  .text-page {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 24px 0 40px;
  }
  .text-page__content { flex: 0 0 auto; width: auto; font-size: 18px; line-height: 28px; }
  .text-page__content h2 { font-size: 28px; }

  /* --- wissenbank (456:48) ---------------------------------------------- */

  /* the sidebar has no room, so the categories become the field in the head;
     there is no fold-out list here, so no filter button either */
  .shop--wissen .shop__side,
  .shop--wissen .shop__filter-btn { display: none; }
  .shop--wissen .shop__sort { display: flex; }
  /* stacked over the category field, 16 to it against the head's 24 */
  .wissen__search { width: auto; margin-bottom: -8px; }

  .wissen__grid { order: 3; grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
  .article-card__img { height: 200px; }
  .article-card .btn { align-self: stretch; justify-content: center; }

  .shop-about--wissen { min-height: 0; }
  .shop-about--wissen .usp { align-self: auto; }

  /* --- warenkorb (475:890) ---------------------------------------------- */

  .page--cart .footer { margin-top: 40px; }

  /* the title row stacks: title, then the back link, then the items */
  .cart__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 40px var(--page-margin) 0;
  }
  .cart__title { font-size: 40px; letter-spacing: -1.6px; }

  /* One column, and the suggestions move behind the summary boxes — which they
     cannot do from inside the left column, so it steps out of the way and the
     four blocks are ordered directly. */
  .cart {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin: 24px var(--page-margin) 0;
  }
  /* The form only exists in the WordPress template, where it wraps the items so
     a quantity change can post itself. It must not become a stacking step
     between .cart and .cart__items, or the ordering below has nothing to sort. */
  .cart__main,
  .cart__form { display: contents; }
  .cart__side { flex: 0 0 auto; width: auto; order: 3; }
  .cart__items { order: 1; }

  /* The mobile item card (571:3895) puts the photo and the price side by side
     and the name, the stepper and the delete link below, which the desktop
     nesting cannot do — so the wrappers step out of the way and the children
     wrap into rows themselves. 20/32 padding less the border. */
  .cart-item { flex-wrap: wrap; align-items: center; padding: 32px 20px; }
  .cart-item__body,
  .cart-item__text { display: contents; }
  .page .cart-item__img { order: 1; flex: 0 0 128px; width: 128px; height: 128px; margin-bottom: 24px; }
  .cart-item__price { order: 2; margin-bottom: 24px; }
  .cart-item h2 { order: 3; flex: 1 0 100%; margin-bottom: 16px; }
  .cart-item__qty { order: 4; flex: 1 0 100%; margin-bottom: 16px; }
  .cart-item__delete { order: 5; }

  .cart-box { padding: 31px 19px; }
  .cart-box__head img { flex: 0 0 40px; width: 40px; height: 40px; }
  .cart-box__pay { gap: 16px; }
  .cart-box__tile { width: 96px; height: 42px; }

  /* the column's own 24px gap supplies the rest of the frame's 40 */
  .suggest { order: 4; margin-top: 16px; }
  .suggest__heading { font-size: 40px; letter-spacing: -1.6px; }
  .suggest__grid { grid-template-columns: 1fr; gap: 20px; }
  /* full width, following its content — the frame's stacked cards each take
     their own height — with the shot centred */
  .suggest__grid .product-card { width: auto; height: auto; }
  .suggest__grid .product-card__img { align-self: center; }
  .suggest__grid .product-card__info { flex: 0 0 auto; }
  .suggest__grid .product-card__row { margin-top: 20px; }

  /* --- bestellbestätigung (599:7548) ------------------------------------- */

  /* the columns stack; the back link stays, 32 under the slim bar */
  .confirm { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 24px; }
  .confirm__main { flex: 0 0 auto; }
  .confirm .checkout__side { flex: 0 0 auto; width: auto; }
  .confirm-card { padding: 24px 20px; }
  /* the lead keeps 20px to what follows; everything else stays at the 16 */
  .confirm-card__lead { margin-bottom: 4px; }
  .confirm-order { gap: 20px; }
  /* the address boxes breathe a little wider here than the checkout's do */
  .page--confirm .checkout__side .cart-box { gap: 24px; }
  /* the fact columns stack, one under the other */
  .confirm-facts { flex-direction: column; gap: 16px; }
  /* a total wraps onto two lines, label over value; the head and item rows
     stay side by side, an item's name being the part that wraps */
  .confirm-order__row--total { flex-direction: column; gap: 4px; }
  .confirm-order__row--item p:first-child { max-width: 244px; }
  .confirm-order__actions { flex-direction: column; gap: 16px; }

  /* --- bestellung (487:430) --------------------------------------------- */

  /* the slim bar keeps its full-size logo: there is no search or cart beside
     it competing for the row, so it does not have to shrink the way the
     ordinary nav bar does */
  .navbar--slim { height: 104px; }
  .navbar--slim .navbar__logo { top: 20px; }
  .navbar--slim .navbar__logo img { width: 203px; height: 64px; }

  .page--checkout .footer { margin-top: 40px; }
  .footer--slim .footer__main { height: auto; gap: 32px; }
  .footer__legal { flex-direction: column; gap: 24px; }
  .footer--slim .footer__bottom {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px var(--page-margin);
  }
  .footer--slim .footer__bottom-text { gap: 16px; margin-top: 0; }

  .checkout__back { margin-top: 32px; }

  .checkout__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 40px;
  }
  .checkout__head h1 { font-size: 32px; letter-spacing: -1.28px; }

  /* the summary comes first here: on one column the totals are what the
     visitor wants to see before working through the form */
  .checkout {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin: 24px var(--page-margin) 0;
  }
  .checkout__form,
  .checkout__side { flex: 0 0 auto; width: auto; }
  .checkout__side { order: 1; }
  .checkout__form { order: 2; gap: 24px; padding: 24px 20px; }

  .checkout__side .cart-box { padding: 23px 19px; gap: 20px; }
  /* the ordinary mobile summary box drops its icon to 40px; this one keeps 48 */
  .checkout__side .cart-box__head img { flex: 0 0 48px; width: 48px; height: 48px; }
  .cart-box--sum { gap: 4px; }

  /* the price moves above the name instead of sitting off to the right, so the
     row becomes a grid with the photo spanning both of its rows */
  .summary__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
  }
  /* the review's row is a <td>, which the desktop rule above sets to flex */
  .checkout-review__table td.summary__row { display: grid; }
  .summary__img { grid-area: 1 / 1 / 3 / 2; }
  .summary__price { grid-area: 1 / 2 / 2 / 3; }
  .summary__text { grid-area: 2 / 2 / 3 / 3; }
  .summary__price {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
  }

  .checkout-total__row .checkout-total__value { font-size: 28px; line-height: 40px; letter-spacing: 0; }

  /* "Anmelden" has no room beside the heading here */
  .checkout-block__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* the pairs stack, so the halves go back to their own height instead of
     splitting the row between them */
  .checkout-fields__row { flex-direction: column; gap: 20px; }
  .checkout-fields__row .field { flex: 0 0 64px; }

  .choice__label { font-size: 16px; line-height: normal; }
  .choice__logo--wide { width: 48px; height: 7px; }

  .checkout__submit { max-width: none; }

  /* WooCommerce's fields: the pairs stack here too */
  .checkout.woocommerce-checkout .checkout-fields > .form-row.farmula-half { flex: 0 0 100%; }
  .checkout.woocommerce-checkout .checkout-fields > .form-row.farmula-half--alone { margin-right: 0; }
  .field--half { width: 100%; }
  .checkout .field-group { width: auto; }
  .checkout .woocommerce-shipping-fields,
  .checkout .woocommerce-additional-fields { margin-top: -4px; }

  /* --- blog article (461:1611) ------------------------------------------ */

  .page--article .footer { margin-top: 0; }

  .article__title {
    margin: 40px var(--page-margin) 0;
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  /* who wrote it moves above the piece, with a rule between the two */
  .article {
    flex-direction: column;
    gap: 24px;
    margin: 40px var(--page-margin) 0;
  }
  .article__meta { order: -1; flex: 0 0 auto; gap: 24px; }
  /* the column's own gap already spaces this off the last block, so it adds
     none of its own; the negative margin keeps it a zero-height stroke */
  .article__meta::after {
    content: "";
    display: block;
    margin-bottom: -1px;
    border-top: 1px solid var(--divider);
  }
  .article__body { flex: 0 0 auto; gap: 24px; }

  .more { margin: 40px var(--page-margin) 0; }
  .more__heading { margin-bottom: 24px; font-size: 40px; letter-spacing: -1.6px; }
  .more__grid { grid-template-columns: 1fr; gap: 20px; }
  .more__grid .article-card__img { height: 200px; }

  /* --- product details (444:1895) --------------------------------------- */

  .page--product .footer { margin-top: 40px; }

  /* three crumbs do not fit on one line at this width, so the frame wraps
     the product's own name onto a second */
  .breadcrumbs { flex-wrap: wrap; row-gap: 8px; }

  .product__name {
    margin: 40px var(--page-margin) 0;
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  /* one column: the gallery card, then the price, then everything you read */
  .product {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
    padding: 32px var(--page-margin);
  }

  .product__card { flex: 0 0 auto; width: auto; padding: 24px; }
  .product__photo { width: 240px; height: 240px; }
  .product__thumbs { gap: 16px; margin-top: 20px; }
  .product__thumb { width: 80px; height: 80px; }

  .product__usps { gap: 16px; margin-top: 16px; }
  /* the two check columns stack rather than halving an already narrow line */

  .product__info { flex: 0 0 auto; width: auto; }

  /* The mobile frame arranges the buy box differently from the desktop one:
     the price and the stepper share the top row, the tax note sits under the
     price, and the button spans the full width below. The desktop DOM groups
     price+tax and stepper+button, so on mobile the two wrappers go display:
     contents and their children are placed straight into one grid. */
  /* frame 647:2874: the price stays 40px on mobile, so it can no longer share a
     row with the stepper. Everything stacks in one column — price, tax note,
     stepper, then the full-width button. */
  .product__buy { display: block; }
  .product__buy-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "price"
      "tax"
      "qty"
      "cart";
    row-gap: 8px;
  }
  .product__buy-price,
  .product__buy-actions { display: contents; }
  .product__price { grid-area: price; }
  .product__tax { grid-area: tax; }
  .qty { grid-area: qty; }
  .product__cart { grid-area: cart; justify-content: center; margin-top: 8px; }
  /* the variable/grouped fallback keeps its own stacked price row */
  .product__price-row { justify-content: space-between; gap: 16px; }

  .product__desc h2:first-of-type { font-size: 40px; }

  /* the label sits above its value instead of beside it: a 200px label column
     would leave barely a third of the line for the value */
  .product__spec { flex-direction: column; gap: 8px; }
  .product__spec dt { flex: 0 0 auto; }

  /* related products: the v2 mobile carousel, plus the heading the desktop
     frame gives it — see the README for why it is kept here. */
  .products__heading {
    margin: 40px 0 0 var(--page-margin);
    font-size: 40px;
    letter-spacing: -1.6px;
  }
  .products__heading + .products--v2 { margin-top: 24px; }

  /* the compact tick list of frame 571:3050: one column, 16px checks */
  .product__checks { flex-direction: column; gap: 8px; }
  .product__checks ul { gap: 8px; }
  .product__checks li { font-size: 15px; line-height: 20px; }
  .product__checks img { flex: 0 0 16px; width: 16px; height: 16px; }

  /* the description folds behind the toggle; the section's own gap is the 24 */
  .product__more:not([hidden]) { display: flex; }
  .product__desc.is-collapsed > *:nth-child(n+3) { display: none; }
}

/* ============================================================================
   COMPACTION LAYER — 2026-08-11
   Trial reduction of the type scale, spacing and radii across the redesign, to
   test a tighter density (measured against agrar-fachversand). Reversible: this
   whole block is additive and overrides only. Delete from here to end-of-file
   to restore the original sizes. Tracking follows -4% of the new size; heading
   line-heights tighten toward ~1.2.
   ========================================================================== */
:root { --radius-card: 16px; }

/* display headings, desktop */
.hero h1 { font-size: 48px; letter-spacing: -1.92px; }
.about h2, .brochure h2, .faq__heading, .services__heading,
.shop-about__text h2, .text-page__title, .cart__title,
.article__title, .product__name, .products__heading { font-size: 40px; letter-spacing: -1.6px; }
.testimonials blockquote { font-size: 34px; }
.service-card h3, .shop__head h1, .cart-item__total, .cart-box__total-row p,
.suggest__heading, .checkout__head h1, .checkout-total__row .checkout-total__value,
.more__heading, .product__price, .product__desc h2:first-of-type { font-size: 28px; letter-spacing: -1.12px; }
.text-page__content h2 { font-size: 26px; letter-spacing: -1.04px; }
.product-card h3, .newsletter h3, .faq__item summary h3, .faq__contact h3,
.footer__col h3, .article-card h2, .cart-item h2, .checkout-block h2,
.checkout-total__row p, .article__text h2, .product__desc h3 { font-size: 22px; line-height: 30px; }

/* box headings */
.cart-box__head h2 { font-size: 20px; line-height: 28px; }

/* spacing + radius */
.products, .about, .faq, .shop, .suggest, .page--shop .footer { margin-top: 48px; }
.cart { gap: 48px; }
.cart__head { margin-top: 48px; }
.cart__side { gap: 16px; }
.cart-box { padding: 23px; }

@media (max-width: 900px) {
  .hero h1 { font-size: 32px; letter-spacing: -1.28px; }
  .services__heading, .about h2, .brochure h2, .faq__heading, .shop-about__text h2,
  .text-page__title, .cart__title, .suggest__heading, .article__title, .more__heading,
  .product__name, .product__desc h2:first-of-type, .products__heading { font-size: 30px; letter-spacing: -1.2px; }
  .checkout__head h1 { font-size: 26px; letter-spacing: -1.04px; }
  .service-card h3, .text-page__content h2, .checkout-total__row .checkout-total__value { font-size: 22px; }
  .cart { gap: 32px; }
  .cart-box { padding: 23px 19px; }
}
/* ===================== end COMPACTION LAYER ===================== */