/*
Theme Name:   Unique Theme (Child)
Theme URI:    https://heim.nordicmade.com/
Description:  Child theme of Heim. Step 1: brand design tokens (fonts + colors) ported from the /site React design. Layout/templates intentionally left to a later step.
Author:       Unique Event Rental
Template:     heim
Version:      0.1.0
Text Domain:  heim-child
*/

/* ==========================================================================
   Fonts (self-hosted, ported from site/public/fonts)
   ========================================================================== */

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Novel Pro";
  src: url("fonts/NovelPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens — overrides Heim's Customizer :root block.
   This stylesheet is enqueued AFTER 'heim-style' (and its inline Customizer
   styles), so these :root declarations win at equal specificity.
   ========================================================================== */

:root {
  /* Typography: body = Neue Haas Grotesk (sans), headings = Novel Pro (serif) */
  --global--font-family-body: "Neue Haas Grotesk Display Pro", system-ui, -apple-system, sans-serif;
  --heading--font-family: "Novel Pro", Georgia, serif;

  /* Core brand colors (light mode) */
  --global--color-body: #f8f7f3;      /* cream background */
  --global--color-font: #0b192b;      /* navy text */
  --heading--font-color: #0b192b;     /* navy headings (Heim colors headings separately) */
  --global--color-highlight: #004065; /* blue accent */
  --global--color-border: #e5e5e5;

  /* Contrast ramp: cream -> cool blue-grey -> toward navy */
  --global--color-body-contrast:   #f1efe9;
  --global--color-body-contrast-2: #e9e8e2;
  --global--color-body-contrast-3: #dfe1e2;
  --global--color-body-contrast-4: #d3d9dc;
  --global--color-body-contrast-5: #c5cdd3;
  --global--color-body-contrast-6: #b3bdc5;
  --global--color-body-contrast-7: #9ba8b2;
  --global--color-body-contrast-8: #7e8d99;
  --global--color-body-contrast-9: #61727f;

  /* Buttons: blue fill, white text (hover uses Heim's native opacity) */
  --buttons--background-color: #004065;
  --buttons--font-color: #ffffff;
}

/* ==========================================================================
   Front-page hero buttons (block markup kept minimal/canonical so the
   block editor doesn't flag "invalid content"; all styling lives here).
   ========================================================================== */

.uer-hero-btn .wp-block-button__link {
  border-radius: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 2.25em;
  padding-right: 2.25em;
}

.uer-hero-btn--outline .wp-block-button__link {
  background-color: transparent;
  border: 1px solid #ffffff;
}

.uer-hero-btn--outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Cart: "Liste als PDF runterladen" — plain text link below "Zur Anfrage".
   Clicking it opens the browser print dialog (Cmd/Ctrl+P) to save the cart as PDF. */
.uer-pdf-below-cart {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.uer-pdf-button,
.uer-pdf-button:visited {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: #0b192b;
  font-family: "Neue Haas Grotesk Display Pro", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  cursor: pointer;
}
.uer-pdf-button:hover,
.uer-pdf-button:focus {
  color: #0b192b;
  background: none;
  text-decoration: none;
}
/* When printing the cart (Save-as-PDF): hide the button itself, the site footer,
   the top store-notice banner, and the header tool icons (hamburger menu, search,
   cart). Scoped to the cart page so other pages print unchanged. */
@media print {
  .woocommerce-cart .uer-pdf-below-cart,
  .woocommerce-cart > footer,
  .woocommerce-cart footer,
  .woocommerce-cart .woocommerce-store-notice,
  .woocommerce-cart .wc-block-cart__submit-button,
  .woocommerce-cart #site-menu-button,
  .woocommerce-cart #site-header-search,
  .woocommerce-cart #site-header-cart {
    display: none !important;
  }
}

/* Off-canvas (slide-in) category menu: hide the product-count numbers. */
.aside-mobile-categories-title .count {
  display: none;
}

/* ==========================================================================
   Header: inline search bar (replaces the theme's search icon + overlay panel).
   Markup comes from inc/header-search.php. Shown from 1280px up — the width at
   which the theme stops dropping header tools, i.e. where there is room for a
   field; below that the theme's icon + overlay panel stays in place.
   ========================================================================== */

#uer-header-search {
  display: none;
}

@media (min-width: 1280px) {
  #uer-header-search {
    display: block;
  }
  /* The bar is printed first in the tools list (heim_before_header_tools), but
     belongs where the old search icon sat: after the color-mode toggle and
     before the account icon. Flex order puts it there without touching markup. */
  #site-header-color-mode {
    order: -1;
  }
  /* Theme's icon + full-width search overlay — replaced by the bar above. */
  #site-header-search {
    display: none;
  }
}

/* FiboSearch markup: .dgwt-wcas-search-wrapp > form > .dgwt-wcas-sf-wrapp
   (input + submit button). Scoped by #uer-header-search so the plugin's own
   styling stays intact for any other FiboSearch instance on the site. */
#uer-header-search .dgwt-wcas-search-wrapp {
  width: 240px;
  max-width: none;
  min-width: 0;
}

#uer-header-search .dgwt-wcas-search-form,
#uer-header-search .dgwt-wcas-sf-wrapp {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

#uer-header-search .dgwt-wcas-sf-wrapp {
  display: flex;
  align-items: stretch;
  height: 38px;
  background: #ffffff;
  /* Same source as the account/cart icons, so frame and icons can't drift. */
  border: 1px solid var(--header--font-color, #0b192b);
}

#uer-header-search .dgwt-wcas-sf-wrapp:focus-within {
  border-color: #004065;
}

/* Hovering the submit button: frame follows the button's hover fill, so the
   button never sits inside a differently coloured border. */
#uer-header-search .dgwt-wcas-sf-wrapp:has(.dgwt-wcas-search-submit:hover) {
  border-color: #004065;
}

#uer-header-search input[type="search"].dgwt-wcas-search-input,
#uer-header-search input[type="search"].dgwt-wcas-search-input:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0 none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--header--font-color, #0b192b);
  font-family: var(--global--font-family-body);
  font-size: 15px;
  line-height: 1;
}

#uer-header-search input[type="search"].dgwt-wcas-search-input::placeholder {
  color: #7e8d99;
  opacity: 1;
}

/* Pirx pins the submit absolutely (top/right) and disables its pointer events
   (decorative there) — put it back in the flex row and make it clickable. */
#uer-header-search .dgwt-wcas-search-submit,
#uer-header-search .dgwt-wcas-search-submit:hover,
#uer-header-search .dgwt-wcas-search-submit:focus {
  position: static;
  pointer-events: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background: var(--header--font-color, #0b192b);
  cursor: pointer;
}

#uer-header-search .dgwt-wcas-search-submit:hover {
  background: #004065;
}

/* The plugin's magnifier is an inline SVG, absolutely placed by Pirx — centre
   it in the button instead. */
#uer-header-search .dgwt-wcas-ico-magnifier,
#uer-header-search .dgwt-wcas-ico-magnifier path {
  position: static;
  width: 16px;
  height: 16px;
  margin: 0;
  fill: #ffffff;
}

/* Autocomplete dropdown: it renders at the end of <body>, outside
   #uer-header-search. Its rows and group headings are links, so the theme's
   global link underline hits them — drop it (the thin grey rule under a
   heading is the plugin's own divider and stays). */
.dgwt-wcas-suggestions-wrapp a,
.dgwt-wcas-suggestions-wrapp a:hover,
.dgwt-wcas-suggestions-wrapp a:focus,
.dgwt-wcas-details-wrapp a,
.dgwt-wcas-details-wrapp a:hover,
.dgwt-wcas-details-wrapp a:focus {
  text-decoration: none;
}

/* Group headings ("Kategorien", "Produkte"): Novel Pro in navy. The rows
   below them keep the body sans. */
.dgwt-wcas-suggestion-headline,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
  font-family: var(--heading--font-family);
  font-size: 14px;
  color: var(--header--font-color, #0b192b);
  /* Plugin uppercases these — keep the label's own casing. */
  text-transform: none;
}

/* Pirx style draws its own rounded button/preloader box — drop both. */
#uer-header-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp:after,
#uer-header-search .dgwt-wcas-preloader {
  display: none;
}

@media (min-width: 1440px) {
  .uer-search {
    width: 280px;
  }
}

/* ==========================================================================
   Header search panel (below 1280px): the theme's search icon opens a
   drop-down panel, which now holds FiboSearch instead of the WooCommerce
   product-search widget (swap in inc/header-search.php). The panel's look is
   unchanged — these rules only strip the plugin's Pirx skin back to the field
   the theme drew before: full-width input with a 1px grey frame and a flat
   icon button on the right. Every selector carries .dgwt-wcas-style-pirx so
   it outweighs the plugin's own rules regardless of stylesheet order.
   ========================================================================== */

.site-search .site-search-widget .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: none;
  min-width: 0;
  /* The plugin paints the wrapper #444, which the field and the icon would
     inherit — in night mode that is dark grey on a dark panel. */
  color: inherit;
}

.site-search .site-search-widget .dgwt-wcas-search-form,
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Input: the theme's own field (.site-search .site-search-widget
   input[type="search"] in the parent stylesheet), re-stated here because
   Pirx's rules are the more specific ones. */
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 14px 58px 14px 23px;
  border: 1px solid #c1c1c1;
  border-radius: 0;
  background-color: var(--inputs--background-color);
  color: inherit;
  font-family: var(--global--font-family-body);
  font-size: var(--global--font-size-body-lg);
  line-height: var(--global--line-height-body);
}

.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  border-color: #c1c1c1;
  background-color: var(--inputs--focus-color);
  box-shadow: none;
}

/* Submit: Pirx parks it inside the field on the left as a decoration and only
   moves it right once something is typed — put it back where the theme's
   button sat, and keep it clickable throughout. */
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 58px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  pointer-events: auto;
  animation: none;
}

/* Placeholder: the theme leaves it to the browser, i.e. a muted shade of the
   field's own colour, so it follows day/night — the plugin pins it to #777. */
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* The theme draws the magnifier as an icon-font glyph on the button (:after),
   so hide the plugin's inline SVG — otherwise both show. */
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
  display: none;
}

/* Pirx's rounded preloader box has no place in the flat panel field. */
.site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-preloader {
  display: none;
}

/* Same steps down as the theme's panel field. */
@media (max-width: 1025px) {
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
    font-size: min(16px, 1rem);
  }
}

@media (max-width: 640px) {
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
    padding: 12px 51px 12px 20px;
  }
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
  .site-search .site-search-widget .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
    width: 51px;
  }
}

/* Single product: when the up-sells section ("Passende Produkte") is absent,
   add bottom spacing so the content isn't flush against the footer. */
.single-product div.product:not(:has(.up-sells.upsells.products)) {
  margin-bottom: 120px;
}

/* Front-page "Welcome" greeting — short blue divider under the heading */
.wp-block-separator.uer-welcome-divider {
  width: 48px;
  max-width: 48px;
  height: 2px;
  margin: 10px auto 0;
  border: 0;
  background-color: #004065;
  opacity: 1;
}

/* Slightly looser tracking on body copy (headings/eyebrows/buttons keep their own) */
p {
  letter-spacing: 0.015em;
}

/* Checkout (Anfrage): hide the locked Payment Options step — header "Zahlungsoptionen"
   + the "Per Nachnahme" box. Covers the server placeholder AND the hydrated fieldset. */
.wp-block-woocommerce-checkout-payment-block,
#payment-method,
.wc-block-checkout__payment-method {
  display: none !important;
}

/* Tag/Nacht-Umschalter (Header + Sidebar): nur das Wort "Day"/"Night" entfernen, Icon bleibt */
.color-mode-switch .color-mode-label {
  display: none !important;
}

/* Anfrage-Modell: Preise überall ausblenden
   - Preisbetrag (Produktseiten, Shop, Mini-Warenkorb usw.)
   - Bestellübersicht-Block + Preis-Wrapper der Warenkorb-/Anfrageliste-Positionen */
.woocommerce-Price-amount,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__prices,
.wc-block-mini-cart__footer-subtotal {
  display: none !important;
}

/* Checkout-Bestellübersicht: Produkt-Zusammenfassung BEHALTEN, nur die Summen
   (Zwischensumme/Versand/Gesamt) darunter ausblenden. Alles im __content außer
   dem Cart-Items-Block (= Produktliste) wird ausgeblendet. */
.wc-block-components-checkout-order-summary__content > *:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block),
.wp-block-woocommerce-checkout-order-summary-totals-block {
  display: none !important;
}
/* Produktliste schließt die Box direkt ab — kein leeres Summen-Kästchen / keine Trennlinie darunter */
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Box-Rahmen direkt an der Produktliste enden lassen (kein leerer Streifen unten) */
.wc-block-components-checkout-order-summary__content {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Square everything: no rounding on images or buttons.
   ========================================================================== */

:root {
  --images--border-radius: 0;
  --buttons--border-radius: 0;
  --inputs--border-radius: 0;
}

img,
figure,
.wp-block-image img,
.wp-block-image.is-style-rounded img,
.wp-block-cover,
.wp-block-post-featured-image img,
.attachment img,
.wp-post-image {
  border-radius: 0 !important;
}

.wp-block-button__link,
.wp-element-button,
button,
input[type="button"],
input[type="submit"],
.button,
a.button,
.heim-button {
  border-radius: 0 !important;
}

/* Mini cart (and cart/checkout) quantity selector: square corners. The
   WooCommerce blocks quantity stepper rounds its wrapper, input and buttons. */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  border-radius: 0 !important;
}

/* ==========================================================================
   Reusable feature card: image + blue title bar + list + "Alles ansehen".
   Block markup is kept minimal; all styling is here (class: uer-feature-card).
   ========================================================================== */

.uer-feature-card {
  background-color: #ffffff;
  overflow: hidden;
}
.uer-feature-card > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Image */
.uer-feature-card__image {
  margin: 0;
}
.uer-feature-card__image img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* Blue title bar */
.uer-feature-card__bar {
  background-color: #133f62;
  padding: 16px 24px;
}
.uer-feature-card__title {
  margin: 0;
  color: #ffffff;
  font-family: "Novel Pro", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* List of items with divider lines */
.uer-feature-card__list {
  padding: 0 24px;
}
.uer-feature-card__list > * {
  margin: 0 !important;
}
.uer-feature-card__list p {
  margin: 0;
  padding: 14px 0;
  color: #0b192b;
  font-size: 0.95rem;
  border-bottom: 1px solid #e5e5e5;
}
.uer-feature-card__list p:last-child {
  border-bottom: 0;
}
.uer-feature-card__list a {
  color: inherit;
  text-decoration: none;
}
.uer-feature-card__list a:hover {
  color: #004065;
}

/* "Alles ansehen" footer link with arrow */
.uer-feature-card__more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px;
  font-weight: 600;
}
.uer-feature-card__more::before {
  content: "\2192"; /* → */
  font-size: 1.15em;
  line-height: 1;
}
.uer-feature-card__more a {
  color: #0b192b;
  text-decoration: none;
}
.uer-feature-card__more:hover a,
.uer-feature-card__more:hover::before {
  color: #004065;
}

/* ==========================================================================
   Checkout: three-column row for custom CFE fields
   Targets the WooCommerce Block (React) Checkout, whose address form is a
   flex container where each .wc-block-components-text-input defaults to
   `flex: 1 0 calc(50% - 12px)` (= 2 per row). For the three event fields we
   override to 33% so they sit on one line.
   Field IDs are prefixed by WC: wc-block-components-address-form__<name>
   ========================================================================== */

/* Block-checkout: 3-column layout for additional-fields with `form-row-third`.
   DOM (verified via inspector):
     .wc-block-components-checkout-step__content
       > div  (UNCLASSED — this is what needs to become the grid)
           > .wc-block-checkout__additional-fields__field
               > .form-row-third
   Each .form-row-third sits alone inside its own __field wrapper, so the
   row-of-three lives at the GRANDPARENT level. We use :has() to pick the
   unclassed grandparent only when it actually contains a form-row-third.
   Any non-third field wrapper (e.g. a wide single field) spans all 3 cols. */
.wc-block-components-checkout-step__content
  > div:has(.wc-block-checkout__additional-fields__field > .form-row-third) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 12px;
  row-gap: 16px;
  align-items: start;
}

.wc-block-components-checkout-step__content
  > div:has(.wc-block-checkout__additional-fields__field > .form-row-third)
  > .wc-block-checkout__additional-fields__field:not(:has(> .form-row-third)) {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .wc-block-components-checkout-step__content
    > div:has(.wc-block-checkout__additional-fields__field > .form-row-third) {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Hide the "Day" / "Night" word labels on the color-mode switcher,
   keep the icon. Parent theme (heim/includes/template-tags.php#86) outputs
   two <span class="color-mode-label">…</span> spans alongside an <i> icon.
   ========================================================================== */
.color-mode-switch .color-mode-label {
  display: none;
}

/* ==========================================================================
   Hero background video (Gumlet). Injected after the Cover block's background
   <img> by functions.php (uer hero render_block filter). The video fills the
   Cover, sitting above the image (kept as a fallback) and below the dim overlay
   and content.
   ========================================================================== */
.wp-block-cover .uer-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0; /* above the cover image, below the dim overlay (z-index 1) */
  overflow: hidden;
  pointer-events: none; /* keep the hero buttons clickable */
  /* Fallback image (set inline via the block's raw URL) shown until/if the
     video plays. */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The Gumlet iframe letterboxes its 16:9 video to "contain". To make it COVER
   the full-bleed, 700px-tall hero we keep the iframe locked to 16:9 and oversize
   whichever dimension is short, then center it (the wrapper clips the overflow).
   100vw / 56.25vw is a 16:9 box driven by width; the min-* values are a 16:9 box
   driven by the 700px height — the larger of the two always wins, so the frame
   stays 16:9 and never leaves a gap. */
.wp-block-cover .uer-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-width: calc(700px * 16 / 9);
  min-height: 700px;
  border: 0;
}

/* ==========================================================================
   Footer "Kategorien" widget: show only the top-level product categories.
   The WooCommerce Product Categories block renders subcategories as nested
   lists (depth-1+); hiding them keeps the list to parent categories only,
   while staying dynamic as categories are added/removed.
   ========================================================================== */
.site-footer-widgets .wc-block-product-categories-list .wc-block-product-categories-list {
  display: none;
}

/* ==========================================================================
   Contact Form 7 layout (Kontakt page). The form template wraps fields in
   .widget divs carrying width classes: .w100 = full row, .w50 = half row
   (.wl left / .wr right). Lay the form out as a wrapping flex row so the
   w50 pairs — Vorname/Nachname and E-Mail/Telefon — sit side by side.
   ========================================================================== */
.wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  align-items: flex-start;
}

/* Default every direct child to a full row… */
.wpcf7-form > * {
  flex: 0 0 100%;
  min-width: 0;
}

/* …then let the half-width widgets share a row. */
.wpcf7-form > .w50 {
  flex: 0 0 calc(50% - 10px);
}

/* Hidden inputs and the template's spacer <br> must not occupy a flex row. */
.wpcf7-form > .hidden-fields-container,
.wpcf7-form > br {
  display: none;
}

/* The .widget wrappers carry the field's <p>; trim its default margin so the
   side-by-side rows align at the top. */
.wpcf7-form .widget > p {
  margin: 0 0 18px;
}

/* CF7 renders text inputs at size="40" and wraps controls in an inline <span>,
   so fields don't fill their column. Make the wrapper and controls block-level
   and full width, so each w50 field fills its half exactly. */
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-email,
.wpcf7-form textarea.wpcf7-textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Stack the pairs on narrow screens. */
@media (max-width: 600px) {
  .wpcf7-form > .w50 {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Collapsible product-category menu (off-canvas left panel).
   The theme prints categories as a flat ul.aside-mobile-categories. The
   script assets/js/category-collapse.js moves each parent's children into a
   <ul class="aside-subcats"> inside the parent <li> and toggles .is-open on
   click. Here we collapse those sublists by default and reveal them when open.
   Remove this block (+ the enqueue in functions.php + the JS file) to revert.
   ========================================================================== */
.aside-mobile-categories .aside-subcats {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* Generous upper bound — the largest parent here has ~11 children, well under
   this height; the bound only needs to exceed the tallest open sublist. */
.aside-mobile-categories .has-subcats.is-open > .aside-subcats {
  max-height: 1500px;
}

/* The parent row lays out as [link][chevron], with the sublist wrapping below.
   The link itself navigates to the parent category; only the chevron folds. */
.aside-mobile-categories .has-subcats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.aside-mobile-categories .has-subcats > a {
  flex: 1 1 auto;
  min-width: 0;
}
.aside-mobile-categories .has-subcats > .aside-subcats {
  flex: 0 0 100%;
}

/* TEMPORARY: hide the category thumbnails in the off-canvas (hamburger) menu.
   Remove this single rule to bring the images back. */
.aside-mobile-categories img {
  display: none;
}

/* ==========================================================================
   Collapsible "Kategorien" widget in the shop sidebar (WooCommerce Site
   Toolkit / Product Categories block). This block already renders real nested
   lists; the script assets/js/category-collapse.js marks parents (.has-subcats)
   and toggles .is-open. Here we collapse nested sublists by default and reveal
   them when their parent item is open. Scoped to .heim-toolbar-widget so no
   other product-categories block is affected.
   Remove this block (+ the toolkit section in the JS file) to revert.
   ========================================================================== */
.heim-toolbar-widget .wc-block-product-categories-list .wc-block-product-categories-list {
  overflow: hidden;
  max-height: 0;
  /* Zero the margin so a collapsed (max-height:0) sublist contributes no
     vertical space — otherwise parent categories sit further from the next row
     than childless ones (e.g. NEU im Sortiment, Regale), giving uneven gaps. */
  margin: 0;
  transition: max-height 0.3s ease;
}

/* Generous upper bound — only needs to exceed the tallest open sublist.
   Restore the 8px top gap (removed above for the collapsed state) so an open
   sublist keeps the same rhythm between the parent and its first child. */
.heim-toolbar-widget .wc-block-product-categories-list-item.is-open > .wc-block-product-categories-list {
  max-height: 1500px;
  margin-top: 8px;
}

/* ==========================================================================
   Fold/unfold chevron on category rows that have children (both menus).
   Added by assets/js/category-collapse.js next to the category name: it points
   right while the sublist is closed and rotates to point down once it is open,
   so an unfolded branch always shows a down-arrow to collapse it again.
   The category name itself stays a plain link and navigates.
   ========================================================================== */
.uer-subcat-toggle {
  /* Reset the theme's button styling — this is an icon, not a button. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 0 6px;
  /* Height is pinned to the glyph and the vertical padding dropped, so the
     button never grows the row: a category with children now lines up at the
     same pitch as one without. The touch target is restored by the ::after
     overlay below, which is positioned and therefore costs no layout. */
  padding: 0 6px;
  height: 16px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Comfortable tap target without taking part in the row's layout. */
.uer-subcat-toggle::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
.uer-subcat-toggle:hover,
.uer-subcat-toggle:focus-visible {
  background: none;
  color: inherit;
}
/* Only unfolded rows carry a chevron. Collapsed rows use visibility rather than
   display: the button is undrawn, unclickable and skipped by the keyboard — but
   it keeps its box, so row spacing is identical whether a row is open or not.
   Opening a category happens by clicking the category itself, not this control. */
.uer-subcat-toggle {
  visibility: hidden;
}
/* Open: chevron points down, and clicking it folds the sublist again. */
.has-subcats.is-open > .uer-subcat-toggle {
  visibility: visible;
  transform: rotate(90deg);
}
.has-subcats.is-open > .uer-subcat-toggle:hover {
  opacity: 0.6;
}

/* Side "Kategorien" menu font size. */
.heim-toolbar-widget .wc-block-product-categories-list {
  font-size: 14px;
}

/* The exact category currently being viewed (e.g. the open subcategory) keeps
   the same underline it shows on hover, so the active item stays marked. */
.heim-toolbar-widget .wc-block-product-categories-list-item.is-current > a {
  text-decoration-color: var(--global--color-font);
}

/* ==========================================================================
   Product page spacing: breathing room below the attributes table (moved into
   the summary by functions.php) and above the "Ähnliche Produkte" section.
   ========================================================================== */
/* Breathing room below the table, before the cart button. Relative (rem) so it
   scales with the root font size across devices. 1.5rem ≈ 24px at the default. */
.uer-product-attributes {
  padding-bottom: 1.5rem;
}
.related.products {
  padding-top: 2.5rem;
}

/* Hide the SKU ("Artikelnummer: …") in the product meta. !important to beat
   WooCommerce's own ".product_meta > span { display: block }" rule. */
.product_meta .sku_wrapper {
  display: none !important;
}

/* Gap between the cart button and the product meta (Kategorien) — matched to
   the attributes table's bottom padding (1.5rem). More specific than
   WooCommerce's form.cart rule so it wins without !important. */
.woocommerce div.product .summary form.cart {
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   Hero background slider.
   Auto-sliding image slideshow behind the front-page hero. The markup is
   injected by the render_block filter in functions.php from the editable
   "uer-hero-slides" gallery inside the hero Cover block; hero-slider.js
   animates it. It sits as a background layer inside the Cover, beneath the dim
   overlay (.wp-block-cover__background) and the inner content — matching the
   Cover's own image-background layer.

   To revert: delete this block, the matching section in functions.php,
   assets/js/hero-slider.js, and the "uer-hero-slides" gallery on the Home page.
   ========================================================================== */
.uer-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.uer-hero-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.uer-hero-slider__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.uer-hero-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .uer-hero-slider__track {
    transition: none !important;
  }
}
/* Safety net: if the filter ever fails to relocate the source gallery, keep the
   raw gallery out of the rendered hero rather than dumping thumbnails on top. */
.wp-block-cover .uer-hero-slides {
  display: none;
}

/* =====================================================================
 * Catalogue image zoom (replaces the parent's second-image hover swap).
 *
 * The wrapper clips the overflow so the scaled image reads as a magnifier;
 * the transform keeps the layout static. JS (assets/js/catalogue-zoom.js)
 * sets transform-origin so the zoom focal point follows the cursor.
 * ===================================================================== */
.heim-woocommerce-loop-product-thumbnail {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* The bottom spacing lived on the <img>; move it to the wrapper so the wrapper
   is the true image box that clips the zoom. */
.woocommerce ul.products li.product a .heim-woocommerce-loop-product-thumbnail img {
  margin-bottom: 0;
  transform-origin: center center;
  will-change: transform;
  /* Smooth the zoom in/out. Only `transform` (the scale) is eased — the
     cursor-following pan changes transform-origin, which is intentionally not
     transitioned so it tracks the pointer without lag. */
  transition: transform 0.7s ease;
}

@media (max-width: 1080px) {
  .heim-woocommerce-loop-product-thumbnail {
    margin-bottom: 0.75rem;
  }
}

/* Zoom on hover, non-touch only (mirrors the parent's .heim-no-touch gate).
   Also override the parent's slight hover dim so the zoomed image stays crisp. */
.woocommerce.heim-no-touch ul.products li.product a:hover .heim-woocommerce-loop-product-thumbnail img,
.woocommerce.heim-no-touch ul.products li.product a:hover img:first-of-type {
  opacity: 1;
}

.woocommerce.heim-no-touch ul.products li.product a:hover .heim-woocommerce-loop-product-thumbnail img {
  transform: scale(1.25);
}

/* ==========================================================================
   Breadcrumb on the shop & product archives.
   The theme already outputs a breadcrumb ("Start / Shop / …") at the top of
   <main>, but hides it everywhere except the product summary (parent
   woocommerce.css: ".woocommerce .woocommerce-breadcrumb { display: none }").
   Here we reveal it on catalog pages and present it left-aligned above the
   products header. The parent's own rules (delimiter, hover underline, dimmed
   current item) still apply, so it stays visually consistent with the site.
   ========================================================================== */
.woocommerce.post-type-archive-product #main > .woocommerce-breadcrumb,
.woocommerce.tax-product_cat #main > .woocommerce-breadcrumb,
.woocommerce.tax-product_tag #main > .woocommerce-breadcrumb {
  /* inline-block so the "← Zurück" link can sit on the same line to its left. */
  display: inline-block;
  vertical-align: top;
  text-align: left;
  border-top: 0;
  font-size: 14px;
  margin: 0 0 0.5rem;
  padding: 1.5rem 0 1rem;
}

/* ==========================================================================
   Back link ("← Zurück") beside the breadcrumb.
   Sits to the left of the breadcrumb on the catalog surfaces, in the same box
   (size/padding) so the baselines line up, with a gap to the breadcrumb.
   Mirrors the breadcrumb link style: inherits colour, underline hidden until
   hover (rendered by functions.php, runs history.back()).
   To revert: delete this section and the matching PHP block in functions.php.
   ========================================================================== */
.woocommerce.post-type-archive-product #main > .uer-back,
.woocommerce.tax-product_cat #main > .uer-back,
.woocommerce.tax-product_tag #main > .uer-back,
.woocommerce.single-product #main > .uer-back {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  color: inherit;
  /* Same vertical box as the breadcrumb (aligned baselines) + right gap. */
  padding: 1.5rem 0 1rem;
  margin: 0 1.25rem 0.5rem 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.uer-back__arrow {
  /* inline-block keeps the link's hover underline from crossing the arrow —
     only the "Zurück" text gets underlined. */
  display: inline-block;
  margin-right: 0.15rem;
}
@media (hover: hover) {
  .woocommerce.post-type-archive-product #main > .uer-back:hover,
  .woocommerce.tax-product_cat #main > .uer-back:hover,
  .woocommerce.tax-product_tag #main > .uer-back:hover,
  .woocommerce.single-product #main > .uer-back:hover {
    text-decoration-color: var(--global--color-font);
  }
}

/* ==========================================================================
   Shop landing category grid.
   Replaces the product loop on the "Katalog" (shop) page with clickable
   category image tiles (rendered by the "Shop landing category grid" block in
   functions.php). Four square tiles per row on desktop, degrading to 2 / 1 on
   smaller screens. Sidebar and breadcrumbs are unaffected.
   To revert: delete this section and the matching PHP block in functions.php.
   ========================================================================== */
.uer-category-grid {
  list-style: none;
  /* Match the ~72px of top spacing (breadcrumb block) below the grid too. */
  margin: 0 0 4.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.uer-category-grid__item {
  margin: 0;
  list-style: none;
}
.uer-category-grid__link {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-shadow: none;
}
.uer-category-grid__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.uer-category-grid__link:hover .uer-category-grid__image,
.uer-category-grid__link:focus-visible .uer-category-grid__image {
  transform: scale(1.04);
}
/* Labelled fallback if an image file is missing. */
.uer-category-grid__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  text-align: center;
  background: #16233c;
  color: #fff;
  font-size: 1.25rem;
}
@media (max-width: 900px) {
  .uer-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .uer-category-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Single product: "Das könnte dir auch gefallen …" (Up-sells) section spacing.
   Symmetric top/bottom, and +50% over the theme's base values for a more airy
   look. Base (parent) was 38px desktop / 54px ≤1023 / 44px ≤460 → here 57 / 81
   / 66px on BOTH sides (we override the parent's margin-bottom too).
   (Related products are disabled, so .upsells is the last section.)
   ========================================================================== */
.woocommerce div.product .upsells {
  margin-top: 57px;
  margin-bottom: 57px;
}
@media (max-width: 1023px) {
  .woocommerce div.product .upsells {
    margin-top: 81px;
    margin-bottom: 81px;
  }
}
@media (max-width: 460px) {
  .woocommerce div.product .upsells {
    margin-top: 66px;
    margin-bottom: 66px;
  }
}

/* Hide the "new" product label. */
.heim-label-itsnew {
  display: none;
}

/* Full-bleed category header image (shown only when a category Thumbnail is set).
   Image sits in the background, covered by a 40% black overlay — matching the
   overlay baked into the category tile images — with the category name/description
   laid on top. */
.uer-category-header {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 2.5rem;
  height: 360px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uer-category-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
/* Flush the banner to the top/bottom: drop the products-header margins around it.
   Position the header so the bar can align to the content container (not the full-bleed edge). */
.woocommerce-products-header:has(.uer-category-header) {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}
.uer-category-header {
  margin-top: 0;
  margin-bottom: 0;
}
/* Top bar over the image: Zurück + breadcrumb, in white. Sits inside the products-header
   container, so it lines up with the content just like on other pages. */
.uer-category-header__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  font-size: 14px; /* match the Zurück link's original size (theme content default). */
}
.uer-category-header__bar,
.uer-category-header__bar a,
.uer-category-header__bar .uer-back,
.uer-category-header__bar .woocommerce-breadcrumb,
.uer-category-header__bar .woocommerce-breadcrumb a {
  margin: 0;
  color: #fff;
}
/* White underline under Zurück (theme defaults it to navy). */
.uer-category-header__bar .uer-back {
  text-decoration-color: #fff;
}
.uer-category-header__bar .woocommerce-breadcrumb {
  display: block;
  padding: 0;
  border-top: 0; /* remove the theme's grey top divider line. */
}
/* Breadcrumb links: white hover underline (theme defaults it to navy). */
.uer-category-header__bar .woocommerce-breadcrumb a:hover {
  text-decoration-color: #fff;
}
.uer-category-header__inner {
  position: relative;
  z-index: 1; /* above the overlay */
  max-width: 100%;
  padding: 0 1.5rem;
  text-align: center;
  color: #fff;
}
.uer-category-header__title {
  margin: 0;
  color: #fff;
}
.uer-category-header__desc {
  margin: 0.5rem 0 0;
  color: #fff;
}
@media (max-width: 768px) {
  .uer-category-header {
    height: 100px;
  }
}

/* ==========================================================================
   Homepage customer endorsements → horizontal slider with prev/next arrows
   (see endorsements-marquee.js).
   ========================================================================== */
.uer-endorsements {
  position: relative;
}
/* The columns block sits in a constrained group, which caps it at the narrow content
   width. Let the slider fill the full (wide) group width instead. */
.uer-endorsements.wp-block-columns {
  max-width: none;
  width: 100%;
}
.uer-endorsements__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: hide scrollbar */
}
.uer-endorsements__viewport::-webkit-scrollbar {
  display: none; /* WebKit: hide scrollbar */
}
/* The track carries the cards so the script can put the sub-pixel part of the slow
   drift on a transform. scrollLeft snaps to whole device pixels, which turns an 11px/s
   glide into ~8 visible jumps a second; a transform is fractional and composited. */
.uer-endorsements__track {
  display: flex;
  will-change: transform;
}
.uer-endorsements__track > .wp-block-column {
  flex: 0 0 auto !important;
  width: 356px; /* match the homepage category tiles (4-col block). */
  max-width: 356px;
  /* Fixed per-card pitch (width + gap) so one set is an exact multiple → seamless loop. */
  margin: 0 32px 0 0;
  scroll-snap-align: start;
  /* Let the inner grey card fill the full (tallest) card height. */
  display: flex;
  flex-direction: column;
}
/* Inner grey group grows to fill the card, so all cards are equal height with the
   extra space appearing after the content. */
.uer-endorsements__track > .wp-block-column > * {
  flex: 1 1 auto;
}
/* Small centered prev/next arrows. */
.uer-endorsements__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: #0b192b;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.uer-endorsements__nav:hover {
  background: #004065;
  color: #fff;
}
.uer-endorsements__nav[hidden] {
  display: none;
}
.uer-endorsements__nav--prev {
  left: 8px;
}
.uer-endorsements__nav--next {
  right: 8px;
}
@media (max-width: 768px) {
  .uer-endorsements__track > .wp-block-column {
    width: 280px;
    max-width: 280px;
  }
}

/* ==========================================================================
   Checkout: highlight the "Lieferung" (abholung_event) and "Aufbau"
   (aufbau_event) selects, each in its own blue box.
   Dropdown stays left/top aligned; padding keeps the box within the form width.
   ========================================================================== */
.wc-block-components-select-input-abholung_event,
.wc-block-components-select-input-aufbau_event {
  box-sizing: border-box;
  max-width: 100%;
  margin: 12px 0 0; /* no big gap below. */
  padding: 24px 24px 28px;
  background: #004065;
}
/* Neutralise the inner wrapper's top margin so the blue box has equal breathing
   room above the label and below the dropdown. */
.wc-block-components-select-input-abholung_event .wc-blocks-components-select,
.wc-block-components-select-input-aufbau_event .wc-blocks-components-select {
  margin: 0;
}
/* Keep the dropdown left/top aligned within the blue box. */
.wc-block-components-select-input-abholung_event .wc-blocks-components-select__container,
.wc-block-components-select-input-aufbau_event .wc-blocks-components-select__container {
  width: 100%;
  max-width: 420px;
  margin-left: 0;
  margin-right: 0;
}
/* White labels so they read on the blue box. */
.wc-block-components-select-input-abholung_event .wc-blocks-components-select__label,
.wc-block-components-select-input-aufbau_event .wc-blocks-components-select__label {
  color: #fff !important;
}

/* Collapse empty additional-field grid cells (they leave a big blank gap in the
   grid below the box because of the row-gap). */
.wc-block-checkout__additional-fields__field:empty {
  display: none;
}

/* Testimonial author images (endorsements slider): round + fill the circle. */
.uer-endorsements figure.wp-block-image img {
  border-radius: 50% !important;
  object-fit: contain !important; /* letterbox the logo inside the circle */
  background: #fff;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

/* Accordion headings (e.g. /service/): no hover styling on the toggle.
   The toggle is a <button>, so the theme's global button:hover (blue background +
   font color swap) applies to it — override it back to the resting state. */
.wp-block-accordion .wp-block-accordion-heading__toggle:hover,
.wp-block-accordion .wp-block-accordion-heading__toggle:active {
  background-color: transparent;
  color: inherit;
  opacity: 1;
}
.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

/* Vertikaler Rhythmus der Startseite (page-id-121).
   Das Eltern-Theme legt ueber --cover--spacing-vertical (heim/style.css:187,
   angewandt in Zeile 3684/3685) auf jeden Block der obersten Ebene 26px
   margin-block. Zusammen mit den Spacer-Bloecken und den uneinheitlichen
   Section-Paddings ergaben sich Abstaende zwischen 26px und 148px.

   Hier gilt: Abstaende kommen ausschliesslich aus dem Padding der Abschnitte,
   nicht aus Block-Margins. Damit gibt es pro Uebergang genau eine Stellschraube.
   Padding statt gap, weil mehrere Abschnitte Hintergrundbild oder -farbe tragen
   und der Weissraum innerhalb der farbigen Flaeche liegen muss.

   Die Skala beschreibt das Padding JE SEITE. Zwei benachbarte Abschnitte
   ergeben also den doppelten Wert: uer-m (48px) -> 96px sichtbarer Abstand.

   Bewusst auf die Startseite begrenzt - die uebrigen Seiten verlassen sich noch
   auf den 26px-Grundabstand. Beim Ausrollen .home entfernen und Seite fuer Seite
   pruefen. Abstufungen: heim-child/theme.json (uer-xs / uer-s / uer-m / uer-l). */
.home .entry-content > * {
	margin-block: 0;
}

.home .entry-content > .wp-block-group,
.home .entry-content > .wp-block-columns,
.home .entry-content > .wp-block-cover,
.home .entry-content > .wc-block-grid {
	padding-block: var(--wp--preset--spacing--uer-m);
}


/* ===========================================================================
   Overscroll-Farbe am unteren Seitenrand ("Rubber Band" auf macOS/iOS)
   ===========================================================================

   Zieht man unten ueber das Seitenende hinaus, war der freigelegte Streifen
   bisher cremefarben, weil der Canvas seinen Hintergrund vom <body> erbt
   (#f8f7f3). Unter dem dunklen Footer wirkt das wie ein heller Riss.

   Oben soll es reinweiss sein (#fff), unten die Footer-Farbe. Zwei verschiedene
   Farben an den beiden Enden gehen nur ueber einen Verlauf auf <html>:

   - background-attachment: fixed verankert den Verlauf am Viewport, nicht am
     Dokument. Beim Ueberziehen wandert der Inhalt, der Verlauf bleibt stehen -
     oben wird die obere Haelfte sichtbar, unten die untere.
   - Der harte Umschlag bei 50% ist nie zu sehen, weil der <body> den Viewport
     immer vollstaendig ueberdeckt (siehe min-height unten).

   Die untere Farbe kommt aus dem Eltern-Theme (--footer--background-color,
   #0b192b) und zieht automatisch mit, wenn dort die Footer-Farbe geaendert wird.
   Oben steht bewusst ein fester Wert: #fff ist eine gestalterische Entscheidung
   und entspricht keiner gerenderten Flaeche der Seite - der Header ist
   transparent, die Seitenflaeche darunter cremefarben (#f8f7f3). */

html {
	background-image: linear-gradient(
		to bottom,
		#fff 0 50%,
		var(--footer--background-color, #0b192b) 50% 100%
	);
	background-attachment: fixed;
}

/* Pflicht, nicht Kosmetik: Auf Seiten, die kuerzer als der Viewport sind, wuerde
   sonst die dunkle Haelfte des Verlaufs unterhalb des Inhalts durchscheinen.
   Der Body traegt die Body-Farbe bereits selbst - er muss nur sicher bis zur
   Viewport-Unterkante reichen. */
body {
	min-height: 100vh;
}

/* Anfrage-Modell, mobiles Layout: Im schmalen Viewport rendert WooCommerce die
   Anfrageübersicht als aufklappbares Feld. Die Summen liegen dort NICHT in
   __content (das die Regeln oben abdecken), sondern direkt im Übersichtsblock
   bzw. im Kopf des Aufklappers. Beides muss eigens ausgeblendet werden:
   - Summenzeile "Gesamtsumme 0,00 €" im Aufklapper
   - Betrag neben der Überschrift "Anfrageübersicht" (Überschrift bleibt) */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block),
.wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount,
.wc-block-components-checkout-order-summary__title .wc-block-components-totals-item__value {
  display: none !important;
}