/* /assets/frootbox/theme-base/assets/reset.css */
@layer reset {
/*
 * A small reset in the layer "reset". A child theme with a framework that
 * brings its own, e.g. Bootstrap's Reboot, replaces this file with an
 * empty one of the same name (decision 0167).
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; min-block-size: 100vh; }
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, figure, pre) { margin: 0; }
:is(img, picture, svg, video, canvas) { display: block; max-inline-size: 100%; block-size: auto; }
:is(input, button, textarea, select) { font: inherit; color: inherit; }
:is(p, li, figcaption, blockquote) { overflow-wrap: break-word; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

}
/* /assets/frootbox/core/assets/external.css */
@layer base {
/*
 * SPDX-License-Identifier: MIT
 */

/* Content of other providers behind a placeholder, the privacy settings
   and the banner (decisions 0224, 0264). Neutral on purpose: themes style
   .external__notice, .privacy-settings and .consent-banner and their
   parts, or override the partials in partials/consent/. */

fb-external {
    display: block;
}

.external__notice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75em;
    aspect-ratio: var(--external-ratio, auto);
    padding: 1.25em;
    border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
    border-radius: 0.5em;
}

.external__notice p {
    margin: 0;
}

.external__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em 1.25em;
}

.external__actions[hidden] {
    display: none;
}

.external__button,
.privacy-settings__button,
.privacy-settings__done,
.consent-banner__button {
    font: inherit;
    cursor: pointer;
}

.external__always,
.privacy-settings__services label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

fb-external[loaded] > iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--external-ratio, 16 / 9);
    border: 0;
}

.privacy-settings__dialog {
    max-inline-size: min(36rem, 100% - 2rem);
}

.privacy-settings__title {
    font-weight: bold;
}

.privacy-settings__services {
    display: grid;
    gap: 0.5em;
    padding: 0;
    list-style: none;
}

.privacy-settings__group {
    margin: 0 0 1em;
    padding: 0;
    border: 0;
}

.privacy-settings__group[hidden] {
    display: none;
}

.privacy-settings__purpose {
    padding: 0;
    font-weight: bold;
}

/* Only when the theme has no button of its own. */
.privacy-settings--floating .privacy-settings__button {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
    z-index: 1000;
}

.consent-banner {
    position: fixed;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    z-index: 1000;
    display: block;
    max-inline-size: 40rem;
    max-block-size: calc(100dvh - 2rem);
    overflow: auto;
    margin-inline: auto;
    padding: 1.25em;
    border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
    border-radius: 0.5em;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 0.5em 2em color-mix(in srgb, CanvasText 20%, transparent);
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner__title {
    margin: 0;
    font-weight: bold;
}

.consent-banner__services {
    padding-inline-start: 1.25em;
}

.consent-banner__services [hidden] {
    display: none;
}

/* The three choices weigh the same: one look, one size. */
.consent-banner__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 0.75em;
}

}
/* /assets/frootbox/theme-base/assets/base.css */
@layer base {
/*
 * Typography, links, focus and forms in the layer "base", all from the
 * tokens (decision 0162). Blocks build on it, but do not need it.
 */
html { scroll-padding-block-start: calc(var(--base-sticky-top, 0px) + var(--space-2xl)); }
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--size-m);
  -webkit-font-smoothing: antialiased;
}

/* Again at content of another language, so it takes the fonts of its script (decision 0159). */
body, :where([lang]) { font-family: var(--font-body); line-height: var(--leading-body); }

/* The level of a heading follows from where it stands; it looks like its rank or its class (decision 0129). */
:is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-size: inherit; line-height: var(--leading-heading); text-wrap: balance; }
:where([data-rank="1"]) { font-size: var(--size-3xl); }
:where([data-rank="2"]) { font-size: var(--size-xl); }
:where([data-rank="3"]) { font-size: var(--size-l); }
:where([data-rank="4"], [data-rank="5"], [data-rank="6"]) { font-size: var(--size-m); }
p, li { text-wrap: pretty; }
small { font-size: var(--size-s); }
:is(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: 0.92em; }
/*
 * Code from rich text and modules: a light box on any background. Long
 * lines wrap instead of scrolling, so nothing runs out of the column and
 * no box needs the keyboard focus to be read.
 */
pre {
  padding: var(--space-xs) var(--space-s);
  border-radius: calc(var(--radius) / 2);
  background: color-mix(in srgb, currentColor 7%, transparent);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
pre code { font-size: inherit; }
:not(pre) > code { padding: 0.1em 0.3em; border-radius: calc(var(--radius) / 4); background: color-mix(in srgb, currentColor 8%, transparent); overflow-wrap: anywhere; }

a { color: var(--color-primary); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }

/* Always visible for the keyboard, never for the mouse (WCAG 2.2 AA). */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

::selection { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }

hr { border: 0; border-block-start: var(--border); margin-block: var(--space-l); }

:is(input, textarea, select) {
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border);
  border-color: var(--color-muted);
  border-radius: calc(var(--radius) / 2);
  background: var(--color-bg);
}
button { cursor: pointer; }

/* The button to load content of another provider and the three equal
   choices of the banner (decision 0264), on every surface. */
.external__button,
.consent-banner__button {
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border: 0;
  border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 2px currentColor;
  background: transparent;
  font-weight: 600;
}
.external__button:hover,
.consent-banner__button:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.consent-banner {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

/* The link to skip to the content, shown when it has the focus. */
.base-skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 10;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius);
  background: var(--color-dark);
  color: var(--color-bg);
  translate: 0 -200%;
}
.base-skip-link:focus { translate: 0; }

}
/* /assets/kakteenberghaus/theme/layouts/Content/assets/content.css */
@layer layouts {
/*
 * What all blocks of this theme share, in the layer of layouts below the
 * blocks: text, links, headings with the yellow words below them, the
 * button and the space between blocks, after Frootbox 1 (Bootstrap 4,
 * body 20/28px, h1 75/85px uppercase, h2 50px centred).
 */

body { font-size: 20px; line-height: 28px; color: var(--color-text); background: var(--color-bg); }
/* Headings are in the font of the text as in Frootbox 1; the font for headings, Nunito, is only for the navigation. */
:is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-body); }
:is(h1, h2, h3, h4, h5, h6, p, li) { text-wrap: wrap; }
p { margin-block: 0 1rem; }
a { color: var(--color-text); text-decoration: none; transition: color 0.5s; }
a:hover { color: var(--color-primary); text-decoration: none; }
.kb-prose p a { color: var(--color-primary); }
.kb-prose p a:hover { color: var(--color-text); }

/*
 * The heading of a block looks like h2 of Frootbox 1, centred; the first
 * one of a page (its h1) large, in capitals and on the left. Headings in
 * text step down by rank, as h4 there.
 */
.kb-title { margin: 0 0 40px; font-size: 50px; font-weight: 700; line-height: 1.2; text-align: center; }
h1.kb-title { margin-block-end: 60px; font-size: 35px; line-height: 45px; text-align: start; text-transform: uppercase; }
@media (min-width: 48rem) {
  h1.kb-title { font-size: 75px; line-height: 85px; }
}
.kb-head:has(.kb-subtitle:not(:empty)) .kb-title { margin-block-end: 0; }
.kb-head--center { text-align: center; }

/* The words below a heading: yellow capitals, wide apart. */
.kb-subtitle { margin: 0 0 40px; padding-block-start: 10px; color: var(--color-primary); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.kb-subtitle:empty { display: none; }
.kb-head:has(h1) .kb-subtitle { margin-block-end: 60px; font-size: 20px; line-height: 26px; text-align: start; }
@media (min-width: 48rem) {
  .kb-head:has(h1) .kb-subtitle { font-size: 36px; line-height: 36px; }
}

.kb-prose :is(h1, h2, h3, h4, h5, h6) { margin-block: 30px 20px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.kb-prose > :first-child { margin-block-start: 0; }
.kb-prose > :last-child, .kb-prose > :last-child > :last-child { margin-block-end: 0; }

/* The yellow button with green text. */
.kb-button {
  display: inline-block;
  vertical-align: middle;
  padding: 0.375rem 40px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700; /* FB1 asks for 600 but only loads 400 and 700 */
  line-height: 1.5;
  transition: background-color 0.15s, border-color 0.15s;
}
.kb-button:hover { border-color: #bdb300; background: #bdb300; color: var(--color-primary-contrast); }
.kb-icon { inline-size: 1em; block-size: 1em; flex: none; }

/*
 * Each block keeps 100px above it, 50px on small screens, as the space of
 * Frootbox 1. Without a banner on top the page keeps the room of the head.
 */
.kb-page { --kb-space: 50px; padding-block-start: 120px; }
@media (min-width: 48rem) {
  .kb-page { --kb-space: 100px; padding-block-start: 220px; }
}
.kb-page:has(> .kb-banner:first-child) { padding-block-start: 0; }
/* With both classes, to win over the space of the base theme in the same layer. */
.kb-page.base-page > :where(:not(.base-full)) { padding-block: var(--kb-space) 0; }
.kb-page.base-page > :first-child, .kb-page.base-page > .kb-banner + * { padding-block-start: 0; }
.kb-page.base-page > .kb-banner { padding: 0; }
.kb-page.base-page > .kb-breaker { padding-block: var(--kb-space) 0; }

}
/* /assets/frootbox/theme-base/assets/layouts.css */
@layer layouts {
/*
 * Building blocks for layouts and child themes in the layer "layouts"
 * (decision 0167). Everything starts with "base-", so nothing meets the
 * classes of a framework. No block of the library needs them.
 *
 *   base-visually-hidden    there for screen readers only
 *   base-wrap               the width of the content, centred; --narrow, --wide
 *   base-stack              one below the other with a gap; --s, --l
 *   base-cluster            in a row, wrapping; --s, --l
 *   base-page               the page in named widths: children take the
 *                           content width, base-narrow, base-wide and
 *                           base-full the others
 *   base-grid               12 columns that follow the room they get, not the
 *                           screen: base-span-6, base-span-m-4, base-start-l-2
 *                           (s from 30rem, m from 48rem, l from 64rem)
 *   base-auto-grid          as many columns as fit, at least --base-min wide
 *   base-subgrid            takes the rows of the grid around it, e.g. for
 *                           cards with their buttons on one line
 */
.base-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.base-wrap { inline-size: min(100% - 2 * var(--gutter), var(--width)); margin-inline: auto; }
.base-wrap--narrow { inline-size: min(100% - 2 * var(--gutter), var(--width-narrow)); }
.base-wrap--wide { inline-size: min(100% - 2 * var(--gutter), var(--width-wide)); }

.base-stack { display: flex; flex-direction: column; gap: var(--base-gap, var(--space-m)); }
.base-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--base-gap, var(--space-s)); }
:is(.base-stack, .base-cluster).base--s { --base-gap: var(--space-2xs); }
:is(.base-stack, .base-cluster).base--l { --base-gap: var(--space-xl); }

/* Head and link below of blocks with a list (decision 0192): eyebrow, heading, introduction. */
.base-head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.base-head > :is(h1, h2, h3, h4, h5, h6) { margin: 0; }
.base-head__eyebrow { margin: 0; color: var(--color-primary); font-size: var(--size-s); font-weight: 700; }
.base-head__eyebrow:dir(ltr) { text-transform: uppercase; letter-spacing: 0.12em; }
.base-head__intro { margin: 0; max-inline-size: var(--width-narrow); color: var(--color-muted); font-size: var(--size-l); }
.base-more { margin: 0; }
.base-more a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: 600;
  text-decoration: none;
}
.base-more a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

/*
 * Narrow, content, wide and full by named lines; each width as wide as it
 * can be, the gutters shrink last. Narrow never exceeds the content and
 * wide never falls below it, even when a theme makes the content narrower
 * than the narrow width.
 */
.base-page {
  --base-room: (100% - 2 * var(--gutter));
  --base-content: min(var(--width), var(--base-room));
  --base-narrow: min(var(--width-narrow), var(--base-content));
  --base-wide: max(min(var(--width-wide), var(--base-room)), var(--base-content));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] calc((var(--base-wide) - var(--base-content)) / 2)
    [content-start] calc((var(--base-content) - var(--base-narrow)) / 2)
    [narrow-start] var(--base-narrow)
    [narrow-end] calc((var(--base-content) - var(--base-narrow)) / 2)
    [content-end] calc((var(--base-wide) - var(--base-content)) / 2)
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.base-page > * { grid-column: content; }
.base-page > .base-narrow { grid-column: narrow; }
.base-page > .base-wide { grid-column: wide; }
.base-page > .base-full { grid-column: full; }
/* Room between blocks of the main area; full-width ones such as the section bring their own. */
.base-page > :where(:not(.base-full)) { padding-block: calc(var(--space) / 2); }

.base-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--base-gap, var(--space-m));
}
.base-grid > * { grid-column: 1 / -1; }
.base-span-1 { grid-column: span 1 / span 1; }
.base-span-2 { grid-column: span 2 / span 2; }
.base-span-3 { grid-column: span 3 / span 3; }
.base-span-4 { grid-column: span 4 / span 4; }
.base-span-5 { grid-column: span 5 / span 5; }
.base-span-6 { grid-column: span 6 / span 6; }
.base-span-7 { grid-column: span 7 / span 7; }
.base-span-8 { grid-column: span 8 / span 8; }
.base-span-9 { grid-column: span 9 / span 9; }
.base-span-10 { grid-column: span 10 / span 10; }
.base-span-11 { grid-column: span 11 / span 11; }
.base-span-12 { grid-column: span 12 / span 12; }
.base-start-1 { grid-column-start: 1; }
.base-start-2 { grid-column-start: 2; }
.base-start-3 { grid-column-start: 3; }
.base-start-4 { grid-column-start: 4; }
.base-start-5 { grid-column-start: 5; }
.base-start-6 { grid-column-start: 6; }
.base-start-7 { grid-column-start: 7; }
.base-start-8 { grid-column-start: 8; }
.base-start-9 { grid-column-start: 9; }
.base-start-10 { grid-column-start: 10; }
.base-start-11 { grid-column-start: 11; }
.base-start-12 { grid-column-start: 12; }
@container (min-width: 30rem) {
  .base-span-s-1 { grid-column: span 1 / span 1; }
  .base-span-s-2 { grid-column: span 2 / span 2; }
  .base-span-s-3 { grid-column: span 3 / span 3; }
  .base-span-s-4 { grid-column: span 4 / span 4; }
  .base-span-s-5 { grid-column: span 5 / span 5; }
  .base-span-s-6 { grid-column: span 6 / span 6; }
  .base-span-s-7 { grid-column: span 7 / span 7; }
  .base-span-s-8 { grid-column: span 8 / span 8; }
  .base-span-s-9 { grid-column: span 9 / span 9; }
  .base-span-s-10 { grid-column: span 10 / span 10; }
  .base-span-s-11 { grid-column: span 11 / span 11; }
  .base-span-s-12 { grid-column: span 12 / span 12; }
  .base-start-s-1 { grid-column-start: 1; }
  .base-start-s-2 { grid-column-start: 2; }
  .base-start-s-3 { grid-column-start: 3; }
  .base-start-s-4 { grid-column-start: 4; }
  .base-start-s-5 { grid-column-start: 5; }
  .base-start-s-6 { grid-column-start: 6; }
  .base-start-s-7 { grid-column-start: 7; }
  .base-start-s-8 { grid-column-start: 8; }
  .base-start-s-9 { grid-column-start: 9; }
  .base-start-s-10 { grid-column-start: 10; }
  .base-start-s-11 { grid-column-start: 11; }
  .base-start-s-12 { grid-column-start: 12; }
}
@container (min-width: 48rem) {
  .base-span-m-1 { grid-column: span 1 / span 1; }
  .base-span-m-2 { grid-column: span 2 / span 2; }
  .base-span-m-3 { grid-column: span 3 / span 3; }
  .base-span-m-4 { grid-column: span 4 / span 4; }
  .base-span-m-5 { grid-column: span 5 / span 5; }
  .base-span-m-6 { grid-column: span 6 / span 6; }
  .base-span-m-7 { grid-column: span 7 / span 7; }
  .base-span-m-8 { grid-column: span 8 / span 8; }
  .base-span-m-9 { grid-column: span 9 / span 9; }
  .base-span-m-10 { grid-column: span 10 / span 10; }
  .base-span-m-11 { grid-column: span 11 / span 11; }
  .base-span-m-12 { grid-column: span 12 / span 12; }
  .base-start-m-1 { grid-column-start: 1; }
  .base-start-m-2 { grid-column-start: 2; }
  .base-start-m-3 { grid-column-start: 3; }
  .base-start-m-4 { grid-column-start: 4; }
  .base-start-m-5 { grid-column-start: 5; }
  .base-start-m-6 { grid-column-start: 6; }
  .base-start-m-7 { grid-column-start: 7; }
  .base-start-m-8 { grid-column-start: 8; }
  .base-start-m-9 { grid-column-start: 9; }
  .base-start-m-10 { grid-column-start: 10; }
  .base-start-m-11 { grid-column-start: 11; }
  .base-start-m-12 { grid-column-start: 12; }
}
@container (min-width: 64rem) {
  .base-span-l-1 { grid-column: span 1 / span 1; }
  .base-span-l-2 { grid-column: span 2 / span 2; }
  .base-span-l-3 { grid-column: span 3 / span 3; }
  .base-span-l-4 { grid-column: span 4 / span 4; }
  .base-span-l-5 { grid-column: span 5 / span 5; }
  .base-span-l-6 { grid-column: span 6 / span 6; }
  .base-span-l-7 { grid-column: span 7 / span 7; }
  .base-span-l-8 { grid-column: span 8 / span 8; }
  .base-span-l-9 { grid-column: span 9 / span 9; }
  .base-span-l-10 { grid-column: span 10 / span 10; }
  .base-span-l-11 { grid-column: span 11 / span 11; }
  .base-span-l-12 { grid-column: span 12 / span 12; }
  .base-start-l-1 { grid-column-start: 1; }
  .base-start-l-2 { grid-column-start: 2; }
  .base-start-l-3 { grid-column-start: 3; }
  .base-start-l-4 { grid-column-start: 4; }
  .base-start-l-5 { grid-column-start: 5; }
  .base-start-l-6 { grid-column-start: 6; }
  .base-start-l-7 { grid-column-start: 7; }
  .base-start-l-8 { grid-column-start: 8; }
  .base-start-l-9 { grid-column-start: 9; }
  .base-start-l-10 { grid-column-start: 10; }
  .base-start-l-11 { grid-column-start: 11; }
  .base-start-l-12 { grid-column-start: 12; }
}

.base-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--base-min, 16rem), 100%), 1fr));
  gap: var(--base-gap, var(--space-m));
}
.base-subgrid { display: grid; grid-row: span var(--base-rows, 3); grid-template-rows: subgrid; row-gap: var(--space-xs); }

}
/* /assets/kakteenberghaus/theme/blocks/Banner/assets/banner.css */
@layer blocks {
/*
 * The image lies behind the head at the top of the page, 560px high at
 * most and as wide as the screen, as the background of the page in
 * Frootbox 1. The block itself only keeps the room for the head: 120px
 * on small screens (300px when large), 220, 350 or 600px from 48rem.
 */
.kb-banner { block-size: 120px; }
.kb-banner--large { block-size: 300px; }
@media (min-width: 48rem) {
  .kb-banner { block-size: 220px; }
  .kb-banner--medium { block-size: 350px; }
  .kb-banner--large { block-size: 600px; }
}
.kb-banner__image {
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-inline: 0;
  max-block-size: 560px;
  overflow: hidden;
}
.kb-banner__image :is(picture, img) { display: block; inline-size: 100%; block-size: auto; }

}
/* /assets/frootbox/shop/blocks/Catalog/assets/catalog.css */
@layer blocks {
/* SPDX-License-Identifier: MIT */
/* The catalog of the shop module. Values come from the tokens of the theme, with fallbacks. */
.shop-catalog, .shop-product { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-m, 1.5rem); }
.shop-catalog__title, .shop-product__title { margin: 0; }
.shop-catalog__intro { margin: 0; }
.shop-catalog__text:empty { display: none; }
.shop-catalog__text > :first-child { margin-block-start: 0; }
.shop-catalog__text > :last-child { margin-block-end: 0; }
.shop-catalog__subtitle { margin: 0; }
.shop-search { display: flex; flex-wrap: wrap; gap: var(--space-2xs, 0.5rem); }
.shop-search input { flex: 1 1 12rem; min-inline-size: 0; min-block-size: 2.75rem; }
.shop-categories > ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs, 0.5rem); margin: 0; padding: 0; list-style: none; }
.shop-categories__link { display: inline-block; padding: var(--space-3xs, 0.25rem) var(--space-s, 1rem); border: 1px solid var(--color-border, #e7e5e4); border-radius: 999px; color: inherit; text-decoration: none; }
.shop-categories__link:hover { border-color: currentColor; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-m, 1.5rem); margin: 0; padding: 0; list-style: none; }
.shop-card { display: flex; flex-direction: column; gap: var(--space-2xs, 0.5rem); }
.shop-card__media :is(picture, img) { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius, 0.5rem); }
.shop-card__body { display: flex; flex-direction: column; gap: var(--space-3xs, 0.25rem); }
.shop-card__body > * { margin: 0; }
.shop-card__title { font-size: var(--size-m, 1.125rem); }
.shop-card__title a { color: inherit; text-decoration: none; }
.shop-card__title a:hover { text-decoration: underline; }
.shop-stock { font-size: var(--size-s, 0.875rem); }
.shop-stock--out { color: var(--color-danger, #b42318); }
.shop-product { display: grid; grid-template-columns: 1fr; }
@container (inline-size >= 48rem) { .shop-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.shop-product__media :is(picture, img) { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius, 0.5rem); }
.shop-product__gallery { display: flex; flex-wrap: wrap; gap: var(--space-2xs, 0.5rem); margin-block-start: var(--space-2xs, 0.5rem); }
.shop-product__gallery :is(picture, img) { inline-size: 6rem; block-size: auto; border-radius: var(--radius, 0.5rem); }
.shop-product__body { display: flex; flex-direction: column; gap: var(--space-s, 1rem); }
.shop-product__body > p, .shop-product__body > ul { margin: 0; }
.shop-product__sku, .shop-product__pack, .shop-product__categories { color: var(--color-muted, #57534e); font-size: var(--size-s, 0.875rem); }
.shop-tiers { padding-inline-start: 1.25em; font-size: var(--size-s, 0.875rem); }
.shop-add { display: flex; flex-wrap: wrap; gap: var(--space-2xs, 0.5rem); align-items: stretch; }
.shop-add__quantity input { inline-size: 6rem; min-block-size: 2.75rem; }
.shop-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s, 1rem); }
/* Shared by the blocks of the shop: each block brings them, the same rules twice do no harm. */
.shop-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shop-placeholder { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; border-radius: var(--radius, 0.5rem); background: var(--color-surface, #f5f5f4); color: var(--color-muted, #57534e); }
.shop-placeholder svg { inline-size: 30%; max-inline-size: 4rem; block-size: auto; opacity: 0.5; }
.shop-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs, 0.5rem);
  min-block-size: 2.75rem; padding: var(--space-2xs, 0.5rem) var(--space-m, 1.5rem);
  border: 2px solid var(--color-primary, #1c1917); border-radius: var(--radius-button, 0.5rem);
  background: var(--color-primary, #1c1917); color: var(--color-primary-contrast, #fff);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.shop-button:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.shop-button--secondary { background: transparent; color: var(--color-primary, currentColor); }
.shop-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.shop-field { display: flex; flex-direction: column; gap: var(--space-3xs, 0.125rem); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.shop-field > span, .shop-field > legend { padding: 0; font-weight: 600; }
.shop-field input, .shop-field select, .shop-field textarea { inline-size: 100%; }
.shop-choice { display: flex; align-items: flex-start; gap: var(--space-2xs, 0.5rem); }
.shop-choice input { flex: none; inline-size: 1.25rem; min-block-size: 1.25rem; margin-block-start: 0.15em; accent-color: var(--color-primary, currentColor); }
.shop-flash, .shop-error { margin: 0; padding: var(--space-s, 1rem); border-inline-start: 4px solid var(--color-danger, #b42318); border-radius: var(--radius, 0.5rem); background: var(--color-surface, #f5f5f4); }
.shop-flash--success { border-inline-start-color: var(--color-primary, currentColor); }
.shop-hint, .shop-empty { margin: 0; color: var(--color-muted, #57534e); }
.shop-problem { margin: 0; color: var(--color-danger, #b42318); font-size: var(--size-s, 0.875rem); }
.shop-table { inline-size: 100%; border-collapse: collapse; }
.shop-table th, .shop-table td { padding: var(--space-2xs, 0.5rem); border-block-end: 1px solid var(--color-border, #e7e5e4); text-align: start; vertical-align: top; }
.shop-table .shop-table__number { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3xs, 0.25rem) var(--space-m, 1.5rem); margin: 0; max-inline-size: 24rem; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.shop-totals dd { margin: 0; text-align: end; }
.shop-totals__sum { font-weight: 700; }
.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs, 0.5rem); margin: 0; }
.shop-price__main { font-size: var(--size-l, 1.25rem); }
.shop-price__regular { color: var(--color-muted, #57534e); text-decoration: line-through; }
.shop-price__note, .shop-price--hidden { color: var(--color-muted, #57534e); font-size: var(--size-s, 0.875rem); }
@container (inline-size < 36rem) {
  .shop-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .shop-table tr { display: grid; grid-template-columns: 1fr auto; padding-block: var(--space-2xs, 0.5rem); border-block-end: 1px solid var(--color-border, #e7e5e4); }
  .shop-table td { padding: var(--space-3xs, 0.125rem) 0; border: 0; }
  .shop-table td:first-child { grid-column: 1 / -1; }
}

}
/* /assets/kakteenberghaus/theme/overrides/frootbox/shop/blocks/Catalog/assets/kb-shop.css */
@layer blocks {
/*
 * The shop of Avaro 2 in Frootbox 1: col-md-3 with the categories and the
 * search, col-md-9 with the content, the products as col-md-4 teasers
 * with a square image, the title on one line and a green button "Details".
 */
.kb-shop { display: flex; flex-direction: column; gap: 50px; }
.kb-shop__aside { order: -1; }
@media (min-width: 48rem) {
  .kb-shop { flex-direction: row; align-items: flex-start; gap: 30px; }
  .kb-shop__aside { flex: 0 0 calc((100% + 30px) * 3 / 12 - 30px); }
  .kb-shop__main { flex: 0 0 calc((100% + 30px) * 9 / 12 - 30px); min-inline-size: 0; }
}

/* ------------------------------------------------------------ the sidebar */

.kb-shop__heading { margin: 0 0 15px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.kb-shop__categories ul { margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.6; }
.kb-shop__categories ul ul { margin-block: 4px 8px; padding-inline-start: 15px; }
.kb-shop__categories a.is-current { font-weight: 700; }
.kb-shop__search { margin-block-start: 30px; padding-inline-end: 50px; }
.kb-shop__search input {
  display: block;
  inline-size: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
}
.kb-shop__search .kb-button { margin-block-start: 10px; padding-inline: 40px; font-size: 17px; }

/* ------------------------------------------------------------ the content */

/* The page of a product lays out its image and text by the width of this column. */
.kb-shop__main { container-type: inline-size; }
.kb-shop__main > * + * { margin-block-start: 30px; }
.kb-shop__title { margin: 0; font-size: 35px; font-weight: 700; line-height: 1.2; }
@media (min-width: 48rem) {
  .kb-shop__title { font-size: 50px; }
  .kb-shop__title--product { font-size: 35px; }
}
.kb-shop__title--offers { margin-block-start: 80px; }
.kb-shop__text { max-inline-size: calc((100% + 30px) * 10 / 12 - 30px); }
.kb-shop__text:empty { display: none; }
.kb-shop__intro { margin: 0; }

.kb-shop__grid { display: grid; grid-template-columns: 1fr; gap: 50px 30px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 36rem) { .kb-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .kb-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kb-shop__main > .kb-shop__grid { margin-block-start: 40px; }

.kb-shop-card { display: flex; flex-direction: column; gap: 10px; }
.kb-shop-card__media { display: block; }
.kb-shop-card__media :is(picture, img) { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; }
.kb-shop-card__media .shop-placeholder { border-radius: 0; background: var(--color-surface); }
.kb-shop-card__title { margin: 10px 0 0; overflow: hidden; font-size: 20px; font-weight: 700; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; }
.kb-shop-card__short { display: -webkit-box; margin: 0; overflow: hidden; font-size: 17px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.kb-shop-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: auto; }
.kb-shop-card__foot .shop-price { font-size: 17px; }
.kb-shop-card__details {
  margin-inline-start: auto;
  padding: 2px 12px;
  border-radius: 6px;
  background: var(--color-dark);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.kb-shop-card__details:hover { background: var(--color-primary); color: var(--color-primary-contrast); }

/* The page of a product: the image left, the text right, as wide as the content. */
.kb-shop-product .shop-product__media :is(picture, img) { border-radius: 0; }
.kb-shop-product .shop-add input { padding: 0.375rem 0.75rem; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); font: inherit; }

}
/* /assets/frootbox/theme-base/assets/partials.css */
@layer theme {
/*
 * The head and foot of the base theme (decision 0162), in the layer of the
 * theme. A child theme replaces this file or overrides single classes.
 */

/* Head: brand at the start, menu and search at the end. Below 48rem the menu opens as a popover. */
.base-header { border-block-end: var(--border); background: var(--color-bg); }
.base-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-block-size: 4rem; padding-block: var(--space-2xs); }
.base-header__brand { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text); font-family: var(--font-heading); font-size: var(--size-l); font-weight: 700; text-decoration: none; }
.base-header__brand img { max-block-size: 2.75rem; inline-size: auto; }

.base-header__end { display: flex; align-items: center; gap: var(--space-2xs); }
.base-header__search { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: var(--radius); color: var(--color-text); }
.base-header__search:hover { background: var(--color-surface); }

.base-header :is(.base-header__toggle, .base-header__close) {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

/* Closed, the browser hides the popover; the rules below only apply when it is open. */
.base-header__menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(22rem, 100%);
  block-size: 100%;
  margin: 0;
  padding: var(--space-m);
  border: 0;
  border-inline-start: var(--border);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.base-header__menu::backdrop { background: rgb(0 0 0 / 0.3); }
.base-header__close { align-self: flex-end; }

@media (min-width: 48rem) {
  .base-header__end { display: flex; align-items: center; gap: var(--space-2xs); }
.base-header__search { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: var(--radius); color: var(--color-text); }
.base-header__search:hover { background: var(--color-surface); }

.base-header :is(.base-header__toggle, .base-header__close) { display: none; }
  .base-header__menu,
  .base-header__menu:popover-open {
    position: static;
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    margin: 0;
    color: inherit;
    align-items: center;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    inset: auto;
  }
  .base-header__menu::backdrop { display: none; }
}

/* Navigation: a column in the popover, a row in the head from 48rem. */
.base-nav__list, .base-nav ul { margin: 0; padding: 0; list-style: none; }
.base-nav__list { display: flex; flex-direction: column; gap: var(--space-3xs); }
.base-nav :is(a, summary, .base-nav__heading) {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-2xs);
  border-radius: calc(var(--radius) / 2);
  color: var(--color-text);
  text-decoration: none;
}
.base-nav a:hover, .base-nav summary:hover { background: var(--color-surface); }
.base-nav :is([aria-current="page"], .is-active) { color: var(--color-primary); font-weight: 600; }
.base-nav__heading { color: var(--color-muted); font-size: var(--size-s); }
.base-nav a.base-nav__button {
  justify-content: center;
  padding-inline: var(--space-s);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}
.base-nav a.base-nav__button:hover { background: var(--color-primary); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.base-nav summary { gap: var(--space-3xs); cursor: pointer; list-style: none; }
.base-nav summary::-webkit-details-marker { display: none; }
.base-nav summary::after { content: ""; inline-size: 0.45em; block-size: 0.45em; border-inline-end: 2px solid; border-block-end: 2px solid; rotate: 45deg; translate: 0 -0.15em; margin-inline-start: auto; }
.base-nav details[open] > summary::after { rotate: 225deg; translate: 0 0.15em; }
.base-nav details ul { padding-inline-start: var(--space-s); }

@media (min-width: 48rem) {
  .base-nav--main .base-nav__list { flex-direction: row; flex-wrap: wrap; }
  .base-nav--main summary::after { margin-inline-start: var(--space-3xs); }
  .base-nav--main details { position: relative; }
  .base-nav--main details ul {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 5;
    min-inline-size: 14rem;
    padding: var(--space-3xs);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
  }
}

/* Languages, each named in its own. */
.base-languages { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); }
.base-languages :is(a, span) { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--space-2xs); border-radius: calc(var(--radius) / 2); color: var(--color-text); text-decoration: none; }
.base-languages a:hover { background: var(--color-surface); }
.base-languages [aria-current] { font-weight: 600; }

/* Breadcrumbs with a separator that turns with the direction of the text. */
.base-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--size-s); color: var(--color-muted); }
.base-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2xs); opacity: 0.6; }
.base-breadcrumb a { color: inherit; }

/* Foot: name and address, then the links, profiles, the note and the languages. */
.base-footer { margin-block-start: var(--space); border-block-start: var(--border); background: var(--color-surface); color: var(--color-muted); font-size: var(--size-s); }
.base-footer__inner { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-m) var(--space-xl); padding-block: var(--space-xl); }
.base-footer__site { display: flex; flex-direction: column; gap: var(--space-3xs); }
.base-footer__brand { color: var(--color-text); font-family: var(--font-heading); font-weight: 700; }
.base-footer .base-nav__list { flex-direction: row; flex-wrap: wrap; }
.base-footer .base-nav a { color: inherit; }
.base-footer__profiles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.base-footer__profiles a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: inherit; }
/* Columns of the footer navigation (decision 0195): as many next to each other as fit. */
.base-footer__nav { display: flex; flex: 1 1 30rem; flex-direction: column; gap: var(--space-m); }
.base-footer__columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: var(--space-m) var(--space-xl); }
.base-footer__heading { margin: 0 0 var(--space-3xs); color: var(--color-text); font-weight: 700; }
.base-footer .base-footer__column a { display: inline-flex; min-block-size: 2rem; padding-inline: 0; color: inherit; }
.base-footer .base-footer__column a:hover { background: none; text-decoration: underline; text-underline-offset: 0.18em; }
/* Note and languages at the bottom, the languages at the end of the line. */
.base-footer__bottom { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-m); }
.base-footer__note { margin: 0; }
/* Links with room for hover stand on the edge with their text, as the columns do. */
.base-footer :is(.base-footer__nav > .base-nav__list, .base-languages) { margin-inline: calc(-1 * var(--space-2xs)); }
.base-footer .base-languages :is(a, span) { color: inherit; }
.base-footer .base-languages [aria-current] { color: var(--color-text); }
.base-footer .base-languages a:hover { background: var(--color-bg); }
/* The privacy settings (decision 0224) look like the links next to them. */
.base-footer .privacy-settings__button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.base-footer .privacy-settings__button:hover { color: var(--color-text); }

/* The error page (decision 0189): like the head of a subpage, with a way back. */
.base-error__head { display: flex; flex-direction: column; align-items: start; gap: var(--space-s); padding-block: var(--space-2xl) var(--space-xl); }
.base-error__status { margin: 0; font-size: var(--size-s); font-weight: 600; color: var(--color-muted); }
.base-error__title { margin: 0; font-size: var(--size-4xl); max-inline-size: 24ch; }
.base-error__text { margin: 0; max-inline-size: var(--width-narrow); font-size: var(--size-l); color: var(--color-muted); }
.base-error__actions { margin: 0; }
.base-error__actions a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
  text-decoration: none;
}
.base-error__actions a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

/* Technical details, in development only. */
.fb-error-details { padding-block: var(--space-m); border-block-start: var(--border); font-size: var(--size-s); }
.fb-error-details summary { cursor: pointer; color: var(--color-muted); }
.fb-error-details__exception { display: flex; flex-direction: column; gap: var(--space-3xs); margin-block-start: var(--space-m); }
.fb-error-details__exception p { margin: 0; overflow-wrap: anywhere; }
.fb-error-details__class, .fb-error-details__file { color: var(--color-muted); }
.fb-error-details pre { margin: 0; padding: var(--space-s); overflow-x: auto; border-radius: var(--radius); background: var(--color-surface); font-size: var(--size-xs); }

}
/* /assets/kakteenberghaus/theme/assets/site.css */
@layer theme {
/*
 * Kakteen Berghaus after the website in Frootbox 1: the head and the
 * foot. What blocks share (headings, links, space between blocks) is in
 * layouts/Content/assets/content.css, a layer below the blocks.
 */

body { font-family: var(--font-body); }

/*
 * The content widths of Frootbox 1 (Bootstrap 4 containers less their
 * padding): fluid on phones, then fixed steps; the token width (1110px)
 * from 75rem. Base wrap and page grid both read --width.
 */
@media (min-width: 36rem) { :root { --width: 510px; } }
@media (min-width: 48rem) { :root { --width: 690px; } }
@media (min-width: 62rem) { :root { --width: 930px; } }
@media (min-width: 75rem) { :root { --width: 69.375rem; } }

/* ------------------------------------------------------------ the head */

/*
 * On small screens the head stays at the top and takes on the cream
 * colour while the page scrolls, as the script of Frootbox 1 did; from
 * 48rem it lies 50px below the top on the image of the page.
 */
.kb-header {
  position: fixed;
  z-index: 10;
  inset-block-start: 0;
  inset-inline: 0;
  padding-block: 10px;
  animation: kb-header-fill linear both;
  animation-timeline: scroll(root);
  animation-range: 0 270px;
}
@keyframes kb-header-fill {
  from { background: rgb(237 237 231 / 0); }
  to { background: rgb(237 237 231 / 0.9); }
}
.kb-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.kb-header__brand { flex: 0 0 calc((100% + 30px) * 6 / 12 - 30px); }
.kb-header__brand img { display: block; inline-size: 100%; block-size: auto; }
.kb-header__navs { display: none; }
/* 38 by 38 pixels with the bars at 18 by 20, as in Frootbox 1. */
.kb-header__toggle, .kb-menu__close {
  display: inline-flex;
  padding: 9px 10px;
  border: 0;
  background: var(--color-dark);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.kb-header__toggle .kb-icon { inline-size: 0.875em; }
@media (min-width: 48rem) {
  .kb-header { position: absolute; margin-block-start: 50px; animation: none; }
  .kb-header__brand { flex-basis: calc((100% + 30px) * 3 / 12 - 30px); }
  .kb-header__navs { display: block; text-align: end; }
  .kb-header__toggle { display: none; }
}
.kb-header__login { margin: 10px 0 0; }
.kb-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.kb-header__navs a { font-family: var(--font-heading); font-weight: 700; text-shadow: 0 0 10px #ffffff; }
.kb-header__login a { font-size: 16px; }
.kb-nav--main a { display: block; padding-inline-start: 30px; font-size: 20px; }
.kb-nav a[aria-current] { color: var(--color-text); }

/* The menu on small screens covers the screen in cream, as in Frootbox 1. */
.kb-menu:popover-open {
  display: block;
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 10px var(--gutter);
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
}
.kb-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.kb-menu__head img { inline-size: calc((100% + 30px) * 6 / 12 - 30px); block-size: auto; }
.kb-menu__list { margin: 40px 0 0; padding: 0; list-style: none; }
.kb-menu__list a { display: block; margin-block: 5px; }
.kb-menu__list--main { margin-block-start: 60px; }
.kb-menu__list--main a { margin-block: 20px; font-size: 24px; font-weight: 700; }
.kb-menu__login { margin: 40px 0 0; }

/* ---------------------------------------------- blocks of the base theme */

/* The gallery as in Frootbox 1: upright images 400 × 600, two columns, four from 48rem. */
.base-gallery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
@media (min-width: 48rem) {
  .base-gallery__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.base-gallery__figure img { aspect-ratio: 2 / 3; border-radius: 0; }
.base-gallery__open { border-radius: 0; }

/* ------------------------------------------------------------ the foot */

.kb-footer { margin-block-start: 100px; padding-block-start: 100px; background: var(--color-dark); color: #ffffff; font-size: 18px; }
.kb-footer a { color: #ffffff; }
.kb-footer a:hover { color: var(--color-primary); }
.kb-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 30px; }
.kb-footer__brand { flex: 0 0 calc((100% + 30px) * 8 / 12 - 30px); }
.kb-footer__brand img { display: block; inline-size: 100%; block-size: auto; }
.kb-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 50px 0 30px; padding: 0; list-style: none; }
.kb-footer__nav a { font-size: 20px; font-weight: 700; }
.kb-footer__columns { display: grid; gap: 30px; align-items: center; margin-block-start: 30px; }
/* As the columns of Bootstrap: about us 4 of 12, the contact 5 after one free. */
.kb-footer__columns p { margin-block-end: 1rem; }
.kb-footer__about { white-space: pre-line; }
@media (min-width: 48rem) {
  .kb-footer__brand { flex-basis: calc((100% + 30px) * 4 / 12 - 30px); }
  .kb-footer__nav { flex: 0 0 calc((100% + 30px) * 7 / 12 - 30px); }
  .kb-footer__nav ul { margin: 0; }
  .kb-footer__columns { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-block-start: 0; }
  .kb-footer__about { grid-column: 1 / span 4; }
  .kb-footer__contact { grid-column: 6 / span 5; }
}
.kb-footer__bottom { margin-block-start: 50px; padding-block: 30px; background: rgb(0 0 0 / 0.1); }
.kb-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 30px; }
.kb-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 16px; }
.kb-footer__meta ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.kb-footer__meta :is(a, button) { color: rgb(255 255 255 / 0.5); }
.kb-footer__agency img { display: block; inline-size: 140px; block-size: auto; }
@media (min-width: 48rem) {
  .kb-footer__agency img { inline-size: 160px; }
}

/* ------------------------------------------------------------ shop: steps and the yellow button */

/* The steps of an order above cart and checkout (partials/shop-steps.twig). */
.kb-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.kb-steps__step { display: flex; align-items: center; gap: 10px; color: var(--color-muted); }
.kb-steps__step + .kb-steps__step::before { content: ""; inline-size: 32px; block-size: 2px; margin-inline-end: 6px; background: var(--color-line); }
.kb-steps__step--done + .kb-steps__step::before { background: var(--color-text); }
.kb-steps__mark { display: inline-grid; flex: none; place-items: center; box-sizing: border-box; inline-size: 30px; block-size: 30px; border: 1px solid var(--color-muted); border-radius: 50%; font-size: 15px; }
.kb-steps__mark .kb-icon { inline-size: 16px; }
.kb-steps__step--done { color: var(--color-text); }
.kb-steps__step--done .kb-steps__mark { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); }
.kb-steps__step--done .kb-steps__label { font-weight: 700; }
.kb-steps__step--current { color: var(--color-text); font-weight: 800; }
.kb-steps__step--current .kb-steps__mark { border-color: var(--color-text); background: var(--color-text); color: var(--color-surface); }
@media (max-width: 35.99rem) {
  .kb-steps__step:not(.kb-steps__step--current) .kb-steps__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 36rem) {
  .kb-steps__step + .kb-steps__step::before { inline-size: 48px; }
}

.kb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-block-size: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.kb-button:hover:not(:disabled) { background: #bdb300; color: var(--color-primary-contrast); }
.kb-button:disabled { opacity: 0.5; cursor: not-allowed; }
.kb-button .kb-icon { inline-size: 18px; }

}