/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from woocommerce.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 6
 */
/* =============================================================
   Inverta Theme — WooCommerce (Master Importer)

   The shop used to be twenty-seven lines: a button colour and a price
   colour, with WooCommerce's own stylesheet doing everything else. It
   worked, but it was visibly a different site from the one above it.

   Four modules now, in load order:

     woo-base.css    tokens, notices, buttons, inputs, pagination
     woo-loop.css    the toolbar, the grid, the product card
     woo-single.css  gallery, summary, tabs, reviews
     woo-cart.css    basket and checkout, table on desktop, stack on phones
     woo-blocks.css  the Cart and Checkout blocks, which is what those two
                     pages actually render

   Every rule is scoped to WooCommerce's own classes. They appear on
   pages the theme does not otherwise touch, and an unscoped rule here
   would reach the account pages and the comment form as well.
   ============================================================= */


/* ── woo-base.css ── */
/* =============================================================
   Inverta — WooCommerce: shared ground

   Tokens, notices, buttons, form controls and pagination. Everything
   here is expressed in the site's own variables, so the shop follows
   "Design-Grundlagen" and "Farben" like any section does — change the
   rounding once and the product cards, the quantity box and the
   pagination pills all move with it.

   Scoped to .woocommerce (and the shop's own containers) throughout.
   These class names belong to the plugin and appear on pages the theme
   does not control, so a bare rule here would reach further than the
   shop.
   ============================================================= */

.woocommerce,
.woocommerce-page {
  /* Read through a -set token, not written directly: the option lands on
     :root, and a declaration on this element would outrank the inherited one
     and quietly kill the control. */
  --inv-shop-gap: var(--inv-shop-gap-set, clamp(16px, 1.8vw, 26px));
  --inv-shop-radius: var(--inv-radius, 16px);
  --inv-shop-radius-sm: var(--inv-radius-sm, 10px);
  --inv-shop-line: var(--inv-border, #e2e8f0);
  --inv-shop-muted: var(--inv-muted-fg, #64748b);
  --inv-shop-surface: var(--inv-surface, #ffffff);
  --inv-shop-accent: var(--inv-accent, #24a9b3);
  --inv-shop-dur: var(--inv-motion, 400ms);
  --inv-shop-ease: var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
}

/* -------------------------------------------------------------
   Notices

   Dieselbe Sprache wie der Hinweis nach „In den Warenkorb“
   (components/cart-notice.css): ein runder Punkt mit Zeichen vorn — Haken,
   „i“, Ausrufezeichen —, der Satz, der Knopf am Ende. Bis 1.1.8 waren es
   weiße Balken über die ganze Breite mit einem farbigen Strich links, und
   der schwarze Knopf darin sah aus wie die Hauptsache der Seite (gemeldet am
   12.10.2026 mit einem Bildschirmfoto der Warenkorb-Seite).

   Die Art färbt nur den Punkt und einen Hauch der Fläche: Erfolg im Akzent
   des Shops, Hinweis in der Schriftfarbe, Fehler rot.

   Die Zeichen sind CSS-Masken, nicht WooCommerces Schriftsymbole: die Schrift
   „WooCommerce“ lädt die Theme nicht, und ohne sie stünde dort ein Kästchen.
   ------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  --inv-nt-c: var(--inv-shop-accent, #24a9b3);
  --inv-nt-ink: var(--inv-accent-fg, #0f172a);
  --inv-nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  margin: 0 0 var(--inv-shop-gap, 16px);
  padding: 14px 16px 14px 56px;
  border: 1px solid color-mix(in srgb, var(--inv-nt-c) 22%, var(--inv-shop-line, #e2e8f0));
  border-radius: var(--inv-shop-radius, 16px);
  background: color-mix(in srgb, var(--inv-nt-c) 5%, var(--inv-shop-surface, #fff));
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .35);
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  list-style: none;
  outline: 0;
}

.woocommerce .woocommerce-info {
  --inv-nt-c: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  --inv-nt-ink: var(--inv-shop-surface, #fff);
  --inv-nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11v6M12 7.2v.01' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--inv-shop-surface, #fff);
  border-color: var(--inv-shop-line, #e2e8f0);
}

.woocommerce .woocommerce-error {
  --inv-nt-c: var(--inv-destructive, #dc2626);
  --inv-nt-ink: #fff;
  --inv-nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 16.8v.01' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Der Punkt. WooCommerces eigenes ::before (Schriftsymbol, lila Strich oben)
   wird dafür übernommen. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--inv-nt-c);
}

.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 21px;
  inset-block-start: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--inv-nt-ink);
  -webkit-mask: var(--inv-nt-icon) center / contain no-repeat;
  mask: var(--inv-nt-icon) center / contain no-repeat;
}

/* Mehrere Fehler untereinander: der Punkt an die erste Zeile. */
.woocommerce ul.woocommerce-error:has(> li + li) {
  display: block;
}

.woocommerce ul.woocommerce-error:has(> li + li)::before {
  inset-block-start: 14px;
  margin-top: 0;
}

.woocommerce ul.woocommerce-error:has(> li + li)::after {
  inset-block-start: 19px;
  margin-top: 0;
}

.woocommerce .woocommerce-error li {
  margin: 0;
  padding: 0;
}

.woocommerce .woocommerce-error li + li {
  margin-top: 6px;
}

.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-error a:not(.button) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * Der Knopf im Hinweis.
 *
 * WooCommerce schreibt ihn mal vor, mal hinter den Satz („Warenkorb
 * anzeigen“ davor, „Weiter einkaufen“ dahinter). Er steht immer am Ende der
 * Zeile, und er ist leiser als die Knöpfe der Seite: getönt in der Farbe der
 * Meldung, gefüllt erst beim Überfahren. Der schwarze Block von vorher zog
 * den Blick vom „Weiter zur Kasse“ des Warenkorbs ab.
 *
 * flex:none nimmt ihm die Schrumpferlaubnis — auf 390 px Breite ist sonst
 * „E-Mail-Adresse bestätigen" auf drei Zeilen umgebrochen. Unter 600 px
 * stehen Satz und Knopf untereinander.
 */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
  order: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--inv-nt-c) 35%, transparent);
  border-radius: var(--inv-radius-sm, 10px);
  background: color-mix(in srgb, var(--inv-nt-c) 12%, transparent);
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  box-shadow: none;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-message .button:focus-visible,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-info .button:focus-visible,
.woocommerce .woocommerce-error .button:hover,
.woocommerce .woocommerce-error .button:focus-visible {
  background: var(--inv-nt-c);
  border-color: var(--inv-nt-c);
  color: var(--inv-nt-ink);
  transform: none;
}

@media (max-width: 600px) {
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-error {
    flex-direction: column;
    align-items: flex-start;
    padding-inline-start: 52px;
  }

  .woocommerce .woocommerce-message::before,
  .woocommerce .woocommerce-info::before,
  .woocommerce .woocommerce-error::before {
    inset-block-start: 14px;
    margin-top: 0;
    inset-inline-start: 14px;
  }

  .woocommerce .woocommerce-message::after,
  .woocommerce .woocommerce-info::after,
  .woocommerce .woocommerce-error::after {
    inset-block-start: 19px;
    margin-top: 0;
    inset-inline-start: 19px;
  }

  .woocommerce .woocommerce-message .button,
  .woocommerce .woocommerce-info .button,
  .woocommerce .woocommerce-error .button {
    margin-inline-start: 0;
  }
}

/* -------------------------------------------------------------
   Buttons — the site's button, everywhere the shop asks for one
   ------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--inv-shop-btn-py, .8rem) var(--inv-shop-btn-px, 1.4rem);
  /* „Rahmenstärke“ aus den Design-Grundlagen: die feste 1px hier war der
     Grund, aus dem der Regler jeden Knopf im Shop verfehlte — gemessen am
     01.10.2026 an .inv-shop-choose. */
  border: var(--inv-border-w, 1px) solid transparent;
  /* Fünf Tokens, die „Knopf auf der Karte“ im Customizer schreibt. Jedes
     fällt auf genau das zurück, was vorher hier stand — ungesetzt ändert sich
     also nichts. */
  border-radius: var(--inv-shop-btn-radius, var(--inv-shop-radius-sm));
  background: var(--inv-shop-btn-bg, var(--inv-primary, #111827));
  color: var(--inv-shop-btn-ink, var(--inv-primary-fg, #fff));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-shop-btn-size, .9rem);
  font-weight: var(--inv-shop-btn-weight, 600);
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition:
    background-color calc(var(--inv-shop-dur) * .5) var(--inv-shop-ease),
    transform calc(var(--inv-shop-dur) * .5) var(--inv-shop-ease),
    box-shadow calc(var(--inv-shop-dur) * .5) var(--inv-shop-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--inv-btn-hover, #1e293b);
  color: var(--inv-primary-fg, #fff);
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -.5));
  box-shadow: var(--inv-shadow-card, 0 4px 16px -6px rgba(15, 23, 42, .14));
}

/* The quieter of the two — "continue shopping", "update cart". */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce a.added_to_cart {
  background: transparent;
  color: inherit;
  border-color: var(--inv-shop-line);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce a.added_to_cart:hover {
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 5%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, var(--inv-fg, #0f172a) 22%, transparent);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  padding: var(--inv-shop-btn-py, .8rem) var(--inv-shop-btn-px, 1.4rem);
}

/* -------------------------------------------------------------
   Form controls
   ------------------------------------------------------------- */
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select {
  width: 100%;
  min-height: 44px;
  padding: .6rem .9rem;
  font: inherit;
  font-size: .92rem;
  color: inherit;
  background: color-mix(in srgb, var(--inv-shop-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
  border-radius: var(--inv-shop-radius-sm);
  outline: none;
  transition:
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--inv-shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 18%, transparent);
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--inv-fg, #0f172a) 70%, transparent);
}

/* The coupon field takes the same treatment; its width is set in woo-cart.css,
   where the row it sits in is laid out. */
.woocommerce table.cart td.actions .coupon input[type="text"] {
  min-height: 44px;
  padding: .6rem .9rem;
  font: inherit;
  font-size: .92rem;
  color: inherit;
  background: color-mix(in srgb, var(--inv-shop-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
  border-radius: var(--inv-shop-radius-sm);
  outline: none;
}

/* The quantity stepper */
.woocommerce .quantity .qty {
  width: 5.5rem;
  min-height: 44px;
  padding: .6rem .5rem;
  text-align: center;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--inv-shop-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
  border-radius: var(--inv-shop-radius-sm);
}

/* -------------------------------------------------------------
   Price
   ------------------------------------------------------------- */
.woocommerce .price,
.woocommerce span.amount {
  color: var(--inv-fg, #0f172a);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.woocommerce .price del,
.woocommerce del span.amount {
  color: var(--inv-shop-muted);
  font-weight: 500;
  opacity: 1;
  margin-right: .4rem;
}

.woocommerce .price ins,
.woocommerce ins span.amount {
  text-decoration: none;
  color: var(--inv-shop-accent);
}

/* -------------------------------------------------------------
   Rating
   ------------------------------------------------------------- */
.woocommerce .star-rating {
  color: var(--inv-shop-accent);
  font-size: .8em;
}

.woocommerce .star-rating::before {
  color: color-mix(in srgb, var(--inv-fg, #0f172a) 18%, transparent);
}

/* -------------------------------------------------------------
   Pagination
   ------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
  margin-top: clamp(28px, 4vw, 48px);
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .7rem;
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius-sm);
  background: var(--inv-shop-surface);
  color: inherit;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition:
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    transform var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--inv-shop-accent);
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -.4));
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--inv-primary, #111827);
  border-color: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce nav.woocommerce-pagination ul li a {
    transition: none;
  }

  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce nav.woocommerce-pagination ul li a:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------
   The catalogue's opening band

   The same capsule the front page is built from — rounded, on its own
   surface, with a picture behind it when there is one — instead of the
   breadcrumb-and-heading strip WordPress gives an archive.
   ------------------------------------------------------------- */
.inv-shop-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: var(--inv-shop-hero-h, 260px);
  margin-bottom: var(--inv-shop-gap);
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  background: color-mix(in srgb, var(--inv-shop-surface) 70%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.inv-shop-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark enough at the foot for white type, clear at the top so the picture is
   still a picture. */
.inv-shop-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, #0f172a 78%, transparent) 0%,
    color-mix(in srgb, #0f172a 34%, transparent) 52%,
    transparent 100%);
}

.inv-shop-hero__body {
  display: grid;
  gap: .4rem;
  max-width: 46ch;
}

.inv-shop-hero__title {
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.inv-shop-hero__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: color-mix(in srgb, currentColor 76%, transparent);
}

.inv-shop-hero__crumbs {
  font-size: .78rem;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

.inv-shop-hero__crumbs a {
  color: inherit;
  text-decoration: none;
}

.inv-shop-hero__crumbs a:hover {
  color: var(--inv-shop-accent);
}

/* With a picture behind it the band carries its own ink, whatever the page's
   colours are. */
.inv-shop-hero--image {
  color: #fff;
  border-color: transparent;
}

.inv-shop-hero--image .inv-shop-hero__crumbs a:hover {
  color: #fff;
}


/* -------------------------------------------------------------
   Der Shop-Knopf auf Tablett und Telefon

   Schriftgrösse und Innenabstand standen auf jedem Gerät gleich:
   gemessen am 06.10.2026 war „In den Warenkorb" bei 1280, 768 und
   390 px 47 px hoch, mit 12,8/22,4 px Innenabstand. Jetzt sind beide
   je Gerät einstellbar — darum liest jeder Medienblock
   `var(--x-mob, var(--x-tab, <Entwurfswert>))`.
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt {
    padding: var(--inv-shop-btn-py-tab, .7rem) var(--inv-shop-btn-px-tab, 1.2rem);
    font-size: var(--inv-shop-btn-size-tab, .85rem);
  }
}

@media (max-width: 640px) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt {
    padding:
      var(--inv-shop-btn-py-mob, var(--inv-shop-btn-py-tab, .625rem))
      var(--inv-shop-btn-px-mob, var(--inv-shop-btn-px-tab, 1rem));
    font-size: var(--inv-shop-btn-size-mob, var(--inv-shop-btn-size-tab, .8rem));
  }
}


/* ── woo-loop.css ── */
/* =============================================================
   Inverta — WooCommerce: the catalogue

   The toolbar, the product grid, the card, and the category tiles.

   The card is built from the three wrappers inc/woocommerce.php prints
   on the plugin's own hooks — media, body, foot — which is what lets
   the picture keep a fixed ratio and the button sit at the bottom of
   every card whatever the title's length. WooCommerce's own markup is
   untouched, so a plugin update cannot break the layout.
   ============================================================= */

/* -------------------------------------------------------------
   Toolbar: how many, and in what order
   ------------------------------------------------------------- */
.inv-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--inv-shop-gap);
  margin-bottom: clamp(20px, 2.6vw, 32px);
  padding-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--inv-shop-line);
}

.woocommerce .inv-shop-toolbar .woocommerce-result-count {
  margin: 0;
  float: none;
  font-size: .85rem;
  color: var(--inv-shop-muted);
}

.woocommerce .inv-shop-toolbar .woocommerce-ordering {
  margin: 0;
  float: none;
}

/* The sorting control, built like the hero's finder selects.
 *
 * Same shape — glass under a blur, a lit top edge, the theme's rounding and
 * its own chevron drawn in the SVG rather than the platform's arrow. The ink
 * differs on purpose: the hero's sits on a dark stage and is white, this one
 * sits on the page and takes the page's text colour. Copying the colours as
 * well would have been white on white. */
.woocommerce .inv-shop-toolbar .woocommerce-ordering select {
  min-width: 15rem;
  height: 40px;
  min-height: 40px;
  padding: 0 30px 0 14px;
  color: inherit;
  background-color: color-mix(in srgb, var(--inv-shop-surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 85%, transparent);
  border-radius: var(--inv-shop-radius-sm);
  font-size: .86rem;
  font-weight: 500;
  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230f172a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce .inv-shop-toolbar .woocommerce-ordering select:hover {
  background-color: color-mix(in srgb, var(--inv-shop-surface) 75%, transparent);
}

.woocommerce .inv-shop-toolbar .woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--inv-shop-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* -------------------------------------------------------------
   The grid

   One grid rule rather than WooCommerce's floated columns-N widths.
   auto-fill with a minimum track means the catalogue reflows on any
   screen without a breakpoint per column count.
   ------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  --inv-shop-col: var(--inv-shop-col-set, 240px);
  grid-template-columns: repeat(auto-fill, minmax(var(--inv-shop-col), 1fr));
  gap: var(--inv-shop-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

/* The attribute selector is doing real work here.
 *
 * WooCommerce sizes its products with `.woocommerce ul.products.columns-4
 * li.product { width: 22.05% }` — four classes, where the obvious reset
 * `.woocommerce ul.products li.product` has three. Written that way the
 * release of the width simply loses, and every card sits at a quarter of its
 * own grid track. Matching [class*="columns-"] brings this to the same
 * specificity, and it loads after the plugin, so it wins whichever column
 * count the loop asked for. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  /* The grid owns placement now, so the plugin's float layout is released. */
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  clear: none;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Each of the four reads through an option first and falls back to the
     design's own token. A blank option is never written, so the fallback is
     what applies — which is how "Stil der Karte" can be left entirely alone
     and the card still follows "Design-Grundlagen". */
  border: 1px solid var(--inv-shop-card-line, var(--inv-shop-line));
  border-radius: var(--inv-shop-card-radius, var(--inv-shop-radius));
  background: var(--inv-shop-card-bg, var(--inv-shop-surface));
  box-shadow: var(--inv-shop-card-shadow, var(--inv-shadow-card, 0 4px 16px -6px rgba(15, 23, 42, .14)));
  transition:
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease);
}

/* The card does not move on hover. Twelve cards that lift as the pointer
   crosses them is a lot of motion for a grid you are scanning; the border and
   the change of picture are enough to say which one you are on. */
.woocommerce ul.products li.product:hover {
  border-color: color-mix(in srgb, var(--inv-shop-accent) 45%, var(--inv-shop-line));
  box-shadow: var(--inv-shadow-elegant, 0 30px 80px -30px rgba(15, 23, 42, .1));
}

/* -------------------------------------------------------------
   The three finishes, and the three answers to a pointer

   A class per chosen value rather than a token, because what changes is a
   set of declarations rather than one number. The body carries the class,
   so the live preview swaps between them without a reload.
   ------------------------------------------------------------- */
.inv-shopcard-sh-none   { --inv-shop-card-shadow: none; }
.inv-shopcard-sh-soft   { --inv-shop-card-shadow: var(--inv-shadow-card, 0 4px 16px -6px rgba(15, 23, 42, .14)); }
.inv-shopcard-sh-lifted { --inv-shop-card-shadow: 0 18px 44px -20px rgba(15, 23, 42, .38); }

.inv-shopcard-hov-none.woocommerce ul.products li.product:hover {
  border-color: var(--inv-shop-card-line, var(--inv-shop-line));
  box-shadow: var(--inv-shop-card-shadow, var(--inv-shadow-card, 0 4px 16px -6px rgba(15, 23, 42, .14)));
}

.inv-shopcard-hov-glow.woocommerce ul.products li.product:hover {
  border-color: color-mix(in srgb, var(--inv-shop-accent) 55%, var(--inv-shop-line));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--inv-shop-accent) 14%, transparent),
    0 24px 60px -28px color-mix(in srgb, var(--inv-shop-accent) 55%, transparent);
}

/* The link WooCommerce wraps around picture, title and price. It has to fill
   the card so the whole upper area is clickable. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* ---- media ---- */
.inv-shop-card__media {
  position: relative;
  /* 4:3 rather than a square. A square picture on a 260px column made a card
     roughly 380px tall before the title had been set, and a grid of those
     reads as a wall. The ratio is an option — "Bildformat" in Shop. */
  aspect-ratio: var(--inv-shop-ratio, 4 / 3);
  overflow: hidden;
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, transparent);
}

/* How the picture meets the frame is a choice — "Bild im Kartenrahmen".
 *
 * `cover` fills the frame and cuts off whatever does not fit, which is the
 * wrong default for a shop whose products are parts and accessories: a cable
 * cropped to a square is a cable you cannot identify. The single product page
 * already reasoned this way ("a product photograph that has been cut off is a
 * returned parcel") while the catalogue did the opposite, so the same picture
 * was whole on one page and trimmed on the other.
 *
 * Contained, the picture keeps its own proportions inside whatever frame the
 * ratio option sets, and changing the card's size or ratio re-fits it instead
 * of taking a different bite out of it. The space left over is card surface,
 * and the padding keeps the picture off the frame's edge. */
.woocommerce ul.products li.product .inv-shop-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--inv-shop-card-fitpad, 0px);
  object-fit: var(--inv-shop-card-fit, contain);
  display: block;
  transition: transform calc(var(--inv-shop-dur) * 2) var(--inv-shop-ease);
}

/* Tokens rather than two copies of the rules above, so a choice only says what
   it changes. Both classes sit on <body>; a missing class means the default. */
.inv-shopfit-cover {
  --inv-shop-card-fit: cover;
  --inv-shop-card-fitpad: 0px;
}

.inv-shopfit-contain {
  --inv-shop-card-fit: contain;
  --inv-shop-card-fitpad: var(--inv-shop-fit-pad, 10px);
}

/* No zoom on hover. The card already answers the pointer by lifting; a
   picture that grows at the same time means two things moving at once, and on
   a grid of twelve it is a scale animation per card. What changes is which
   photograph you are looking at, nothing else. */

/* -------------------------------------------------------------
   The second picture

   Printed by inc/woocommerce.php only when the product has a gallery, laid
   over the first and faded in on hover. Both pictures are in the same box at
   the same size, so nothing moves — what changes is which one you are
   looking at.
   ------------------------------------------------------------- */
.woocommerce ul.products li.product .inv-shop-card__media .inv-shop-card__alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The second picture sits in the same box as the first and must meet the
     frame the same way, or the swap on hover would also change the crop. */
  padding: var(--inv-shop-card-fitpad, 0px);
  object-fit: var(--inv-shop-card-fit, contain);
  opacity: 0;
  pointer-events: none;
  /* Short enough to feel like an answer rather than a wait: at the full
     motion duration the second picture was still arriving after the pointer
     had moved on. */
  transition: opacity var(--inv-shop-swap-dur, 320ms) ease;
}

.woocommerce ul.products li.product:hover .inv-shop-card__media .inv-shop-card__alt,
.woocommerce ul.products li.product:focus-within .inv-shop-card__media .inv-shop-card__alt {
  opacity: 1;
}

/* -------------------------------------------------------------
   While the picture is still coming

   A shimmer in the shape of the picture, rather than a white hole that fills
   in and shifts the grid. shop.js adds is-loading and takes it off on the
   image's own load event — so a card whose picture came from cache never
   shows this at all.
   ------------------------------------------------------------- */
@keyframes inv-shop-skeleton {
  from { transform: translateX(-100%); }

  to   { transform: translateX(100%); }
}

.inv-shop-skeleton .inv-shop-card__media.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--inv-shop-surface) 70%, transparent) 50%,
    transparent 100%);
  animation: inv-shop-skeleton 1.4s linear infinite;
}

.inv-shop-skeleton .inv-shop-card__media.is-loading img {
  opacity: 0;
}

.inv-shop-card__media img {
  transition: opacity calc(var(--inv-shop-dur) * 1.2) var(--inv-shop-ease);
}

/* -------------------------------------------------------------
   The cards arrive

   Numbered server-side (inv-shop-i-N on each <li>), so the wave runs in the
   order the catalogue is actually in and needs no measuring. Capped at
   twelve: a delay that keeps climbing stops reading as rhythm.

   Nothing is hidden at rest — the animation only exists between is-revealed
   landing on the grid and the keyframe finishing, and `backwards` returns
   each card to its own styles afterwards.
   ------------------------------------------------------------- */
@keyframes inv-shop-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.inv-shop-anim.woocommerce ul.products.is-revealed li.product,
body.inv-shop-anim ul.products.is-revealed li.product {
  animation: inv-shop-card-in var(--inv-shop-anim-dur, 780ms) cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--inv-shop-i, 0) * var(--inv-shop-anim-step, 55ms));
}

.inv-shop-i-1  { --inv-shop-i: 0; }

.inv-shop-i-2  { --inv-shop-i: 1; }

.inv-shop-i-3  { --inv-shop-i: 2; }

.inv-shop-i-4  { --inv-shop-i: 3; }

.inv-shop-i-5  { --inv-shop-i: 4; }

.inv-shop-i-6  { --inv-shop-i: 5; }

.inv-shop-i-7  { --inv-shop-i: 6; }

.inv-shop-i-8  { --inv-shop-i: 7; }

.inv-shop-i-9  { --inv-shop-i: 8; }

.inv-shop-i-10 { --inv-shop-i: 9; }

.inv-shop-i-11 { --inv-shop-i: 10; }

.inv-shop-i-12 { --inv-shop-i: 11; }

/* The sale flash, as a capsule in the corner instead of a circle over the
   picture's middle. */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: .3rem .7rem;
  border-radius: var(--inv-radius-full, 9999px);
  background: var(--inv-shop-accent);
  color: var(--inv-accent-fg, var(--inv-fg, #0f172a));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
  z-index: 2;
}

/* ---- body ---- */
.inv-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 auto;
  padding: var(--inv-shop-card-pad, clamp(12px, 1.2vw, 16px)) var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px)) 0;
}

.woocommerce ul.products li.product .inv-shop-card__body h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-shop-title-size, .95rem);
  font-weight: var(--inv-shop-title-weight, 600);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  /* Clamped, so one long product name cannot make its card taller than every
     other card in the row. How many lines is a setting. */
  display: -webkit-box;
  -webkit-line-clamp: var(--inv-shop-card-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.woocommerce ul.products li.product .inv-shop-card__body .price {
  margin: .2rem 0 0;
  font-size: var(--inv-shop-price-size, 1.05rem);
  font-weight: var(--inv-shop-price-weight, 700);
  color: var(--inv-shop-price-color, inherit);
}

/* An empty .price element still takes a line — WooCommerce prints the wrapper
   whatever is inside it. */
.woocommerce ul.products li.product .inv-shop-card__body .price:empty {
  display: none;
}

.woocommerce ul.products li.product .inv-shop-card__body .star-rating {
  margin: .15rem 0;
  float: none;
}

/* ---- foot ---- */
.inv-shop-card__foot {
  padding:
    var(--inv-shop-card-pad, clamp(10px, 1.1vw, 14px))
    var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px))
    var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
}

.woocommerce ul.products li.product .inv-shop-card__foot a.button,
.woocommerce ul.products li.product .inv-shop-card__foot .added_to_cart {
  width: 100%;
  min-height: var(--inv-shop-btn-h, 44px);
  margin: 0;
  font-size: var(--inv-shop-btn-size, .86rem);
}

/* „So breit wie die Beschriftung“ — der Knopf hört auf, die Karte zu füllen.
   Über die ganze Karte bleibt die Vorgabe: auf dem Telefon ist das der
   Unterschied zwischen treffen und danebentippen. */
body.inv-shopbtn-auto.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtn-auto.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtn-auto.woocommerce ul.products li.product .inv-shop-card__foot .added_to_cart,
body.inv-shopbtn-auto.woocommerce-page ul.products li.product .inv-shop-card__foot .added_to_cart {
  width: auto;
  align-self: flex-start;
}

.woocommerce ul.products li.product .inv-shop-card__foot .added_to_cart {
  margin-top: .5rem;
}

/* The label turns over on hover — "Beschriftung dreht sich beim Überfahren".
 *
 * The two copies come from inverta_shop_card_button_roll(); the mask is
 * .txt-anim, which components/header/header-nav.css already defines for the
 * menu, the CTA and everything else in the theme that does this. All that is
 * missing here is the trigger: that file lists the ancestors it knows by name,
 * and a catalogue card was not one of them.
 *
 * `:not([data-gsap-roll])` for the same reason it is there: GSAP marks the
 * elements it has taken over, and two engines moving one word fight. */
.woocommerce ul.products li.product .inv-shop-card__foot a.button:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* The button is a flex box with centred content; .txt-anim is the flex item and
   needs a line box of its own, or the mask has no height to clip against. */
.woocommerce ul.products li.product .inv-shop-card__foot a.button .txt-anim {
  display: block;
}

/* Bewegung aus heißt: das zweite Wort gibt es nicht. Ohne diese Regel stünde es
   unter dem ersten im Ausschnitt und wäre bei einer Schaltfläche, die zwei
   Zeilen braucht, zu sehen. */
.inv-no-motion.woocommerce ul.products li.product .inv-shop-card__foot a.button .txt-anim__inner::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product .inv-shop-card__foot a.button .txt-anim__inner::after {
    content: none;
  }

  .woocommerce ul.products li.product .inv-shop-card__foot a.button:hover .txt-anim__inner {
    transform: none;
  }
}

/* The spinner WooCommerce parks after the button */
.woocommerce ul.products li.product a.button.loading::after {
  top: 50%;
  margin-top: -.5em;
}

/* -------------------------------------------------------------
   Category tiles

   These come through the same loop but without the card wrappers —
   the plugin only fires those hooks for products — so they are given
   the card's shape directly.
   ------------------------------------------------------------- */
.woocommerce ul.products[class*="columns-"] li.product-category,
.woocommerce-page ul.products[class*="columns-"] li.product-category {
  width: auto;
  float: none;
  margin: 0;
}

.woocommerce ul.products li.product-category > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.woocommerce ul.products li.product-category img {
  width: 100%;
  aspect-ratio: var(--inv-shop-ratio, 4 / 3);
  object-fit: cover;
  margin: 0;
  display: block;
}



.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
}

.woocommerce ul.products li.product-category h2 mark.count {
  background: none;
  color: var(--inv-shop-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   Nothing found
   ------------------------------------------------------------- */
.woocommerce .woocommerce-no-products-found {
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  text-align: center;
}

/* -------------------------------------------------------------
   Responsive — the same bands the rest of the site changes at
   ------------------------------------------------------------- */
@media (max-width: 991px) {
  /* min(), not a flat value: the chosen width still applies, it just cannot
     grow past what a tablet has room for. */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    --inv-shop-col: min(var(--inv-shop-col-set, 240px), 210px);
  }
}

@media (max-width: 767px) {
  .inv-shop-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce .inv-shop-toolbar .woocommerce-ordering select {
    min-width: 0;
    width: 100%;
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products {
    --inv-shop-col: min(var(--inv-shop-col-set, 240px), 160px);
    --inv-shop-gap: 12px;
  }
}

@media (max-width: 420px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .inv-shop-card__media img,
  .woocommerce ul.products li.product .inv-shop-card__alt,
  .woocommerce ul.products li.product-category img {
    transition: none;
  }

  .woocommerce ul.products.is-revealed li.product {
    animation: none;
  }

  .inv-shop-card__media.is-loading::after {
    animation: none;
  }


}

/* =============================================================
   The bar above the catalogue

   Chips on the left, the things you do on the right. It wraps rather
   than scrolls on a narrow screen: a row of categories that runs off
   the edge hides exactly the categories nobody thought to look for.
   ============================================================= */
.inv-shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--inv-shop-gap);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.inv-shop-bar__end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ---- category chips ---- */
.inv-shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.woocommerce .inv-shop-chip,
.inv-shop-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: var(--inv-chip-h, 38px);
  padding: 0 var(--inv-chip-px, 15px);
  border: 1px solid var(--inv-chip-line, var(--inv-shop-line));
  border-radius: var(--inv-chip-radius, var(--inv-radius-full, 9999px));
  background: var(--inv-chip-bg, color-mix(in srgb, var(--inv-shop-surface) 60%, transparent));
  color: var(--inv-chip-ink, var(--inv-fg, #0f172a));
  font-size: var(--inv-chip-size, .875rem);
  font-weight: var(--inv-chip-weight, 500);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: var(--inv-chip-blur, blur(14px) saturate(170%));
  backdrop-filter: var(--inv-chip-blur, blur(14px) saturate(170%));
  transition:
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease),
    color var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce .inv-shop-chip:hover {
  border-color: color-mix(in srgb, var(--inv-shop-accent) 50%, var(--inv-chip-line, var(--inv-shop-line)));
  background: var(--inv-chip-bg-hover, color-mix(in srgb, var(--inv-shop-accent) 8%, var(--inv-shop-surface)));
}

.woocommerce .inv-shop-chip.is-active {
  border-color: transparent;
  background: var(--inv-chip-on-bg, var(--inv-shop-accent));
  color: var(--inv-chip-on-ink, var(--inv-accent-fg, var(--inv-fg, #0f172a)));
}

/* The label rolls over on hover, the same movement the header's links use.
   The word underneath is the ::after drawn from data-text, so the document
   still carries the word once. */
.woocommerce .inv-shop-chip:hover .txt-anim__inner:not([data-gsap-roll]),
.woocommerce .inv-shop-chip:focus-visible .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* -------------------------------------------------------------
   The four shapes a chip can take

   Tokens rather than four copies of the rule, so a shape only says
   what it changes and everything else keeps following the design.
   ------------------------------------------------------------- */
.inv-chipstyle-square {
  --inv-chip-radius: var(--inv-radius-sm, 10px);
}

.inv-chipstyle-glass {
  --inv-chip-radius: var(--inv-radius-sm, 10px);
  --inv-chip-bg: linear-gradient(135deg,
      color-mix(in srgb, var(--inv-shop-surface) 82%, transparent) 0%,
      color-mix(in srgb, var(--inv-shop-surface) 52%, transparent) 100%);
  --inv-chip-bg-hover: linear-gradient(135deg,
      color-mix(in srgb, var(--inv-shop-accent) 24%, var(--inv-shop-surface)) 0%,
      color-mix(in srgb, var(--inv-shop-accent) 10%, var(--inv-shop-surface)) 100%);
  --inv-chip-line: color-mix(in srgb, var(--inv-fg, #0f172a) 10%, transparent);
  --inv-chip-blur: blur(18px) saturate(190%);
}

.inv-chipstyle-glass .inv-shop-chip {
  border-top-color: color-mix(in srgb, #fff 85%, transparent);
  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.inv-chipstyle-glass .inv-shop-chip:hover {
  box-shadow:
    0 8px 22px -8px color-mix(in srgb, var(--inv-shop-accent) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.inv-chipstyle-outline {
  --inv-chip-bg: transparent;
  --inv-chip-bg-hover: transparent;
  --inv-chip-blur: none;
  --inv-chip-line: color-mix(in srgb, var(--inv-fg, #0f172a) 22%, transparent);
}

.inv-chipstyle-outline .inv-shop-chip:hover {
  border-color: var(--inv-shop-accent);
  color: var(--inv-shop-accent);
}

.inv-shop-chip__n {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

/* ---- search ---- */
.inv-shop-search {
  position: relative;
  display: flex;
  align-items: center;
}

.woocommerce .inv-shop-search input[type="search"] {
  width: clamp(9rem, 26vw, 15rem);
  height: 40px;
  margin: 0;
  padding: 0 38px 0 14px;
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 85%, transparent);
  border-radius: var(--inv-shop-radius-sm);
  background-color: color-mix(in srgb, var(--inv-shop-surface) 55%, transparent);
  color: inherit;
  font-size: .86rem;
  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transition:
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce .inv-shop-search input[type="search"]:focus {
  outline: none;
  border-color: var(--inv-shop-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.woocommerce .inv-shop-search button {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--inv-radius-sm, 10px);
  background: transparent;
  color: var(--inv-shop-muted);
  cursor: pointer;
}

.woocommerce .inv-shop-search button:hover { color: var(--inv-shop-accent); }

.inv-shop-search svg { width: 17px; height: 17px; }

/* ---- the filter button, phones only ---- */
.inv-shop-filter-btn {
  display: none;
  align-items: center;
  gap: .45rem;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius-sm);
  background: var(--inv-shop-surface);
  color: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}

.inv-shop-filter-btn svg { width: 17px; height: 17px; }

/* =============================================================
   The filter column, and the drawer it becomes on a phone
   ============================================================= */
.inv-shop-side__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.inv-shop-side__title {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
}

.inv-shop-side__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-radius-full, 9999px);
  background: var(--inv-shop-surface);
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.inv-shop-side__scrim {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--inv-shop-dur) var(--inv-shop-ease);
}

/* Same convention as the cart drawer: the class locks the page, and the
   smooth-scroll loop reads that lock rather than being told about it. */
body.inv-shop-filters-open { overflow: hidden; }

body.inv-shop-filters-open .inv-shop-side__scrim { opacity: 1; }

@media (max-width: 899px) {
  /* Below the two-column width the panel is a drawer, and the button that
     opens it appears. With the option switched off there is no --drawer
     class, so the widgets simply stack under the catalogue as they always
     have. */
  .inv-shop-side--drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: min(88vw, 340px);
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--inv-shop-surface);
    box-shadow: -20px 0 60px -30px rgba(15, 23, 42, .5);
    transform: translateX(101%);
    visibility: hidden;
    transition:
      transform var(--inv-shop-dur) var(--inv-shop-ease),
      visibility var(--inv-shop-dur) var(--inv-shop-ease);
  }

  body.inv-shop-filters-open .inv-shop-side--drawer {
    transform: none;
    visibility: visible;
  }

  .inv-shop-side--drawer .inv-shop-side__head { display: flex; }

  .inv-shop-filter-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-shop-side--drawer { transition: none; }
}

/* =============================================================
   What the card gained
   ============================================================= */
.inv-shop-card__cat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inv-shop-accent);
}

.woocommerce ul.products li.product .inv-shop-card__stock {
  margin: .1rem 0 0;
  font-size: .78rem;
  font-weight: 500;
}

/* Auf einer dunklen Karte ergab das Gruen gemessene 3,24:1 (08.10.2026).
   30 % der Kartenschrift dazu heben es auf 5,25 — und auf einer hellen
   Karte geht die Mischung in die andere Richtung, auf 7,93. */
.inv-shop-card__stock.is-in  { color: color-mix(in srgb, #12795c 70%, currentColor); }
.inv-shop-card__stock.is-out { color: color-mix(in srgb, #b42318 70%, currentColor); }

.woocommerce ul.products li.product .inv-shop-card__excerpt {
  margin: .35rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--inv-shop-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- badges over the picture ---- */
.inv-shop-card__badges {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.inv-badge {
  padding: .3rem .7rem;
  border-radius: var(--inv-radius-full, 9999px);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.inv-badge--new { background: var(--inv-primary, #111827); color: #fff; }

.inv-badge--low {
  background: #b42318;
  color: #fff;
}

/* =============================================================
   Mehr laden
   ============================================================= */
.inv-shop-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}

.woocommerce a.inv-shop-more {
  position: relative;
  min-width: 12rem;
  justify-content: center;
}

.inv-shop-more__spin {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: inv-shop-more-spin .7s linear infinite;
}

.inv-shop-more.is-busy { pointer-events: none; }
.inv-shop-more.is-busy .inv-shop-more__label { visibility: hidden; }
.inv-shop-more.is-busy .inv-shop-more__spin { display: block; }

@keyframes inv-shop-more-spin {
  to { transform: rotate(360deg); }
}

/* The cards a load-more brought in are already in view when they arrive, so
   they are faded in where they stand rather than replayed as a wave from the
   bottom of the grid. */
.woocommerce ul.products li.product.is-appended {
  animation: inv-shop-appear var(--inv-shop-anim-dur, 780ms) var(--inv-shop-ease) both;
}

@keyframes inv-shop-appear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product.is-appended { animation: none; }
}

/* =============================================================
   Phones: a column count instead of a minimum card width

   auto-fill with a 240px minimum leaves exactly one card per row on a
   360px screen, which turns a catalogue into a very long list. Below
   560px the option decides instead.
   ============================================================= */
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(var(--inv-shop-cols-mobile, 2), minmax(0, 1fr));
    gap: 12px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .88rem; }
  .woocommerce ul.products li.product .inv-shop-card__body .price { font-size: .95rem; }
  .woocommerce ul.products li.product .inv-shop-card__foot a.button { font-size: .8rem; }
}

/* =============================================================
   Anything a plugin adds to the card

   German price-indication law requires the VAT and shipping notes
   next to every price, including in a listing, and the plugins
   that add them print them straight onto the product — outside
   the three wrappers this theme puts around WooCommerce's markup.
   They landed hard against the left edge of the card and made it
   two lines longer than it had to be.

   So the card pads whatever it is given, rather than only what
   the theme printed. The selector is deliberately broad: it is
   aimed at output nobody here controls.
   ============================================================= */
.woocommerce ul.products li.product > *:not(a.woocommerce-loop-product__link):not(.inv-shop-card__foot):not(.inv-shop-card__media):not(.onsale):not(.inv-shop-card__badges) {
  padding-inline: var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
}

/* The legal notes themselves: quiet, tight, and on as few lines as they can
   manage. They are a legal requirement, not a selling point. */
.woocommerce ul.products li.product .woocommerce-price-suffix,
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .wc-gzd-additional-info-loop,
.woocommerce ul.products li.product small.includes_tax,
.woocommerce ul.products li.product p.wc-gzd-additional-info {
  display: block;
  margin: .1rem 0 0;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--inv-shop-muted);
}

/* Two notes that each take a paragraph become one line. */
.inv-shop-legal-compact.woocommerce ul.products li.product .wc-gzd-additional-info,
.inv-shop-legal-compact.woocommerce ul.products li.product .wc-gzd-additional-info-loop {
  display: inline;
}

.inv-shop-legal-compact.woocommerce ul.products li.product .wc-gzd-additional-info + .wc-gzd-additional-info::before {
  content: " · ";
}

.inv-shop-legal-off.woocommerce ul.products li.product .woocommerce-price-suffix,
.inv-shop-legal-off.woocommerce ul.products li.product .wc-gzd-additional-info,
.inv-shop-legal-off.woocommerce ul.products li.product .wc-gzd-additional-info-loop,
.inv-shop-legal-off.woocommerce ul.products li.product small.includes_tax {
  display: none;
}

/* The body stops adding its own side padding once the card pads its children,
   or the theme's own lines would sit twice as far in as the plugin's. */
.inv-shop-card__body,
.inv-shop-card__foot {
  padding-inline: 0;
}

.woocommerce ul.products li.product > a.woocommerce-loop-product__link > .inv-shop-card__body {
  padding-inline: var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
}

.inv-shop-card__foot {
  padding-inline: var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
}


/* -------------------------------------------------------------
   Alignment and the size of the secondary lines
   ------------------------------------------------------------- */
.inv-shopcard-al-center .inv-shop-card__body,
.inv-shopcard-al-center .inv-shop-card__foot {
  text-align: center;
}

.inv-shopcard-al-center .inv-shop-card__body {
  align-items: center;
}

.woocommerce ul.products li.product .inv-shop-card__cat,
.woocommerce ul.products li.product .inv-shop-card__stock,
.woocommerce ul.products li.product .inv-shop-card__excerpt {
  font-size: var(--inv-shop-meta-size, .8rem);
}

/* =============================================================
   Betriebsart des Katalogs

   Die Hinweise zu MwSt. und Versand setzt Germanized, nicht diese Theme. Sie
   ueber ihre Hook-Namen auszuhaengen hiesse, sich an die Interna eines Plugins
   zu binden, das sie zwischen zwei Versionen umbenennen darf — eine Klasse am
   body und zwei Regeln halten laenger.

   Die Preisangabenverordnung verlangt diese Hinweise dort, wo ein Preis steht.
   Wo keiner steht, haben sie keine Grundlage, und ein "plus Versandkosten"
   unter einem Knopf, der zum Formular fuehrt, verspricht einen Kauf, den es
   nicht gibt.
   ============================================================= */

/* Anfrage: nirgends ein Preis, also nirgends ein Preishinweis. */
.inv-shop-mode-anfrage .wc-gzd-additional-info,
.inv-shop-mode-anfrage .wc-gzd-additional-info-loop,
.inv-shop-mode-anfrage .legal-price-info,
.inv-shop-mode-anfrage .woocommerce-price-suffix,
.inv-shop-mode-anfrage small.includes_tax,
.inv-shop-mode-anfrage .product-unit-price {
  display: none;
}

/* Reparaturkatalog: nur in der Uebersicht. Auf der Produktseite steht nach der
   Auswahl ein echter Preis, und dort gehoeren die Hinweise hin. */
.inv-shop-mode-reparatur.woocommerce ul.products li.product .wc-gzd-additional-info,
.inv-shop-mode-reparatur.woocommerce ul.products li.product .wc-gzd-additional-info-loop,
.inv-shop-mode-reparatur.woocommerce ul.products li.product .woocommerce-price-suffix,
.inv-shop-mode-reparatur.woocommerce ul.products li.product small.includes_tax,
.inv-shop-mode-reparatur.woocommerce ul.products li.product .price {
  display: none;
}


/* =============================================================
   Der Knopf auf der Karte: vier Flächen, drei Ausrichtungen

   Bis zum 02.10.2026 gab es hier genau eine Fläche — gefüllt, in
   --inv-primary. Jede Sektion der Startseite kann zwischen Gefüllt, Glas,
   Umriss und Weich wählen ("Button-Stil"), nur der Katalog nicht; gemeldet
   von der Person, die die Theme testet.

   Die Deklarationen sind dieselben wie in components/buttons.css. Sie stehen
   hier noch einmal, weil die Knöpfe im Shop keine .vf-btn sind: der Katalog
   bekommt sie von WooCommerce als a.button, und der leere Warenkorb als
   .wp-block-button__link in einem Block. Ein gemeinsamer Selektor wäre eine
   Liste aus drei fremden Klassen — das hier ist die Liste, einmal.

   Beide Seiten zusammen in einer Regel, damit sie nicht auseinanderlaufen:
   wer im Customizer "Glas" wählt, meint beide.

   Der Körperklassen-Teil steht als `body.inv-shopbtnstyle-x.woocommerce`
   geschrieben, nicht `body.inv-shopbtnstyle-x .woocommerce` — .woocommerce
   sitzt selbst auf <body>, und ein Nachfahre seiner selbst ist niemand.
   ============================================================= */

/* -------- Gefüllt: die Vorgabe, hier noch einmal benannt -------- */
body.inv-shopbtnstyle-solid.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-solid.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-solid .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border-color: transparent;
  background: var(--inv-shop-btn-bg, var(--inv-primary, #111827));
  color: var(--inv-shop-btn-ink, var(--inv-primary-fg, #fff));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* -------- Glas -------- */
body.inv-shopbtnstyle-glass.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-glass.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-glass .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border: 1px solid rgba(var(--inv-accent-rgb, 36, 169, 179), .55);
  border-top: 1.5px solid rgba(255, 255, 255, .7);
  background: var(--inv-shop-btn-bg, linear-gradient(
    135deg,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .45) 0%,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .22) 100%));
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
  box-shadow:
    0 4px 16px -2px rgba(var(--inv-accent-rgb, 36, 169, 179), .35),
    0 0 14px rgba(var(--inv-accent-rgb, 36, 169, 179), .22),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
}

body.inv-shopbtnstyle-glass.woocommerce ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-glass.woocommerce-page ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-glass .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  border-color: rgba(var(--inv-accent-rgb, 36, 169, 179), .7);
  background: var(--inv-shop-btn-hover, linear-gradient(
    135deg,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .58) 0%,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .32) 100%));
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
}

/* -------- Umriss -------- */
body.inv-shopbtnstyle-outline.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-outline.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-outline .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 22%, transparent);
  background: var(--inv-shop-btn-bg, transparent);
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.inv-shopbtnstyle-outline.woocommerce ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-outline.woocommerce-page ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-outline .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  border-color: var(--inv-shop-accent, #24a9b3);
  background: var(--inv-shop-btn-hover, color-mix(in srgb, var(--inv-accent, #24a9b3) 12%, transparent));
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
}

/* -------- Weich -------- */
body.inv-shopbtnstyle-soft.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-soft.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnstyle-soft .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border: 1px solid transparent;
  background: var(--inv-shop-btn-bg, color-mix(in srgb, var(--inv-accent, #24a9b3) 16%, transparent));
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.inv-shopbtnstyle-soft.woocommerce ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-soft.woocommerce-page ul.products li.product .inv-shop-card__foot a.button:hover,
body.inv-shopbtnstyle-soft .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--inv-shop-btn-hover, color-mix(in srgb, var(--inv-accent, #24a9b3) 26%, transparent));
  color: var(--inv-shop-btn-ink, var(--inv-fg, #0f172a));
}

/* -------- Eine eigene Hover-Farbe gilt auch ohne gewählte Oberfläche -------- */
.woocommerce ul.products li.product .inv-shop-card__foot a.button:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--inv-shop-btn-hover, var(--inv-btn-hover, #1e293b));
}

/* -------- Wo die Beschriftung steht --------
   Der Knopf ist ein inline-flex-Kasten; über die ganze Karte gezogen hat er
   Platz, in dem die Schrift auch an einer Kante stehen kann. */
body.inv-shopbtnalign-left.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-left.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-left .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  justify-content: flex-start;
  text-align: start;
}

body.inv-shopbtnalign-right.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-right.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-right .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  justify-content: flex-end;
  text-align: end;
}

body.inv-shopbtnalign-center.woocommerce ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-center.woocommerce-page ul.products li.product .inv-shop-card__foot a.button,
body.inv-shopbtnalign-center .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  justify-content: center;
  text-align: center;
}

/* ========================================================================
   Die Farben eines Produkts auf der Karte
   ===================================================================== */

/*
 * Erscheinen nur, wo ein Produkt eine Farb-Eigenschaft hat — eine Werkstatt
 * sieht sie nie. Die Farbe selbst kommt als --inv-card-swatch-c vom Server;
 * der Punkt zeichnet nichts, was er nicht weiss.
 */
.inv-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inv-card-swatch-gap, 6px);
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.inv-card-swatch {
  display: block;
  line-height: 0;
}

.inv-card-swatch > a,
.inv-card-swatch > span {
  display: block;
  border-radius: inherit;
}

.inv-card-swatch__dot {
  display: block;
  width: var(--inv-card-swatch-size, 16px);
  height: var(--inv-card-swatch-size, 16px);
  border-radius: var(--inv-card-swatch-radius, 999px);
  background: var(--inv-card-swatch-c, #cbd5e1);

  /* Ein weisser Punkt auf weissem Grund braucht eine Kante, ein schwarzer
     darf keine haben, die ihn aufhellt — darum innen, nicht aussen. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
  transition: transform var(--inv-shop-dur, 240ms) var(--inv-shop-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.inv-card-swatch > a:hover .inv-card-swatch__dot,
.inv-card-swatch > a:focus-visible .inv-card-swatch__dot {
  transform: scale(1.18);
}

.inv-card-swatch > a:focus-visible .inv-card-swatch__dot {
  outline: 2px solid var(--inv-shop-accent, #24a9b3);
  outline-offset: 2px;
}

/* „+3" steht in derselben Zeile und in derselben Hoehe wie die Punkte. */
.inv-card-swatch--more {
  display: flex;
  align-items: center;
  min-height: var(--inv-card-swatch-size, 16px);
  padding-inline-start: 2px;
  font-size: calc(var(--inv-card-swatch-size, 16px) * 0.72);
  line-height: 1;
  color: var(--inv-shop-muted, rgba(15, 23, 42, 0.55));
}

/* Die Form kommt als Koerperklasse — sie gilt fuer die ganze Seite. */
body.inv-swdot-weich .inv-card-swatch__dot { --inv-card-swatch-radius: 5px; }
body.inv-swdot-eckig .inv-card-swatch__dot { --inv-card-swatch-radius: 0; }

/* -------------------------------------------------------------
   Die nächste Seite ist unterwegs („Mehr laden“)

   shop-more.js stellt eine Reihe dieser Platzhalter in die Liste und nimmt
   sie weg, sobald die echten Karten da sind — sie haben deren Rahmen, Ecken
   und Bildformat, also rückt nichts, wenn getauscht wird.
   ------------------------------------------------------------- */
.woocommerce ul.products li.inv-ghost-card {
  pointer-events: none;
  box-shadow: none;
}

.inv-ghost-card__media,
.inv-ghost-card__line,
.inv-ghost-card__btn {
  display: block;
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%);
  background-size: 200% 100%;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite;
}

.inv-ghost-card__media {
  aspect-ratio: var(--inv-shop-ratio, 4 / 3);
}

.inv-ghost-card__body {
  display: grid;
  gap: 10px;
  padding: clamp(14px, 1.5vw, 20px);
}

.inv-ghost-card__line {
  height: 14px;
  border-radius: 6px;
}

.inv-ghost-card__line--short {
  width: 45%;
}

.inv-ghost-card__btn {
  height: 38px;
  margin-top: 6px;
  border-radius: var(--inv-shop-radius-sm, 10px);
}

.inv-ghost-card:nth-child(2n) .inv-ghost-card__media { animation-delay: .12s; }
.inv-ghost-card:nth-child(3n) .inv-ghost-card__media { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .inv-ghost-card__media,
  .inv-ghost-card__line,
  .inv-ghost-card__btn {
    animation: none;
    background-image: none;
    background-color: var(--inv-skel-b);
  }
}


/* ── woo-single.css ── */
/* =============================================================
   Inverta — WooCommerce: one product

   Gallery beside the summary, then the tabs, then what else is worth
   looking at.

   The gallery is capped to the height of the screen and sticks there
   while the summary scrolls. That cap is not only a nicety: without it
   a tall gallery slid down inside its own grid row as the page moved
   and its thumbnails came to rest on top of the tab strip below — the
   "Beschreibung / Bewertungen" chips sitting over the pictures. A
   column that can never be taller than the viewport has nowhere to
   slide to, and the two bands stay apart at every scroll position.
   ============================================================= */

/* The product is a stack of bands: the two columns, then the tabs, then what
   else is worth looking at. The two columns are their own box — see
   inverta_product_columns_open() for why the gallery needs one. */
.woocommerce div.product {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
}

/* Breite der Bildspalte, Abstand der Spalten — beides war fest, bis zum
   02.10.2026 hatte die Produktseite keinen einzigen Regler. Jeder Wert hier
   faellt auf genau das zurueck, was vorher dastand. */
.woocommerce div.product .inv-sp-cols {
  display: grid;
  grid-template-columns: var(--inv-sp-gal-w, 55%) minmax(0, 1fr);
  column-gap: var(--inv-sp-col-gap, clamp(28px, 4vw, 72px));
  row-gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.woocommerce div.product {
  max-width: var(--inv-sp-max-w, none);
  margin-inline: auto;
  padding-block: var(--inv-sp-pt, 0) var(--inv-sp-pb, 0);
}

/* Der Abstand zwischen dem Kaufbereich und allem, was darunter kommt. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells {
  margin-block-start: var(--inv-sp-block-gap, clamp(48px, 6vw, 96px));
}

/* -------------------------------------------------------------
   Gallery
   ------------------------------------------------------------- */
.woocommerce div.product div.images {
  width: auto;
  float: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The stickiness needs the plugin's own specificity.
 *
 * WooCommerce ships `.woocommerce div.product div.images.woocommerce-product-gallery
 * { position: relative }` — four classes where the rule above has three. A more
 * specific declaration wins regardless of which stylesheet loads last, so the
 * gallery was `relative` on every product page and `position: sticky` never
 * took effect: the picture scrolled away with the page while the setting said
 * it would stay. Worse, `top` still applied — a relative box offset by the
 * height of the header, sitting that far below the summary beside it.
 *
 * Naming the same class the plugin names makes the two equal, and this file
 * loads after it. */
.woocommerce div.product div.images.woocommerce-product-gallery {
  position: sticky;
  top: calc(var(--inv-header-bar-pt, 10px) + var(--inv-header-bar-h, 60px) + 20px);
  /* Never taller than what is on screen — see the note at the top. */
  max-height: calc(100svh - var(--inv-header-bar-pt, 10px) - var(--inv-header-bar-h, 60px) - 40px);
  /* Und nie breiter, als „Höchstbreite des Bildes“ erlaubt. Die Spaltenbreite
     daneben ist ein Prozentsatz; auf einem sehr breiten Bildschirm wird daraus
     ein Bild, das die Seite allein ausfuellt. Ohne Wert steht hier `none`,
     also genau das, was vor dem 10.10.2026 dastand. */
  max-width: var(--inv-sp-gal-max, none);
}

/* The picture takes the space the thumbnails leave, and is contained rather
   than cropped: a product photograph that has been cut off is a returned
   parcel. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border-radius: var(--inv-sp-img-radius, var(--inv-shop-radius));
  overflow: hidden;
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, transparent);
}

.woocommerce div.product div.images img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

/* Ein Bild im Schieber ist so breit wie das Fenster, durch das man es sieht —
   und zwar bevor FlexSlider das selbst ausrechnet.

   FlexSlider setzt beim Start zuerst die Schiene auf (Bilder + Klone) × 200 %,
   also 400 % bei zwei Bildern, und erst einen Schritt spaeter jedem Bild seine
   Breite in Pixeln. Dazwischen ist jedes Bild viermal so breit wie die Spalte
   und — bei festem Seitenverhaeltnis — viermal so hoch. Gemessen am 10.10.2026
   auf einem Telefon (390 px, 4× gedrosselt): Name, Preis und Knopf
   verschwinden fuer einen Bildaufbau unter dem Bildschirmrand und kommen
   wieder, Layout-Verschiebung 0,773 — Google nennt alles ueber 0,25 schlecht.

   `cqi` ist ein Hundertstel der Breite des naechsten Containers, und der
   Container ist das Fenster selbst. Die Pixelbreite, die FlexSlider danach
   inline setzt, ist derselbe Wert, also aendert sich danach nichts mehr.

   Dasselbe gilt fuer `float`: auch das setzt FlexSlider erst einen Schritt
   spaeter. Bis dahin stehen die Bilder untereinander statt nebeneinander, und
   die Galerie ist fuer einen Bildaufbau doppelt so hoch — nach der Breite
   allein gemessen blieb davon noch 0,284. */
.woocommerce div.product div.images .flex-viewport {
  container-type: inline-size;
}

.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__image {
  width: 100cqi;
  float: left;
}

/* A single-image product has no flex-viewport, so the wrapper itself needs a
   shape to hold. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  height: 100%;
}

/* Bildformat und Zuschnitt — „Produktseite — Maße“. Beide Rueckfaelle sind
   genau das, was vorher fest hier stand; eine zweite Regel weiter oben waere
   gleich spezifisch und spaeter verloren. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  aspect-ratio: var(--inv-sp-img-ratio, var(--inv-shop-single-ratio, 4 / 3));
  height: auto;
  object-fit: var(--inv-sp-img-fit, cover);
}

/* Das Bild hinter der Maske (product.js, initGalleryReveal).

   inv-gal-mask setzt erst das Skript, und nur wenn Bewegung erlaubt ist —
   ohne Skript steht das Bild wie bisher einfach da. Solange is-in fehlt,
   ist das Bild ganz abgedeckt und die Fläche dahinter schimmert; mit is-in
   gibt die Maske es von unten nach oben frei, und das Bild setzt sich aus
   108 %. Nur das Bild im Link: die Lupe legt ein zweites (.zoomImg) in
   dieselbe Kachel, und das soll nicht mitspielen. */
.woocommerce div.product div.images.inv-gal-mask .woocommerce-product-gallery__image > a > img,
.woocommerce div.product div.images.inv-gal-mask .woocommerce-product-gallery__image > img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
  transition: none;
}

.woocommerce div.product div.images.inv-gal-mask.is-in .woocommerce-product-gallery__image > a > img,
.woocommerce div.product div.images.inv-gal-mask.is-in .woocommerce-product-gallery__image > img {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition:
    clip-path .9s cubic-bezier(.77, 0, .18, 1),
    transform 1.3s cubic-bezier(.22, 1, .36, 1);
}

/* Nur die äußere Fläche: mit dem Schieber steckt die Hülle im Fenster
   (.flex-viewport), und zwei Schimmer übereinander werden dunkelgrau. */
.woocommerce div.product div.images.inv-gal-mask:not(.is-in) > .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.inv-gal-mask:not(.is-in) > .flex-viewport {
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%);
  background-size: 200% 100%;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite;
}

/* Die Vorschaubilder folgen, wenn das große Bild halb da ist. */
.woocommerce div.product div.images.inv-gal-mask .flex-control-thumbs {
  opacity: 0;
  transform: translateY(8px);
}

.woocommerce div.product div.images.inv-gal-mask.is-in .flex-control-thumbs {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease .45s,
    transform .6s cubic-bezier(.22, 1, .36, 1) .45s;
}

/* Thumbnails: a fixed strip at the bottom of the column, never a floated grid
   that grows downwards into whatever is below. */
.woocommerce div.product div.images .flex-control-thumbs {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  /* Die Vorgabe ist dieselbe Spanne wie vorher: mindestens 56, hoechstens 84.
     Mit einem eigenen Wert faellt die Untergrenze mit, sonst waere eine
     Einstellung unter 56 px eine Spanne, deren Anfang hinter dem Ende liegt. */
  grid-auto-columns: minmax(min(56px, var(--inv-sp-thumb-w, 84px)), var(--inv-sp-thumb-w, 84px));
  justify-content: start;
  gap: 10px;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
  margin: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--inv-shop-radius-sm);
  border: 1px solid transparent;
  opacity: .6;
  cursor: pointer;
  transition:
    opacity var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--inv-shop-accent);
}

/* No round button over the picture.
 *
 * WooCommerce puts a magnifier in the corner to open the full-size view. The
 * picture itself already opens it — it is wrapped in a link to the full size —
 * so the button was a second control for the same thing, floating over the
 * product, and it read as a stray icon rather than as an offer.
 *
 * Hidden rather than unhooked: the plugin's own scripts bind to it, and a
 * missing element is a JavaScript error waiting to happen.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Which means the picture has to say it can be opened. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
  display: block;
  cursor: zoom-in;
}

.woocommerce div.product div.summary {
  width: auto;
  float: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--inv-sp-sum-gap, .85rem);
  /* „Ausrichtung im Kaufbereich“. Die Schaltflaeche und die Mengenangabe
     bleiben links — ein Kaufknopf, der mitwandert, ist keine Gestaltung. */
  text-align: var(--inv-sp-align, start);
}

.woocommerce div.product .product_title {
  margin: 0;
  padding: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-sp-title-size, clamp(1.7rem, 3.2vw, 2.6rem));
  font-weight: var(--inv-sp-title-weight, 700);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--inv-sp-title-color, inherit);
  text-wrap: balance;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  margin: 0;
  font-size: var(--inv-sp-price-size, clamp(1.35rem, 2.2vw, 1.75rem));
  font-weight: var(--inv-sp-price-weight, 700);
  color: var(--inv-sp-price-color, var(--inv-fg, #0f172a));
}

.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .85rem;
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
  float: none;
  margin: 0;
}

.woocommerce div.product .woocommerce-product-rating a {
  color: var(--inv-shop-muted);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--inv-sp-excerpt-color, color-mix(in srgb, var(--inv-fg, #0f172a) 74%, transparent));
  font-size: var(--inv-sp-excerpt-size, 1rem);
  line-height: var(--inv-sp-excerpt-lh, 1.7);
  max-width: 46ch;
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* Stock, as a state rather than a line of text. */
.woocommerce div.product .stock {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
}

.woocommerce div.product .stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.woocommerce div.product .stock.in-stock { color: #12795c; }

.woocommerce div.product .stock.out-of-stock { color: #b42318; }

/* The buy box */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: .3rem 0 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  background: color-mix(in srgb, var(--inv-shop-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
  content: none;
}

/*
 * Bei einem variablen Produkt stehen Menge und Knopf nicht im Formular,
 * sondern in einem eigenen Kasten darin: .woocommerce-variation-add-to-cart.
 * Den hat nie jemand gestaltet — also galt dort die normale Blockanordnung:
 * die Menge auf einer Zeile, der Knopf darunter, und zwischen beiden nichts.
 * Genau so kam es am 05.10.2026 als Bildschirmfoto zurueck. Derselbe Satz
 * Regeln wie fuer das Formular, damit beide Produktarten gleich aussehen.
 */
.woocommerce div.product form.cart,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  gap: var(--inv-sp-buy-gap, .7rem);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.woocommerce div.product form.cart div.quantity {
  float: none;
  margin: 0;
}

.woocommerce div.product form.cart .button {
  flex: 1 1 12rem;
  float: none;
  padding-block: .95rem;
}

/* ---- Wo der Knopf steht -------------------------------------------------
 *
 * Drei Lagen, und alle drei meinen dieselben zwei Teile: das Mengenfeld und
 * den Knopf. "Darunter" ist keine Notloesung, sondern die Form, die eine
 * schmale Spalte braucht — und bisher die einzige, die es gab, ohne dass es
 * jemand so entschieden haette.
 */
body.inv-spbuy-left div.product form.cart,
body.inv-spbuy-left div.product form.cart .woocommerce-variation-add-to-cart {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

body.inv-spbuy-below div.product form.cart .button,
body.inv-spbuy-below div.product form.cart .woocommerce-variation-add-to-cart .button {
  flex: 1 1 100%;
}

/* ---- Masse von Knopf und Mengenfeld ------------------------------------ */
.woocommerce div.product form.cart .button {
  min-height: var(--inv-sp-btn-h, 0);
  padding-inline: var(--inv-sp-btn-px, var(--inv-sp-btn-px-p, 1.6rem));
  border-radius: var(--inv-sp-btn-radius, var(--inv-sp-btn-radius-p, var(--inv-shop-btn-radius, var(--inv-shop-radius-sm, 10px))));
  font-size: var(--inv-sp-btn-size, inherit);
}

.woocommerce div.product form.cart div.quantity .qty,
.woocommerce div.product form.cart div.quantity input[type="number"] {
  min-height: var(--inv-sp-qty-h, var(--inv-sp-btn-h, 0));
  width: var(--inv-sp-qty-w, 5rem);
  border-radius: var(--inv-sp-qty-radius, var(--inv-shop-radius-sm, 10px));
}

/* ---- Fertige Formen fuer den Knopf ------------------------------------- */
/* Auch die Formen schreiben Vorlagen-Marken, nicht die eigenen.
 *
 * „Kapsel" setzte `--inv-sp-btn-px: 2rem` — an einer Koerperklasse, also
 * spezifischer als `:root`, wo das Zahlenfeld „Abstand links & rechts"
 * schreibt. Wer die Kapsel wählte und danach 44 px eintrug, bekam 32.
 * Gemessen am 08.10.2026. Mit `-p` liegt die Vorlage hinter der eigenen
 * Zahl statt davor. */
body.inv-spbtnform-weich  { --inv-sp-btn-radius-p: 14px; }
body.inv-spbtnform-kapsel { --inv-sp-btn-radius-p: 999px; --inv-sp-btn-px-p: 2rem; }
body.inv-spbtnform-eckig  { --inv-sp-btn-radius-p: 0px; }

/* ---- Fertige Fuellungen fuer den Knopf ---------------------------------
 *
 * Die fuenf Vorlagen setzen nur Marken, keine Eigenschaften. Das ist der
 * Grund, aus dem sie jetzt ueberhaupt ankommen: vorher standen sie als
 * Eigenschaften auf `body.inv-spbtnfuell-x div.product form.cart .button`,
 * und die eigene Regel des Knopfes weiter unten im Blatt — mit
 * `.button.single_add_to_cart_button`, also einer Klasse mehr — hat jede
 * davon ueberstimmt. Gemessen am 08.10.2026: Hoehe 52, Grund tuerkis,
 * Schrift 16 px, und zwar in jeder der drei Vorlagen gleich. Eine Marke
 * kennt diesen Streit nicht; sie wird dort gelesen, wo sie gebraucht wird.
 *
 * `-p` heisst „Vorlage" (Preset). Die vier Farbfelder im Customizer
 * schreiben die Marken ohne `-p` an `:root`, und der Knopf liest erst die
 * eigene Farbe, dann die der Vorlage, dann den Entwurfswert. So gewinnt
 * eine selbst gewaehlte Farbe gegen die Vorlage, nicht umgekehrt — obwohl
 * die Vorlage am spezifischeren Selektor haengt.
 * ----------------------------------------------------------------------- */

body.inv-spbtnfuell-voll {
  --inv-sp-btn-bg-p: var(--inv-shop-accent, #24a9b3);
  /* Nicht Weiss, und auch nicht die Tinte der Primaerfarbe.
   *
   * Eine Stil-Vorlage, deren Akzent hell ist, bringt die passende Schriftfarbe
   * mit — „Dunkel" setzt Lime als Akzent und ausdruecklich `#0a0f1a` als
   * Schrift dazu, weil Weiss auf Lime nicht lesbar ist. Als Zahl geschrieben
   * kam das nie an: gemessen am 08.10.2026 Weiss auf Lime, Kontrast 1,51 statt
   * der 4,5 aus WCAG AA. Als Zahl war aber auch Weiss selbst schon falsch: auf
   * dem tuerkisfarbenen Akzent des Auslieferungszustands misst sie 2,84:1.
   * `--inv-accent-fg` ist die Tinte, die zum Akzent gehoert — 6,29:1 hier,
   * 12,71:1 unter der Vorlage Dunkel. */
  --inv-sp-btn-ink-p: var(--inv-accent-fg, var(--inv-fg, #0f172a));
}

body.inv-spbtnfuell-umriss {
  --inv-sp-btn-bg-p: transparent;
  --inv-sp-btn-ink-p: var(--inv-primary, #111827);
  --inv-sp-btn-border-p: 1px solid var(--inv-primary, #111827);
  --inv-sp-btn-shadow-p: none;
  --inv-sp-btn-bg-hover-p: var(--inv-primary, #111827);
  --inv-sp-btn-ink-hover-p: var(--inv-primary-fg, #fff);
}

body.inv-spbtnfuell-getoent {
  --inv-sp-btn-bg-p: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 18%, transparent);
  --inv-sp-btn-ink-p: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  --inv-sp-btn-shadow-p: none;
  --inv-sp-btn-bg-hover-p: var(--inv-shop-accent, #24a9b3);
  /* Dieselbe Rechnung: beim Ueberfahren fuellt der Akzent, also gilt
     dessen Tinte. */
  --inv-sp-btn-ink-hover-p: var(--inv-accent-fg, var(--inv-fg, #0f172a));
}

/* Glas — dasselbe Material wie die Kopfzeile, der Mini-Warenkorb und das
   Auswahlfeld im Hero: durchscheinende Flaeche, Unschaerfe dahinter, eine
   helle Kante oben. Der Glanz braucht etwas Dunkles dahinter, also bleibt
   die Schriftfarbe die des Shops und nicht Weiss. */
body.inv-spbtnfuell-glas {
  --inv-sp-btn-bg-p: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 16%, transparent);
  --inv-sp-btn-ink-p: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  --inv-sp-btn-border-p: 1px solid color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 34%, transparent);
  --inv-sp-btn-shadow-p:
    0 8px 26px -18px color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 70%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, #fff 55%, transparent);
  --inv-sp-btn-bg-hover-p: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 30%, transparent);
}

body.inv-spbtnfuell-glas.woocommerce div.product form.cart .button.single_add_to_cart_button {
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

/* Weiss mit Maske — ein weisser Knopf, in den beim Zeigen eine dunkle
   Flaeche von links einlaeuft.
 *
 * Die Flaeche ist ein Verlauf auf dem Knopf selbst, kein zweites Element.
 * Ein `::before` waere die naheliegende Loesung und die falsche: ein
 * positioniertes Pseudo-Element wird ueber dem eigenen Text des Knopfes
 * gezeichnet, und der Text steht nicht in einem Element, das man darueber
 * heben koennte — ohne Rollen ist er ein nackter Textknoten. Der Verlauf
 * liegt dagegen im Hintergrund und kann die Schrift nie verdecken.
 *
 * Die Farbe der Maske ist die Zeigefarbe aus dem Customizer: wer sie
 * aendert, aendert die Maske. */
body.inv-spbtnfuell-weiss {
  --inv-sp-btn-bg-p: #fff;
  --inv-sp-btn-ink-p: var(--inv-fg, #0f172a);
  --inv-sp-btn-border-p: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 16%, transparent);
  --inv-sp-btn-shadow-p: 0 8px 24px -16px color-mix(in srgb, var(--inv-fg, #0f172a) 55%, transparent);
  --inv-sp-btn-ink-hover-p: #fff;
}

body.inv-spbtnfuell-weiss.woocommerce div.product form.cart .button.single_add_to_cart_button {
  background-image: linear-gradient(
    to right,
    var(--inv-sp-btn-bg-hover, var(--inv-fg, #0f172a)) 0 50%,
    transparent 50% 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition:
    background-position 0.45s var(--inv-shop-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    color 0.3s var(--inv-shop-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 0.3s var(--inv-shop-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Eine Klasse mehr als die Zeigeregel des Knopfes, damit die Grundfarbe
   weiss bleibt und nur die Maske einlaeuft. */
body.inv-spbtnfuell-weiss.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background-color: var(--inv-sp-btn-bg, var(--inv-sp-btn-bg-p, #fff));
  background-position: 0 0;
}

/* ---- Die Beschriftung, die sich beim Ueberfahren umdreht --------------
 *
 * „Knopf: Beschriftung rollt beim Ueberfahren" hat die zweite Kopie des
 * Wortes schon immer eingebaut — initBuyRoll() in assets/js/modules/
 * product.js verpackt die Beschriftung in `.txt-anim`, sobald die Einstellung
 * an ist. Bewegt hat sich nie etwas: die Regel, die den Lauf ausloest, steht
 * in components/buttons.css und nennt `.inv-btn` und `.vf-btn`. Der Knopf von
 * WooCommerce heisst `.single_add_to_cart_button.button` und war in keiner
 * der beiden Listen. Derselbe Fall wie bei der Karte im Katalog, siehe
 * pages/woo/woo-loop.css.
 *
 * `:not([data-gsap-roll])` aus demselben Grund wie dort: GSAP markiert, was
 * es uebernommen hat, und zwei Motoren an einem Wort streiten.
 * ----------------------------------------------------------------------- */
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover .txt-anim__inner:not([data-gsap-roll]),
.woocommerce div.product form.cart .button.single_add_to_cart_button:focus-visible .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* Der Knopf ist eine Flexbox mit zentriertem Inhalt: `.txt-anim` ist das
   Flex-Element und braucht eine eigene Zeilenbox, sonst hat der Ausschnitt
   keine Hoehe, gegen die er schneiden kann. */
.woocommerce div.product form.cart .button.single_add_to_cart_button .txt-anim {
  display: block;
}

/* Bewegung aus heisst: das zweite Wort gibt es nicht. Sonst stuende es unter
   dem ersten im Ausschnitt. */
body.inv-no-motion.woocommerce div.product form.cart .button.single_add_to_cart_button .txt-anim__inner::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product form.cart .button.single_add_to_cart_button .txt-anim__inner::after {
    content: none;
  }

  .woocommerce div.product form.cart .button.single_add_to_cart_button:hover .txt-anim__inner {
    transform: none;
  }
}

/* Wer Bewegung abgeschaltet hat, bekommt die Flaeche ohne Lauf. */
body.inv-no-motion.inv-spbtnfuell-weiss.woocommerce div.product form.cart .button.single_add_to_cart_button {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body.inv-spbtnfuell-weiss.woocommerce div.product form.cart .button.single_add_to_cart_button {
    transition: none;
  }
}

.woocommerce div.product form.cart .variations {
  flex: 1 1 100%;
  margin: 0 0 .4rem;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding: .3rem 0;
  vertical-align: middle;
}

/* What the shop promises, under the buy box. Three short facts are what turn
   a price into a decision, and every shop worth copying puts them here. */
.woocommerce div.product .product_meta {
  padding-top: .9rem;
  border-top: 1px solid var(--inv-shop-line);
  font-size: var(--inv-sp-meta-size, .82rem);
  color: var(--inv-sp-meta-color, var(--inv-shop-muted));
}

.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: .25rem;
}

.woocommerce div.product .product_meta a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.woocommerce div.product .product_meta a:hover {
  color: var(--inv-shop-accent);
}

/* -------------------------------------------------------------
   Everything below the two columns

   These used to carry `grid-column: 1 / -1` to span both columns of
   div.product. They are siblings of the column box now, not grid items, so
   there is no track for them to span and the declaration did nothing.
   ------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
  padding-top: clamp(8px, 1.5vw, 16px);
  border-top: 1px solid var(--inv-shop-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 clamp(18px, 2vw, 28px);
  padding: 0;
  overflow: visible;
  border: 0;
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--inv-shop-radius-sm);
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .6rem 1.1rem;
  border-radius: var(--inv-shop-radius-sm);
  color: var(--inv-shop-muted);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--inv-shop-dur) var(--inv-shop-ease),
    background-color var(--inv-shop-dur) var(--inv-shop-ease);
}

/* Der aktive Reiter trug einen weissen Sockel.
 *
 * Die Regel darueber raeumt `background` auf `li` ab — WooCommerce setzt aber
 * zusaetzlich `li.active { background: #fff }`, also eine Klasse mehr, und die
 * blieb stehen. Auf der hellen Palette fiel das nicht auf; mit der Vorlage
 * „Dunkel" stand helle Schrift auf einer weissen Kapsel. Gemessen am
 * 08.10.2026: Grund rgb(255,255,255) in jeder Vorlage. Die Kapsel, die der
 * aktive Reiter wirklich tragen soll, zeichnet die Regel darunter auf dem
 * Link — aus der Palette gemischt. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:focus-within {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--inv-fg, #0f172a);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 6%, transparent);
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
  max-width: var(--inv-sp-desc-width, 78ch);
  font-size: var(--inv-sp-desc-size, 1rem);
  line-height: var(--inv-sp-desc-lh, 1.75);
  color: var(--inv-sp-desc-color, inherit);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: none;
}

/* Der Text beginnt an der Kante des Feldes und nutzt dessen Breite.

   WooCommerce gibt dem Feld die Klasse entry-content, und unter
   `.entry-content > *` steht im Theme das Maß für Fließtext einer Seite:
   68 Zeichen, mittig. Im Feld (selbst 78 Zeichen) wurde daraus ein
   eingerückter, schmaler Block — gemessen 680 px ab 50 px Einzug, rechts
   daneben die halbe Seite leer. Das Maß des Feldes ist hier das Maß.

   Nicht auf dem Telefon: dort hat die Produktseite keinen eigenen Rand, und
   genau diese Regel hält den Text 24 px von der Kante. */
@media (min-width: 783px) {
  .woocommerce div.product .woocommerce-tabs .panel.entry-content > * {
    max-width: none;
    margin-inline: 0;
  }
}

/* Reiter links, Text rechts — auf breitem Schirm.

   Nebeneinander über dem Text ließen die Reiter eine Zeile von voller Breite
   stehen und darunter einen Text von 78 Zeichen: rechts davon blieb mehr als
   die Hälfte leer (beim Freund „viel leerer Platz“). Untereinander in einer
   eigenen Spalte nehmen sie diesen Platz, und der Text steht gleich neben
   ihnen, so breit wie bisher. Schmaler als 1100 px bleibt alles, wie es war. */
@media (min-width: 1100px) {
  .inv-sp-tabs-tabs.woocommerce div.product .woocommerce-tabs {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .inv-sp-tabs-tabs.woocommerce div.product .woocommerce-tabs ul.tabs {
    grid-column: 1;
    grid-row: 1 / span 20;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
    position: sticky;
    top: calc(var(--inv-header-bar-pt, 10px) + var(--inv-header-bar-h, 60px) + 20px);
  }

  .inv-sp-tabs-tabs.woocommerce div.product .woocommerce-tabs > :not(ul.tabs) {
    grid-column: 2;
    grid-row: 1;
  }
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .up-sells > h2,
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product #reviews > h2,
.woocommerce div.product .woocommerce-Reviews-title {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-sp-head-size, clamp(1.3rem, 2.2vw, 1.7rem));
  font-weight: var(--inv-sp-head-weight, 700);
  letter-spacing: -.022em;
  color: var(--inv-sp-head-color, inherit);
  text-align: var(--inv-sp-head-align, start);
}

/* -------------------------------------------------------------
   Reviews
   ------------------------------------------------------------- */
.woocommerce #reviews #comments ol.commentlist {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
  margin: 0;
  padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: flex;
  gap: 14px;
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  background: var(--inv-shop-surface);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static;
  width: 44px;
  height: 44px;
  float: none;
  padding: 0;
  border: 0;
  border-radius: var(--inv-radius-full, 9999px);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 991px) {
  .woocommerce div.product .inv-sp-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Same class as the sticky rule above, or this reset would be the weaker of
     the two and the gallery would stay pinned on a phone — where there is no
     second column for it to stay beside. */
  .woocommerce div.product div.images.woocommerce-product-gallery {
    position: static;
    max-height: none;
  }

  .woocommerce div.product div.images img {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product .woocommerce-tabs ul.tabs li a,
  .woocommerce div.product div.images .flex-control-thumbs img {
    transition: none;
  }
}

/* =============================================================
   The product page's options

   Each of these is a body class rather than a token: what a choice
   changes here is a set of declarations — an arrangement, a
   stickiness, how the panels below the fold are shown — and that is
   what a class expresses. A missing class means the default, so a
   shop that never opens these settings keeps the page it had.
   ============================================================= */

/* ---- the gallery stops following the scroll ---- */
body:not(.inv-sp-sticky).woocommerce div.product div.images.woocommerce-product-gallery {
  position: static;
  max-height: none;
}

/* ---- thumbnails: off, or moved to the side ---- */
.inv-sp-gal-none.woocommerce div.product div.images .flex-control-thumbs {
  display: none;
}

@media (min-width: 900px) {
  .inv-sp-gal-side.woocommerce div.product div.images {
    flex-direction: row-reverse;
    align-items: stretch;
  }

  /* A column of thumbnails rather than a strip. It scrolls itself when a
     product has more pictures than fit, so a long gallery cannot push the
     big picture out of the viewport. */
  .inv-sp-gal-side.woocommerce div.product div.images .flex-control-thumbs {
    flex: 0 0 78px;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: minmax(56px, 78px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ---- description and reviews, all open at once ---- */
.inv-sp-tabs-stacked.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none;
}

/* WooCommerce's own tabs script writes display:none straight onto the panel
   it is hiding. An inline style outranks every normal declaration, so this is
   one of the few places where !important is the mechanism rather than a
   shortcut. */
.inv-sp-tabs-stacked.woocommerce div.product .woocommerce-tabs .panel {
  display: block !important;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}

.inv-sp-tabs-stacked.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: block;
  margin: 0 0 .8rem;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---- description and reviews, as rows that open ---- */
.inv-sp-tabs-accordion.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none;
}

.inv-acc {
  border-top: 1px solid var(--inv-shop-line);
}

.inv-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 0;
  border: 0;
  border-bottom: 1px solid var(--inv-shop-line);
  background: transparent;
  color: inherit;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.inv-acc__head::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--inv-shop-dur) var(--inv-shop-ease);
}

.inv-acc__head[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Which panel is open is said with [hidden], not with a display rule, so the
   state lives in one place and assistive technology reads it. The !important
   is aimed at the inline display:none WooCommerce's tabs script writes — it
   also means this does not depend on which of the two scripts ran first. */
.inv-sp-tabs-accordion.woocommerce div.product .woocommerce-tabs .panel:not([hidden]) {
  display: block !important;
}

.inv-sp-tabs-accordion.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.1rem 0 1.6rem;
  border-bottom: 1px solid var(--inv-shop-line);
}

.inv-sp-tabs-accordion.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: none;
}

/* =============================================================
   The buy bar at the bottom of a phone screen

   It appears once the real button has scrolled away and presses that
   same button — it carries no cart logic of its own.
   ============================================================= */
.inv-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--inv-shop-line);
  background: color-mix(in srgb, var(--inv-shop-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 -18px 40px -30px rgba(15, 23, 42, .6);
  transform: translateY(110%);
  transition: transform var(--inv-shop-dur) var(--inv-shop-ease);
}

.inv-buybar.is-on { transform: none; }

.inv-buybar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.woocommerce .inv-buybar__img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: var(--inv-shop-radius-sm);
  object-fit: cover;
}

.inv-buybar__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.inv-buybar__name {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-buybar__price {
  font-size: .9rem;
  font-weight: 700;
  color: var(--inv-shop-price-color, var(--inv-shop-accent));
}

.inv-buybar__price del { opacity: .5; font-weight: 400; }
.inv-buybar__price ins { text-decoration: none; }

.woocommerce .inv-buybar__btn {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .inv-buybar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-buybar { transition: none; }
}

/* =============================================================
   The buy box

   On a shop that sells repairs rather than phones, the variation
   select IS the product: "Akku Wechsel", "Displayreparatur",
   "Face ID". It arrived as the browser's own grey dropdown next
   to a lilac button that came from WooCommerce's stylesheet —
   the one control that matters looked like the one control
   nobody styled.

   Same material as the finder in the hero, in the page's ink
   rather than the hero's white: that one sits on a dark stage,
   this one on paper.
   ============================================================= */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: separate;
  border-spacing: 0 10px;
}

/*
 * Beschriftung und Auswahlfeld standen nicht auf einer Höhe.
 *
 * Gemessen am 06.10.2026: die Mitte des Feldes lag 20 px über der Mitte der
 * Beschriftung. Der Grund steht in WooCommerces eigener Vorlage — der Link
 * „Leeren" (.reset_variations) liegt in derselben Zelle wie das Feld, nicht in
 * einer eigenen Zeile. Die Zelle wurde damit 78 px hoch statt 46;
 * `vertical-align: middle` zentrierte die Beschriftung auf dieser ganzen
 * Zeile, während das Feld oben in seiner Zelle blieb.
 *
 * Beides steht jetzt oben, und die Beschriftung bekommt die Höhe des Feldes
 * als Mindesthöhe: damit zentriert sie sich gegen das Feld und nicht gegen
 * die Zeile — gleichgültig, was sonst noch in der Zelle steht.
 */
.woocommerce div.product form.cart .variations th.label {
  width: 1%;
  padding: 0 14px 0 0;
  vertical-align: top;
  white-space: nowrap;
}

.woocommerce div.product form.cart .variations th.label label {
  display: flex;
  align-items: center;
  min-height: var(--inv-sp-select-h, 42px);
  margin: 0;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .92rem;
  font-weight: 600;
}

.woocommerce div.product form.cart .variations td.value {
  padding: 0;
  vertical-align: top;
}

/*
 * Beschriftung über dem Feld.
 *
 * `body.inv-spsel-above.woocommerce`, ohne Leerzeichen: WooCommerce setzt
 * seine Klasse auf dasselbe <body>, und ein Nachfahren-Zeichen dazwischen
 * würde ein Element suchen, das es nicht gibt. tools/tests/body_class_selectors.php
 * hat genau das hier gemeldet.
 *
 * Eine Tabelle, deren Zellen zu Blöcken werden: die Beschriftung nimmt sich
 * sonst als `width: 1%` mit `white-space: nowrap` so viel Breite, wie ihr
 * Name lang ist, und bei „Zusätzliche Garantieverlängerung" bleibt für das
 * Auswahlfeld daneben nichts übrig.
 */
body.inv-spsel-above.woocommerce div.product form.cart .variations,
body.inv-spsel-above.woocommerce div.product form.cart .variations tbody,
body.inv-spsel-above.woocommerce div.product form.cart .variations tr,
body.inv-spsel-above.woocommerce div.product form.cart .variations th.label,
body.inv-spsel-above.woocommerce div.product form.cart .variations td.value {
  display: block;
  width: auto;
}

body.inv-spsel-above.woocommerce div.product form.cart .variations th.label {
  padding: 0 0 6px;
  text-align: start;
  white-space: normal;
}

body.inv-spsel-above.woocommerce div.product form.cart .variations th.label label {
  min-height: 0;
}

body.inv-spsel-above.woocommerce div.product form.cart .variations tr + tr {
  margin-top: 14px;
}

.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select.inv-select {
  width: 100%;
  min-width: 0;
  height: var(--inv-sp-select-h, 42px);
  margin: 0;
  padding: 0 38px 0 14px;

  color: var(--inv-fg, #0f172a);
  background-color: color-mix(in srgb, var(--inv-shop-surface) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 85%, transparent);
  border-radius: var(--inv-sp-select-radius, var(--inv-shop-radius-sm));

  font-family: inherit;
  font-size: var(--inv-sp-select-size, 14px);
  font-weight: 500;

  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);

  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230f172a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;

  cursor: pointer;
  text-overflow: ellipsis;
  transition:
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce div.product form.cart .variations select:hover {
  background-color: color-mix(in srgb, var(--inv-shop-surface) 85%, transparent);
}

.woocommerce div.product form.cart .variations select:focus {
  outline: none;
  border-color: var(--inv-shop-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* "Auswahl zurücksetzen" is a link, not a second button. */
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--inv-shop-muted);
}

/* The price of the chosen variation, once one is chosen. */
.woocommerce div.product form.cart .woocommerce-variation-price {
  margin: .2rem 0 .9rem;
}

.woocommerce div.product form.cart .woocommerce-variation-price .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--inv-shop-price-color, inherit);
}

/* The button WooCommerce ships is lilac. This one belongs to the theme. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* Hier standen die Masse als Zahlen: 52, clamp(20px, 2.4vw, 34px),
     var(--inv-shop-radius-sm), 1rem. Die Regel darueber liest dafuer
     `--inv-sp-btn-*` aus „Knopf & Menge auf der Produktseite" — hat aber
     eine Klasse weniger als diese, und verloren damit jede davon. Fuenf
     Einstellungen waren folgenlos, auch nach dem Speichern. Gemessen am
     08.10.2026: Hoehe/Innenabstand/Schrift/Rundung in jeder Einstellung
     gleich. Jetzt liest diese Regel die Marken selbst, und die Zahlen sind
     ihr Rueckfall — ohne Einstellung aendert sich also nichts. */
  min-height: var(--inv-sp-btn-h, 52px);
  padding: 0 var(--inv-sp-btn-px, var(--inv-sp-btn-px-p, clamp(20px, 2.4vw, 34px)));
  border: var(--inv-sp-btn-border-p, 0);
  border-radius: var(--inv-sp-btn-radius, var(--inv-sp-btn-radius-p, var(--inv-shop-btn-radius, var(--inv-shop-radius-sm))));

  background: var(--inv-sp-btn-bg, var(--inv-sp-btn-bg-p, var(--inv-shop-accent)));
  color: var(--inv-sp-btn-ink, var(--inv-sp-btn-ink-p, var(--inv-primary-fg, #fff)));

  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-sp-btn-size, 1rem);
  font-weight: 600;
  letter-spacing: -.01em;

  box-shadow: var(--inv-sp-btn-shadow-p, 0 12px 30px -14px color-mix(in srgb, var(--inv-shop-accent) 75%, transparent));
  cursor: pointer;
  transition:
    background-color var(--inv-shop-dur) var(--inv-shop-ease),
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease),
    transform var(--inv-shop-dur) var(--inv-shop-ease);
}

/* Beim Zeigen wird die Flaeche dunkler, nicht blasser — derselbe Grundsatz
   wie bei den Knoepfen im Kundenkonto. `background-color` statt `background`,
   damit die Maske der weissen Vorlage nicht mit abgeraeumt wird. */
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background-color: var(--inv-sp-btn-bg-hover, var(--inv-sp-btn-bg-hover-p,
    color-mix(in srgb, var(--inv-sp-btn-bg, var(--inv-sp-btn-bg-p, var(--inv-shop-accent))) 88%, #000)));
  border-color: var(--inv-sp-btn-bg-hover, var(--inv-sp-btn-bg-hover-p, transparent));
  color: var(--inv-sp-btn-ink-hover, var(--inv-sp-btn-ink-hover-p,
    var(--inv-sp-btn-ink, var(--inv-sp-btn-ink-p, #fff))));
  box-shadow: var(--inv-sp-btn-shadow-p, 0 16px 36px -14px color-mix(in srgb, var(--inv-shop-accent) 85%, transparent));
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled {
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 18%, transparent);
  box-shadow: none;
  cursor: not-allowed;
}

/* The box around the whole thing, tightened. It was a tall pale rectangle
   with the controls floating in the middle of it. */
.woocommerce div.product form.cart {
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  background: color-mix(in srgb, var(--inv-shop-surface) 70%, transparent);
}

.woocommerce div.product form.cart div.quantity {
  margin-right: 10px;
}

/* =============================================================
   Swatches and the dropdown of our own

   Three shapes for one thing. A colour is a circle because a
   colour is seen; a size is a tile because a size is tapped; a
   sentence stays a list because a sentence is read.
   ============================================================= */
.inv-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}

.inv-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--inv-swatch-size, 44px);
  height: var(--inv-swatch-size, 44px);
  padding: 0 10px;

  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-swatch-radius, 10px);
  background: var(--inv-shop-surface);
  color: var(--inv-fg, #0f172a);

  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;

  transition:
    border-color var(--inv-shop-dur) var(--inv-shop-ease),
    box-shadow var(--inv-shop-dur) var(--inv-shop-ease),
    transform var(--inv-shop-dur) var(--inv-shop-ease);
}

.inv-swatch:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--inv-shop-accent) 55%, var(--inv-shop-line));
}

.inv-swatch.is-on {
  border-color: var(--inv-shop-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 22%, transparent);
}

/* Ruled out by the other choices: shown, dimmed, and struck through, so the
   row keeps its shape and the reason is legible. */
.inv-swatch.is-out,
.inv-swatch:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.inv-swatch.is-out::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left,
    transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px));
  border-radius: inherit;
  opacity: .5;
}

/* ---- colour circles ---- */
.inv-swatch--colour {
  width: var(--inv-swatch-size, 44px);
  min-width: var(--inv-swatch-size, 44px);
  padding: 0;
  border-radius: 50%;
  background: var(--inv-swatch-c, var(--inv-shop-surface));
  /* A ring inside the edge, so white on white still reads as a circle. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
  overflow: hidden;
}

.inv-swatch--colour.is-on {
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, .12),
    0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 30%, transparent);
}

/* The name is hidden while there is a colour to look at, and shown when there
   is not — a circle with no colour and no word says nothing at all. */
.inv-swatch--colour[style*="--inv-swatch-c"] .inv-swatch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inv-swatch--colour:not([style*="--inv-swatch-c"]) .inv-swatch__label {
  font-size: .72rem;
  padding: 0 6px;
}

/* Der Preis der Variante steht schon oben (variations.js, wirePrice) —
   darunter nicht noch einmal denselben Betrag. Vorrat und Beschreibung der
   Variante bleiben. */
.woocommerce div.product form.inv-price-follows .woocommerce-variation-price {
  display: none;
}

/* ---- our dropdown ---- */
.inv-vselect {
  position: relative;
  width: 100%;
}

.inv-vselect__native {
  /* Still in the document, still what the form posts — just not drawn.
     Aus dem Tab-Weg nimmt es variations.js (tabindex -1, aria-hidden): ein
     Punkt mit opacity 0 ist unsichtbar, aber anspringbar, und das war eine
     Haltestelle, die man nicht sehen konnte. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Die Zeile, auf die aria-activedescendant gerade zeigt. Ohne sie waere die
   Tastaturbedienung zwar da, aber nicht zu sehen. */
.inv-vselect__option.is-active {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 12%, transparent);
}

.inv-vselect__trigger:focus-visible {
  outline: var(--inv-focus-w, 2px) solid var(--inv-focus-c, var(--inv-accent, #24a9b3));
  outline-offset: 2px;
}

.inv-vselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: var(--inv-sp-select-h, 42px);
  padding: 0 14px;

  border: 1px solid color-mix(in srgb, var(--inv-fg, #0f172a) 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 85%, transparent);
  border-radius: var(--inv-sp-select-radius, var(--inv-shop-radius-sm));
  background-color: color-mix(in srgb, var(--inv-shop-surface) 65%, transparent);
  color: inherit;

  font-family: inherit;
  font-size: var(--inv-sp-select-size, 14px);
  font-weight: 500;
  text-align: start;

  box-shadow:
    0 4px 16px -6px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  cursor: pointer;
}

.inv-vselect.is-open .inv-vselect__trigger,
.inv-vselect__trigger:focus-visible {
  outline: none;
  border-color: var(--inv-shop-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--inv-shop-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.inv-vselect__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--inv-shop-dur) var(--inv-shop-ease);
}

.inv-vselect.is-open .inv-vselect__chev { transform: rotate(180deg); }

.inv-vselect__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;

  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  padding: 6px;

  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius-sm);
  background: var(--inv-shop-surface);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35);

  animation: inv-vselect-in 180ms var(--inv-shop-ease);
}

@keyframes inv-vselect-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.inv-vselect__option {
  padding: 10px 12px;
  border: 0;
  border-radius: var(--inv-radius-sm, 10px);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: .92rem;
  text-align: start;
  cursor: pointer;
}

.inv-vselect__option:hover,
.inv-vselect__option:focus-visible {
  background: color-mix(in srgb, var(--inv-shop-accent) 10%, transparent);
}

.inv-vselect__option.is-on {
  background: color-mix(in srgb, var(--inv-shop-accent) 16%, transparent);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .inv-vselect__list { animation: none; }
  .inv-vselect__chev,
  .inv-swatch { transition: none; }
}

/* -------------------------------------------------------------
   Anfrage statt Warenkorb

   Der Knopf steht an der Stelle des Kauf-Knopfes und sieht aus wie er: es ist
   dieselbe Handlung an derselben Stelle, nur mit einem anderen Ende. Im Katalog
   braucht er keine eigene Regel — er landet in .inv-shop-card__foot und nimmt
   die Form der Karte an.
   ------------------------------------------------------------- */
.woocommerce div.product a.button.inv-shop-anfrage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 52px;
  padding: 0 clamp(20px, 2.4vw, 34px);
  border: 0;
  border-radius: var(--inv-shop-radius-sm);

  background: var(--inv-shop-accent);
  color: var(--inv-accent-fg, var(--inv-fg, #0f172a));
  font-family: var(--inv-font-display, inherit);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--inv-shop-dur, .18s) var(--inv-shop-ease, ease),
              box-shadow var(--inv-shop-dur, .18s) var(--inv-shop-ease, ease);
}

.woocommerce div.product a.button.inv-shop-anfrage:hover {
  background: color-mix(in srgb, var(--inv-shop-accent) 88%, #000);
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--inv-shop-accent) 85%, transparent);
}

/* -------------------------------------------------------------
   „Preis auf Anfrage"

   Steht an der Stelle des Preises, in derselben Größe, aber gedämpft: es ist
   eine Auskunft und keine Zahl, und sie soll nicht als eine gelesen werden.
   ------------------------------------------------------------- */
.inv-shop-price-request {
  color: var(--inv-shop-muted, var(--inv-muted-fg, #64748b));
  font-size: var(--inv-shop-price-size, 1rem);
  font-weight: 500;
  font-style: normal;
}


/* =============================================================
   Brotkrumen über dem Produkt
   ============================================================= */
.inv-sp-crumbs {
  margin-block-end: clamp(14px, 1.6vw, 22px);
  font-size: var(--inv-sp-meta-size, .82rem);
  color: var(--inv-sp-meta-color, var(--inv-shop-muted, #64748b));
}

.inv-sp-crumbs a {
  color: inherit;
  text-decoration: none;
}

.inv-sp-crumbs a:hover {
  color: var(--inv-shop-accent, #24a9b3);
}


/* =============================================================
   Die Beschreibung, nach N Zeilen abgeschnitten

   „Beschreibung kürzen nach … Zeilen“. Ohne JavaScript: das Kästchen trägt
   den Zustand, die Beschriftung ist der Knopf, CSS macht den Rest. Eine Seite,
   die für das Aufklappen ein Skript braucht, ist eine Seite, die kaputtgeht,
   wenn das Skript es tut — und der ganze Text muss erreichbar bleiben.

   -webkit-line-clamp ist trotz des Präfixes der Standardweg; alle heutigen
   Browser verstehen ihn, und Safari versteht nur ihn.
   ============================================================= */
.inv-sp-desc__switch {
  /* Sichtbar für die Tastatur, unsichtbar für das Auge. Nicht display:none —
     das nähme das Kästchen aus der Tab-Reihenfolge, und der Knopf wäre nur
     noch mit der Maus zu bedienen. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.inv-sp-desc__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--inv-sp-desc-lines, 8);
  line-clamp: var(--inv-sp-desc-lines, 8);
  overflow: hidden;
}

.inv-sp-desc__switch:checked ~ .inv-sp-desc__body {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.inv-sp-desc__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-start: .85rem;
  padding: .45rem .9rem .45rem 0;
  color: var(--inv-shop-accent, #24a9b3);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.inv-sp-desc__btn::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--inv-shop-dur, 400ms) var(--inv-shop-ease, ease);
}

.inv-sp-desc__switch:checked ~ .inv-sp-desc__btn::after {
  transform: translateY(2px) rotate(-135deg);
}

.inv-sp-desc__btn:hover {
  color: var(--inv-fg, #0f172a);
}

/* Die Tastatur muss sehen, wo sie steht. */
.inv-sp-desc__switch:focus-visible ~ .inv-sp-desc__btn {
  outline: 2px solid var(--inv-shop-accent, #24a9b3);
  outline-offset: 3px;
  border-radius: 4px;
}

.inv-sp-desc__less,
.inv-sp-desc__switch:checked ~ .inv-sp-desc__btn .inv-sp-desc__more {
  display: none;
}

.inv-sp-desc__switch:checked ~ .inv-sp-desc__btn .inv-sp-desc__less {
  display: inline;
}

/* Ohne zweite Beschriftung verschwindet der Knopf, sobald der Text offen ist. */
.inv-sp-desc--once .inv-sp-desc__switch:checked ~ .inv-sp-desc__btn {
  display: none;
}

/* Ein Text, der ohnehin ganz dasteht, braucht auch die Begrenzung nicht —
   sonst klemmt das letzte Wort an einer Kante, die niemand sieht. Die Klasse
   setzt product.js, wenn nichts abgeschnitten wurde. */
.inv-sp-desc--whole .inv-sp-desc__body {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* ========================================================================
   Die Wahl der Leistung  (inc/shop-repair.php)
   ===================================================================== */

/*
 * Das Auswahlfeld steht in form.cart, ueber dem Knopf, und muss dort auffallen:
 * im Reparaturkatalog ist es der Schritt, nach dem der Preis erst feststeht.
 * Ein `appearance: none` mit eigenem Pfeil, weil das Feld sonst in jedem
 * Betriebssystem anders hoch ist als der Knopf darunter.
 */
.inv-repair {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0 0 16px;
}

.inv-repair__label {
  font-family: var(--inv-font-display, inherit);
  font-size: var(--inv-repair-label-size, 14px);
  font-weight: 600;
  color: var(--inv-fg, #0f172a);
}

.inv-repair__select {
  width: 100%;
  min-height: var(--inv-repair-h, 48px);
  padding: 0 40px 0 14px;
  border: 1px solid var(--inv-shop-line, rgba(15, 23, 42, 0.14));
  border-radius: var(--inv-shop-radius-sm, 10px);
  background-color: var(--inv-shop-surface, #fff);
  color: var(--inv-fg, #0f172a);
  font: inherit;
  font-size: var(--inv-repair-size, 15px);
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  /* Der Pfeil als Hintergrundbild: ein Pseudo-Element gibt es an einem
     <select> nicht, und ein Wrapper mit eigenem Pfeil verdeckt den Klick. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  transition: border-color var(--inv-shop-dur, 240ms) var(--inv-shop-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.inv-repair__select:hover {
  border-color: var(--inv-shop-accent, #24a9b3);
}

.inv-repair__select:focus-visible {
  outline: 2px solid var(--inv-shop-accent, #24a9b3);
  outline-offset: 2px;
  border-color: var(--inv-shop-accent, #24a9b3);
}

/* Solange nichts gewaehlt ist, traegt das Feld den Platzhalter — und der soll
   nicht wie eine Antwort aussehen. :has() haelt die Regel am Feld selbst;
   wo es fehlt, bleibt der Text einfach dunkel, was nichts kaputt macht. */
.inv-repair__select:has(option[value=""]:checked) {
  color: var(--inv-shop-muted, rgba(15, 23, 42, 0.55));
}

.inv-repair__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--inv-shop-muted, rgba(15, 23, 42, 0.55));
}

/* „ab 69,00 €" — dort, wo sonst der Preis steht. */
.inv-repair-from {
  font-weight: 600;
}

/* Auf dem Telefon steht das Feld ueber dem Knopf und darf die ganze Zeile
   haben: form.cart legt dort sonst Menge und Knopf nebeneinander. */
@media (max-width: 600px) {
  .inv-repair {
    margin-bottom: 12px;
  }
}


/* -------------------------------------------------------------
   Die Auswahl auf Tablett und Telefon

   Höhe und Schrift standen fest: 46 px und .95rem auf jedem Gerät,
   gemessen am 06.10.2026 bei 1280, 768 und 390 px. Beide Werte sind
   jetzt je Gerät einstellbar — darum liest jeder Medienblock
   `var(--x-mob, var(--x-tab, <Entwurfswert>))`.

   Die Mindesthöhe der Beschriftung läuft mit: sie ist das, was
   Beschriftung und Feld auf eine Höhe bringt.
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .woocommerce div.product form.cart .variations select,
  .woocommerce div.product form.cart select.inv-select,
  .inv-vselect__trigger {
    height: var(--inv-sp-select-h-tab, 40px);
    font-size: var(--inv-sp-select-size-tab, 13.5px);
  }

  .woocommerce div.product form.cart .variations th.label label {
    min-height: var(--inv-sp-select-h-tab, 40px);
  }
}

@media (max-width: 640px) {
  .woocommerce div.product form.cart .variations select,
  .woocommerce div.product form.cart select.inv-select,
  .inv-vselect__trigger {
    height: var(--inv-sp-select-h-mob, var(--inv-sp-select-h-tab, 38px));
    font-size: var(--inv-sp-select-size-mob, var(--inv-sp-select-size-tab, 13px));
  }

  .woocommerce div.product form.cart .variations th.label label {
    min-height: var(--inv-sp-select-h-mob, var(--inv-sp-select-h-tab, 38px));
  }

  /* Auf einem Telefon gibt es keine zwei Spalten: eine Beschriftung mit
     `white-space: nowrap` nimmt sich ihre volle Länge, und für das
     Auswahlfeld daneben bleiben 120 px. Hier steht sie immer darüber,
     gleichgültig, was eingestellt ist. */
  .woocommerce div.product form.cart .variations,
  .woocommerce div.product form.cart .variations tbody,
  .woocommerce div.product form.cart .variations tr,
  .woocommerce div.product form.cart .variations th.label,
  .woocommerce div.product form.cart .variations td.value {
    display: block;
    width: auto;
  }

  .woocommerce div.product form.cart .variations th.label {
    padding: 0 0 6px;
    text-align: start;
    white-space: normal;
  }

  .woocommerce div.product form.cart .variations th.label label {
    min-height: 0;
  }

  .woocommerce div.product form.cart .variations tr + tr {
    margin-top: 14px;
  }
}

/* -------------------------------------------------------------
   Die Sterne im Bewertungsformular

   WooCommerce baut sie als Links und gibt ihnen keine Farbe, also erbten sie
   die der Textlinks — die Primaerfarbe. Auf einer dunklen Palette ergab das
   am 08.10.2026 gemessene 2,71:1 bei 24 px, unter den 3,0, die WCAG AA fuer
   grosse Schrift verlangt. Die Sterne sind Schriftzeichen, keine Verzierung,
   also bekommen sie eine eigene Farbe: der Akzent, um 30 % zur Textfarbe
   gemischt, damit er auf hellem Grund dunkelt und auf dunklem aufhellt.
   ------------------------------------------------------------- */
.woocommerce #review_form #respond p.stars a,
.woocommerce #review_form #respond p.stars a:hover,
.woocommerce #reviews p.stars a {
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, var(--inv-fg, #0f172a));
}


/* ── woo-cart.css ── */
/* =============================================================
   Inverta — WooCommerce: cart and checkout

   Both pages are tables by default. On a desktop a table is the right
   shape for a basket, so it keeps one — with the plugin's borders and
   background stripes replaced by the site's own hairlines. On a phone
   the same table becomes a stack of rows, each labelled by the column
   it came from, which is what makes a basket readable at 380px.
   ============================================================= */

/* -------------------------------------------------------------
   Shared table shape
   ------------------------------------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 var(--inv-shop-gap);
  border: 1px solid var(--inv-shop-line);
  border-radius: var(--inv-shop-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--inv-shop-surface);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: clamp(12px, 1.4vw, 18px);
  border: 0;
  border-bottom: 1px solid var(--inv-shop-line);
  vertical-align: middle;
}

.woocommerce table.shop_table thead th {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-shop-muted);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent);
}

.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}

.woocommerce table.shop_table td.product-name a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
  color: var(--inv-shop-accent);
}

.woocommerce table.cart img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--inv-shop-radius-sm);
  display: block;
}

.woocommerce table.cart td.product-remove a.remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--inv-radius-full, 9999px);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 6%, transparent);
  color: var(--inv-shop-muted) !important;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--inv-shop-dur) var(--inv-shop-ease);
}

.woocommerce table.cart td.product-remove a.remove:hover {
  background: #ef4444;
  color: #fff !important;
}

/* The actions row: coupon on the left, update on the right */
.woocommerce table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent);
}

.woocommerce table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  float: none;
  padding: 0;
}

.woocommerce table.cart td.actions .coupon input[type="text"] {
  width: 14rem;
  min-height: 44px;
}

/* -------------------------------------------------------------
   Totals
   ------------------------------------------------------------- */
.woocommerce .cart-collaterals {
  display: grid;
  justify-items: end;
}

.woocommerce .cart-collaterals .cart_totals {
  width: min(28rem, 100%);
  float: none;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
  margin: 0 0 .8rem;
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-size: 1.15rem;
}

.woocommerce .wc-proceed-to-checkout {
  padding: 0;
  margin-top: .8rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  font-size: .95rem;
}

/* -------------------------------------------------------------
   Checkout
   ------------------------------------------------------------- */
.woocommerce .woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--inv-shop-gap);
  width: auto;
}

.woocommerce .woocommerce-checkout .col2-set .col-1,
.woocommerce .woocommerce-checkout .col2-set .col-2 {
  width: auto;
  float: none;
}

.woocommerce .woocommerce-checkout #customer_details,
.woocommerce .woocommerce-checkout #order_review {
  margin-bottom: var(--inv-shop-gap);
}

.woocommerce-checkout #payment {
  border-radius: var(--inv-shop-radius);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent);
  border: 1px solid var(--inv-shop-line);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--inv-shop-line);
  padding: clamp(14px, 1.8vw, 20px);
}

.woocommerce-checkout #payment div.form-row {
  padding: clamp(14px, 1.8vw, 20px);
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  float: none;
}

.woocommerce-checkout #payment div.payment_box {
  border-radius: var(--inv-shop-radius-sm);
  background: var(--inv-shop-surface);
  border: 1px solid var(--inv-shop-line);
  font-size: .88rem;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--inv-shop-line);
}

/* -------------------------------------------------------------
   An empty basket
   ------------------------------------------------------------- */
.woocommerce .cart-empty,
.woocommerce .return-to-shop {
  text-align: center;
}

.woocommerce .cart-empty {
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

/* -------------------------------------------------------------
   Phones: the table becomes a stack

   Each cell carries the column heading WooCommerce put in data-title,
   so a row still says what each number is once the header is gone.
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce .woocommerce-checkout .col2-set {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table tbody tr,
  .woocommerce table.shop_table tfoot tr {
    display: grid;
    gap: 2px;
    padding: clamp(12px, 3vw, 16px);
    border-bottom: 1px solid var(--inv-shop-line);
  }

  .woocommerce table.shop_table tbody tr:last-child,
  .woocommerce table.shop_table tfoot tr:last-child {
    border-bottom: 0;
  }

  .woocommerce table.shop_table tbody td,
  .woocommerce table.shop_table tfoot td,
  .woocommerce table.shop_table tfoot th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: .35rem 0;
    border: 0;
    text-align: end;
  }

  .woocommerce table.shop_table td[data-title]::before {
    content: attr(data-title);
    flex: none;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inv-shop-muted);
  }

  .woocommerce table.cart td.product-thumbnail {
    justify-content: flex-start;
  }

  .woocommerce table.cart td.product-thumbnail::before {
    content: none;
  }

  .woocommerce table.cart td.actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce table.cart td.actions .coupon {
    flex-wrap: wrap;
  }

  .woocommerce table.cart td.actions .coupon input[type="text"] {
    width: 100%;
  }

  .woocommerce table.cart td.actions .coupon .button,
  .woocommerce table.cart td.actions > .button {
    width: 100%;
  }

  .woocommerce .cart-collaterals {
    justify-items: stretch;
  }
}


/* ── woo-blocks.css ── */
/* =============================================================
   Inverta — WooCommerce: Warenkorb und Kasse als Blöcke

   Beide Seiten sind nicht der klassische Shortcode, sondern Blöcke. Beim
   Warenkorb steht das noch im ausgelieferten HTML; die Kasse baut sich
   vollständig im Browser auf — im HTML vom Server kommt keine ihrer Klassen
   überhaupt vor, im fertigen Dokument sind es 473 Knoten und 91 Klassen.
   woo-cart.css spricht die klassische Auszeichnung an, Tabelle und
   .cart_totals und .col2-set, und traf davon nichts. Ein Template unter
   woocommerce/cart/ hätte auch nichts geändert: ein Block liest keine.

   Viele Klassen teilen sich die beiden — wc-block-components-* für Summen,
   Knöpfe, Felder und Klapppanels. Die stehen deshalb einmal hier, unter beiden
   Wurzeln, und nur was wirklich zu einer Seite gehört, steht für sich.

   Die Einstellungen der Sektion "Warenkorb" schrieben zwölf Variablen, und alle
   zwölf las ausschließlich die Schublade (components/cart-drawer/*.css):
   einstellbar war der Mini-Warenkorb und an diesen beiden Seiten nichts.

   Geteilt wird davon nur, was dieselbe Sache ist. Der Knopf zur Kasse ist in der
   Schublade und auf der Seite dieselbe Handlung, also liest er dieselben Tokens:
   --inv-cart-btn-checkout-color, -text-color, -height, -radius, -font-size.

   Flächen und Textfarben nicht. Die Schublade darf dunkel sein — dafür gibt es
   die Auswahl "Dunkel" —, und wer ihre Karte dunkel und ihren Text weiß stellt,
   hätte damit sonst eine dunkle Karte mit weißem Text mitten auf einer hellen
   Warenkorb-Seite bekommen. Diese beiden Seiten nehmen die Tokens des Katalogs,
   --inv-shop-card-bg, --inv-shop-card-line, --inv-shop-title-color,
   --inv-shop-price-color: dort gehören sie hin, dort stellt man sie ein, und der
   Warenkorb sieht damit aus wie der Laden, in dem er steht.
   ============================================================= */

/* -------------------------------------------------------------
   Die zwei Spalten
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart {
  color: var(--inv-fg, #0f172a);
  font-family: var(--inv-font-sans, system-ui, sans-serif);
}

/* Beide Klassen sitzen auf demselben Element — nachgemessen trägt der Kasten
   `wc-block-components-sidebar wc-block-cart__sidebar
   wp-block-woocommerce-cart-totals-block`. Mit einem Leerzeichen dazwischen
   fragte die Regel nach einem Element in sich selbst und traf nichts. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  background: var(--inv-shop-card-bg, var(--inv-cartsum-skin-bg, color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent)));
  border: 1px solid var(--inv-shop-card-line, var(--inv-cartsum-skin-line, var(--inv-shop-line, rgba(15, 23, 42, .1))));
  border-radius: var(--inv-shop-card-radius, var(--inv-shop-radius, 16px));
  box-shadow: var(--inv-shop-card-shadow, none);
  padding: var(--inv-shop-card-pad, clamp(16px, 2vw, 24px));
}

/* -------------------------------------------------------------
   Kopfzeile und Positionen
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
  font-family: var(--inv-font-display, inherit);
  font-size: var(--inv-shop-meta-size, .82rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inv-shop-muted, var(--inv-muted-fg, #64748b));
  border-bottom: 1px solid var(--inv-shop-line, rgba(15, 23, 42, .1));
}

.wp-block-woocommerce-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--inv-cartrow-line, var(--inv-cartrow-line-set, var(--inv-shop-line, rgba(15, 23, 42, .08))));
}

.wp-block-woocommerce-cart .wc-block-cart-items__row > td {
  padding-block: var(--inv-cartrow-pad, var(--inv-cartrow-pad-set, 16px));
}

.wp-block-woocommerce-cart .wc-block-cart-item__image {
  width: var(--inv-cartimg-w, var(--inv-cartimg-w-set, 80px));
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  border-radius: var(--inv-cartimg-radius, var(--inv-cartimg-radius-set, var(--inv-shop-radius-sm, 10px)));
  /* Contained, not cropped — dieselbe Entscheidung wie im Katalog und auf der
     Produktseite: ein beschnittenes Produktfoto ist ein Rückläufer. */
  object-fit: contain;
}

.wp-block-woocommerce-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
  font-family: var(--inv-font-display, inherit);
  font-weight: var(--inv-shop-title-weight, 600);
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-components-product-name:hover,
.wc-block-checkout .wc-block-components-product-name:hover {
  color: var(--inv-shop-accent, var(--inv-accent, #e07b30));
}

.wp-block-woocommerce-cart .wc-block-components-product-price__value,
.wc-block-checkout .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  font-weight: var(--inv-shop-price-weight, 700);
  color: var(--inv-shop-price-color, var(--inv-fg, #0f172a));
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--inv-shop-muted, var(--inv-muted-fg, #64748b));
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--inv-shop-accent, var(--inv-accent, #e07b30));
}

/* -------------------------------------------------------------
   Mengen-Schalter
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector,
.wc-block-checkout .wc-block-components-quantity-selector {
  border: 1px solid var(--inv-shop-line, rgba(15, 23, 42, .16));
  border-radius: var(--inv-shop-radius-sm, 10px);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector,
.wc-block-checkout .wc-block-components-quantity-selector__button {
  color: var(--inv-fg, #0f172a);
  transition: color var(--inv-shop-dur, .18s) var(--inv-shop-ease, ease);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover:not([disabled]),
.wc-block-checkout .wc-block-components-quantity-selector__button:hover:not([disabled]) {
  color: var(--inv-shop-accent, var(--inv-accent, #e07b30));
}

/* -------------------------------------------------------------
   Summe
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--inv-font-display, inherit);
  color: var(--inv-shop-muted, var(--inv-muted-fg, #64748b));
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-item__label {
  color: var(--inv-shop-muted, var(--inv-muted-fg, #64748b));
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wc-block-checkout .wc-block-components-totals-footer-item {
  font-family: var(--inv-font-display, inherit);
  color: var(--inv-fg, #0f172a);
}

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper {
  border-top-color: var(--inv-shop-line, rgba(15, 23, 42, .1));
}

/* -------------------------------------------------------------
   Zur Kasse
   ------------------------------------------------------------- */
/* `body` und die zweite Klasse stehen mit im Selektor, weil WooCommerce
   min-height: 3em über `body:not(…) .wc-block-components-button:not(…)` setzt —
   ein Element und drei Klassen. Ohne sie blieb der Knopf im Warenkorb bei 42 px,
   während der auf der Kasse die eingestellten 44 nahm: dieselbe Einstellung,
   zwei Ergebnisse. */
/* `:not(.is-link)` steht hier nur des Gewichts wegen — keiner dieser Knöpfe trägt
   die Klasse. WooCommerces Regel zählt drei Klassen und ein Element
   (`body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link)`),
   genau so viel wie diese hier ohne das `:not`. Bei Gleichstand entscheidet die
   Reihenfolge, und Blockstile werden im Body gedruckt, also nach allem im <head>:
   gemessen blieb der Knopf im Warenkorb bei 48 px (WooCommerces `min-height: 3em`
   bei 16 px Schrift), während der auf der Kasse die eingestellten 44 nahm —
   dieselbe Einstellung, zwei Ergebnisse. Eine Klasse mehr, und die Reihenfolge
   entscheidet nicht mehr mit. */
body .wp-block-woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link),
body .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link),
body .wc-block-checkout .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link) {
  background: var(--inv-cart-btn-checkout-color, var(--inv-shop-accent, var(--inv-accent, #e07b30)));
  color: var(--inv-cart-btn-checkout-text-color, var(--inv-accent-fg, var(--inv-fg, #0f172a)));
  border-radius: var(--inv-cart-btn-radius, var(--inv-shop-radius-sm, 10px));
  min-height: var(--inv-cart-page-btn-h, var(--inv-cart-btn-height, 48px));
  font-family: var(--inv-font-display, inherit);
  font-size: var(--inv-cart-btn-font-size, 1rem);
  font-weight: 600;
  /* Mitgeschrieben, weil `min-height` nur ein Boden ist und die Beschriftung die
     Höhe macht. Der Knopf im Warenkorb erbte 1.8 vom Seitentext, der auf der
     Kasse 1.4: gemessen 50 px gegen 44 bei derselben Einstellung "Höhe: 44".
     Eine Zeilenhöhe, ein Ergebnis. */
  line-height: 1.4;
  transition: filter var(--inv-shop-dur, .18s) var(--inv-shop-ease, ease);
}

body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
  filter: brightness(1.08);
}

/* -------------------------------------------------------------
   Der leere Warenkorb
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart__empty {
  font-family: var(--inv-font-display, inherit);
}

/*
 * Die Produktliste im leeren Warenkorb trug die Seite über den rechten Rand.
 *
 * Gemessen bei 390 px Fensterbreite: ul.wc-block-grid__products lag bei
 * -8..398, das Dokument war 398 px breit und die Seite ließ sich seitwärts
 * schieben. Der Block bringt `margin: 0 -8px` mit — die Gegenrechnung zu einem
 * Innenabstand, den seine Kacheln hier nicht haben — und dazu den
 * Listen-Innenabstand von 24 px, den niemand zurückgesetzt hatte. Beides weg,
 * die Abstände macht `gap`.
 */
.wp-block-woocommerce-cart .wc-block-grid__products {
  margin-inline: 0;
  padding-inline: 0;
  list-style: none;
}

.wp-block-woocommerce-cart .wc-block-grid__product {
  margin-inline: 0;
}

/* =============================================================
   Nur die Kasse
   ============================================================= */

/* -------------------------------------------------------------
   Die Summenspalte, wie im Warenkorb ein eigener Kasten
   ------------------------------------------------------------- */
.wc-block-checkout .wc-block-checkout__sidebar {
  background: var(--inv-shop-card-bg, var(--inv-cartsum-skin-bg, color-mix(in srgb, var(--inv-fg, #0f172a) 3%, transparent)));
  border: 1px solid var(--inv-shop-card-line, var(--inv-cartsum-skin-line, var(--inv-shop-line, rgba(15, 23, 42, .1))));
  border-radius: var(--inv-shop-card-radius, var(--inv-shop-radius, 16px));
  padding: var(--inv-shop-card-pad, clamp(16px, 2vw, 24px));
}

/* -------------------------------------------------------------
   Felder

   WooCommerce liefert sie mit 4 px Radius und einer eigenen grauen Rahmenfarbe
   — gemessen rgba(43, 45, 47, .8) —, also in einer Formensprache, die auf
   derselben Seite neben den Feldern des Kontaktformulars stand. Hier dieselben
   Werte wie in components/forms.css.
   ------------------------------------------------------------- */
/*
 * .wc-block-components-form steht mit im Selektor, weil WooCommerce dieselben
 * Felder mit `.wc-block-components-form .wc-block-components-text-input
 * input[type="email"]` anspricht — drei Klassen. Ohne die dritte verliert diese
 * Regel und die Felder behielten ihre 4 px. Kein !important: die
 * Plugin-Regel wird nicht übertönt, sondern mit gleichem Mittel beantwortet.
 *
 * Der Weg, den WooCommerce dafür vorsieht, ist hier versperrt:
 * wc_block_theme_has_styles_for_element() steigt bei `! wp_is_block_theme()`
 * sofort aus, und Inverta ist ein klassisches Theme. Die Körperklasse
 * woocommerce-block-theme-has-button-styles, mit der das Plugin zurücktritt,
 * wird also nie gesetzt, egal was in der theme.json steht.
 */
/*
 * Zwei Namen hier waren falsch, und zwar von Anfang an.
 *
 * `.wc-block-components-select__container` vergibt WooCommerce nicht — die
 * Auswahlfelder der Kasse heissen `.wc-block-components-select`. Und
 * `.wc-block-components-combobox-control` gibt es in dieser Fassung gar nicht
 * mehr. Beides fiel nie auf: ohne Inhalt im Korb kommt man an die Kasse nicht
 * heran, und mit Inhalt sieht man ein Feld, das eben aussieht wie das Plugin
 * es malt. Gefunden am 05.10.2026 von tools/tests/block_classes.php.
 */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
.wc-block-checkout .wc-block-components-form .wc-block-components-select {
  border-color: var(--inv-border, #e2e8f0);
  border-radius: var(--inv-cofield-radius, var(--inv-cofield-radius-set, var(--inv-radius-lg, 14px)));
  color: var(--inv-fg, #0f172a);
  font-family: inherit;
}

.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea:focus {
  border-color: var(--inv-primary, #111827);
  outline: none;
}

.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-checkbox__label {
  color: var(--inv-muted-fg, #64748b);
}

/* Die Fläche der Felder aus der Palette.

   WooCommerce malt Eingabe- und Auswahlfelder weiß (#fff), die Schrift darin
   kam schon aus der Palette. Mit „Dunkel“ stand so helle Schrift auf weißem
   Grund — „Land/Region“ 1,23:1, gemessen am 15.10.2026. Unter „Standard“ ist
   die Fläche weiß, es ändert sich nichts. */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-blocks-components-select .wc-blocks-components-select__container {
  background-color: var(--inv-surface, #fff);
  color: var(--inv-fg, #0f172a);
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__label,
.wp-block-woocommerce-cart .wc-blocks-components-select .wc-blocks-components-select__label {
  color: var(--inv-muted-fg, #64748b);
}

.wc-block-checkout .wc-block-components-validation-error {
  color: #b32d2e;
}

/* -------------------------------------------------------------
   Überschriften und Klapppanels
   ------------------------------------------------------------- */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout .wc-block-components-checkout-step__title {
  font-family: var(--inv-font-display, inherit);
  color: var(--inv-fg, #0f172a);
}

.wc-block-checkout .wc-block-components-checkout-step__description {
  color: var(--inv-muted-fg, #64748b);
}

.wc-block-checkout .wc-block-components-panel__button {
  color: var(--inv-fg, #0f172a);
  font-family: var(--inv-font-display, inherit);
}

/* -------------------------------------------------------------
   Gemerkte Adresse
   ------------------------------------------------------------- */
.wc-block-checkout .wc-block-components-address-card {
  border-color: var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-lg, 14px);
}

.wc-block-checkout .wc-block-components-address-card__edit {
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

/* -------------------------------------------------------------
   Die Bestellübersicht
   ------------------------------------------------------------- */
.wc-block-checkout .wc-block-components-order-summary-item__image img {
  border-radius: var(--inv-shop-radius-sm, 10px);
  object-fit: contain;
}

.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--inv-font-display, inherit);
}

/* -------------------------------------------------------------
   Kaufen

   WooCommerce färbt den Knopf rgb(50, 55, 60) — der letzte Klick des ganzen
   Weges, in einem Grau, das auf dieser Seite nirgends sonst vorkommt.
   ------------------------------------------------------------- */
/* Dieselbe Rechnung wie bei den Feldern: WooCommerce setzt min-height: 3em über
   `body:not(…) .wc-block-components-button:not(…)`, also ein Element und drei
   Klassen. Ohne `body` und die zweite Klasse hier blieb der Knopf bei 42 px und
   die Einstellung "Button-Höhe" tat auf der Kasse nichts. */
body .wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
  background: var(--inv-cart-btn-checkout-color, var(--inv-shop-accent, var(--inv-accent, #24a9b3)));
  color: var(--inv-cart-btn-checkout-text-color, var(--inv-accent-fg, var(--inv-fg, #0f172a)));
  border-radius: var(--inv-cart-btn-radius, var(--inv-shop-radius-sm, 10px));
  min-height: var(--inv-cart-page-btn-h, var(--inv-cart-btn-height, 48px));
  font-family: var(--inv-font-display, inherit);
  font-size: var(--inv-cart-btn-font-size, 1rem);
  font-weight: 600;
  line-height: 1.4;
  transition: filter var(--inv-shop-dur, .18s) var(--inv-shop-ease, ease);
}

body .wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* Zurück zum Warenkorb — ein Textlink, kein zweiter Kaufknopf. */
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
  color: var(--inv-muted-fg, #64748b);
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  color: color-mix(in srgb, var(--inv-accent, #24a9b3) 70%, currentColor);
}

/* -------------------------------------------------------------
   Ein verstecktes Feld von WooCommerce, das die Kasse auf Arabisch breit machte

   WooCommerce blendet die zweite Adresszeile aus, solange sie nicht gebraucht
   wird, und tut das mit `left: -20000px` (checkout.css). In einem Dokument mit
   dir="rtl" gehört ein Kasten links außerhalb zum rollbaren Bereich: gemessen
   war die Kassenseite damit 20912 px breit bei 1440 px Fenster und ließ sich
   seitwärts schieben. Derselbe Fehler, den der Sprunglink dieses Themes hatte,
   nur im Plugin.

   Das Feld ist bereits tabindex="-1" und aria-hidden="true" — es muss also
   nicht unerreichbar gemacht werden, nur unsichtbar. Zugeschnitten statt
   verschoben, an seinem statischen Platz, damit das Ausfüllen durch den Browser
   weiter geht (es trägt autocomplete="address-line2").
   ------------------------------------------------------------- */
.wc-block-checkout .wc-block-components-address-form__address_2-hidden-input,
.wp-block-woocommerce-cart .wc-block-components-address-form__address_2-hidden-input {
  inset-inline: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* =============================================================
   Die Einstellungen der beiden Seiten

   Vier Schalter unter "Warenkorb / Mini-Cart → Warenkorb- & Kassen-Seite".
   Jeder ist eine Klasse auf <body>, weil ein Block kein Template liest: eine
   Körperklasse und eine Regel sind der einzige Weg, diesen beiden Seiten etwas
   zu sagen — und der einzige, den die Live-Vorschau auch zurücknehmen kann.

   Die Selektoren nennen immer noch beide Blockwurzeln, damit sie WooCommerces
   eigenes Gewicht erreichen (siehe oben). Zwei Klassen genügen dort nicht.
   ============================================================= */

/* -------------------------------------------------------------
   Die Summen-Kapsel: Glas
   ------------------------------------------------------------- */
/* Dasselbe Material wie die Kapseln der Startseite — sections/contact.css und
   der Header benutzen dieselben Werte. Glas über einer weißen Seite ist
   allerdings nichts als ein blasses Rechteck, deshalb liegt ein Akzent-Schimmer
   dahinter; ohne ihn sieht "Glas" aus wie "Karte, nur schwächer". */
/* Die Haut schreibt ihre Werte in eigene Tokens, nicht in die Eigenschaften
   selbst. Vorher stand hier `background: linear-gradient(...)` auf einem
   Selektor mit drei Klassen, und die Regel oben, die "Hintergrund" und "Rahmen"
   aus dem Katalog liest, hat zwei — gemessen am 09.10.2026 auf der Kasse: wer
   Glas gewaehlt hatte, konnte die Farbe der Summen-Kapsel nicht mehr aendern,
   und das widerspricht dem, was ganz oben in dieser Datei steht ("diese beiden
   Seiten nehmen die Tokens des Katalogs"). Jetzt gilt: gesetzte Farbe gewinnt,
   sonst das Glas, sonst die Vorgabe. */
body.inv-cartsum-glass .wp-block-woocommerce-cart .wc-block-cart__sidebar,
body.inv-cartsum-glass .wc-block-checkout .wc-block-checkout__sidebar {
  --inv-cartsum-skin-bg: linear-gradient(150deg, color-mix(in srgb, var(--inv-surface, #fff) 74%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 44%, transparent) 100%);
  --inv-cartsum-skin-line: rgba(15, 23, 42, .08);
  position: relative;
  isolation: isolate;
  /* Der Glanz auf der oberen Kante gehoert zum Material, nicht zur Farbe:
     er bleibt weiss, auch wenn jemand den Rahmen einstellt. */
  border-top-color: color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--inv-shadow-capsule, 0 24px 60px -30px rgba(15, 23, 42, .28));
}

body.inv-cartsum-glass .wp-block-woocommerce-cart .wc-block-cart__sidebar::before,
body.inv-cartsum-glass .wc-block-checkout .wc-block-checkout__sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: .5;
  filter: blur(60px);
  background:
    radial-gradient(ellipse 60% 50% at 85% 12%, rgba(var(--inv-accent-rgb, 36, 169, 179), .30) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 12% 90%, rgba(var(--inv-accent-rgb, 36, 169, 179), .18) 0%, transparent 72%);
}

/* Die Trennlinien, die WooCommerce selbst zieht, in der Farbe des Themes.
   Ein Token statt zehn Regeln: der Block rechnet jede Linie aus
   --wc-separator-color aus, voreingestellt 20 % der eigenen Textfarbe. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wc-block-checkout .wc-block-checkout__sidebar {
  --wc-separator-color: var(--inv-shop-line, rgba(15, 23, 42, .1));
}

/* Auf der Kasse rahmt WooCommerce die Bestellübersicht noch einmal ein — ein
   Kasten mit 5 px Rundung in einem Kasten. Im Warenkorb tut es das nicht:
   dieselbe Angabe, an derselben Stelle, in zwei Formen. Hier trennen Linien. */
.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  border: 0;
  border-radius: 0;
}

/* -------------------------------------------------------------
   Die Summen-Kapsel: ohne Fläche
   ------------------------------------------------------------- */
body.inv-cartsum-plain .wp-block-woocommerce-cart .wc-block-cart__sidebar,
body.inv-cartsum-plain .wc-block-checkout .wc-block-checkout__sidebar {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-inline: 0;
}

/* -------------------------------------------------------------
   Die Summen-Kapsel bleibt stehen

   `align-self: start` gehört dazu: ohne es zieht der Flex- oder Rasterkasten die
   Spalte auf die volle Höhe der Zeile, und was so hoch ist wie sein Behälter,
   kann nicht kleben.
   ------------------------------------------------------------- */
@media (min-width: 783px) {
  body.inv-cartsum-sticky .wp-block-woocommerce-cart .wc-block-cart__sidebar,
  body.inv-cartsum-sticky .wc-block-checkout .wc-block-checkout__sidebar {
    position: sticky;
    top: calc(var(--inv-header-h, 60px) + var(--inv-header-bar-pt, 10px) + 24px);
    align-self: start;
  }
}

/* -------------------------------------------------------------
   Knöpfe: Glas

   Die Werte stammen aus components/buttons.css (.inv-btn--glass) — nachgemessen
   am "Termin buchen" im Menü: rgba(36,169,179,.45) auf .22, blur(16px)
   saturate(1.9), Schrift rgb(15,23,42). Einmal geschrieben wäre besser; hier
   steht es zum zweiten Mal, weil diese Knöpfe keine Klasse des Themes tragen
   und nur über ihr Gewicht zu erreichen sind.
   ------------------------------------------------------------- */
body.inv-cartbtn-glass .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link),
body.inv-cartbtn-glass .wc-block-checkout .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link) {
  background: linear-gradient(
    135deg,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .45) 0%,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .22) 100%);
  color: var(--inv-cart-btn-checkout-text-color, var(--inv-btn-glass-ink, var(--inv-fg, #0f172a)));
  border: 1px solid rgba(var(--inv-accent-rgb, 36, 169, 179), .55);
  border-top: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 4px 16px -2px rgba(var(--inv-accent-rgb, 36, 169, 179), .35),
    0 0 14px rgba(var(--inv-accent-rgb, 36, 169, 179), .22),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
}

body.inv-cartbtn-glass .wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link):hover,
body.inv-cartbtn-glass .wc-block-checkout .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link):hover {
  background: linear-gradient(
    135deg,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .58) 0%,
    rgba(var(--inv-accent-rgb, 36, 169, 179), .32) 100%);
  border-color: rgba(var(--inv-accent-rgb, 36, 169, 179), .7);
  filter: none;
}

/* -------------------------------------------------------------
   Knöpfe: die Beschriftung dreht sich

   Dieselbe Bewegung wie .txt-anim im Menü, aber ohne dessen Aufbau: der Block
   druckt eine <div class="wc-block-components-button__text"> und React gehört
   ihr Inhalt. Etwas dort hineinzubauen würde React beim nächsten Rendern
   wegräumen — oder React eine Verschachtelung unterschieben, die es nicht
   erwartet. Also bleibt das DOM, wie es ist, und die zweite Wortkopie ist ein
   ::after des Knopfes, gefüttert aus einem Attribut. Das Attribut setzt
   assets/js/modules/woo-roll.js; React nimmt fremde Attribute nicht weg.

   Beide Kopien laufen dieselbe Strecke in dieselbe Richtung, also wandern sie
   als ein Streifen. Die Strecke ist die Knopfhöhe: das ist genau der
   überdeckende Ausschnitt, damit kein halbes Wort am Rand stehen bleibt.
   ------------------------------------------------------------- */
body.inv-cartbtn-roll .wp-block-woocommerce-cart .wc-block-components-button[data-inv-roll],
body.inv-cartbtn-roll .wc-block-checkout .wc-block-components-button[data-inv-roll] {
  --inv-roll-d: var(--inv-cart-btn-height, 48px);
  overflow: hidden;
}

body.inv-cartbtn-roll .wp-block-woocommerce-cart .wc-block-components-button[data-inv-roll] .wc-block-components-button__text,
body.inv-cartbtn-roll .wc-block-checkout .wc-block-components-button[data-inv-roll] .wc-block-components-button__text {
  transition: transform var(--inv-motion, 400ms) var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
}

/* Die zweite Kopie. Sie bleibt weg, solange der Knopf lädt oder gesperrt ist:
   WooCommerce blendet dann die echte Beschriftung aus
   (`--loading .wc-block-components-button__text { visibility: hidden }`) und
   setzt den Spinner an ihre Stelle — eine Kopie, die dabei stehen bliebe, wäre
   eine Beschriftung, die niemand ausgeschaltet hat. */
body.inv-cartbtn-roll .wp-block-woocommerce-cart .wc-block-components-button[data-inv-roll]:not(.is-loading):not([class*="--loading"]):not([aria-disabled="true"]):not(:disabled)::after,
body.inv-cartbtn-roll .wc-block-checkout .wc-block-components-button[data-inv-roll]:not(.is-loading):not([class*="--loading"]):not([aria-disabled="true"]):not(:disabled)::after {
  content: attr(data-inv-roll);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: inherit;
  pointer-events: none;
  transform: translateY(var(--inv-roll-d, 48px));
  transition: transform var(--inv-motion, 400ms) var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
}

body.inv-cartbtn-roll .wp-block-woocommerce-cart .wc-block-components-button[data-inv-roll]:hover .wc-block-components-button__text,
body.inv-cartbtn-roll .wc-block-checkout .wc-block-components-button[data-inv-roll]:hover .wc-block-components-button__text {
  transform: translateY(calc(-1 * var(--inv-roll-d, 48px)));
}

body.inv-cartbtn-roll .wp-block-woocommerce-cart .wc-block-components-button[data-inv-roll]:not(.is-loading):not([class*="--loading"]):not([aria-disabled="true"]):not(:disabled):hover::after,
body.inv-cartbtn-roll .wc-block-checkout .wc-block-components-button[data-inv-roll]:not(.is-loading):not([class*="--loading"]):not([aria-disabled="true"]):not(:disabled):hover::after {
  transform: translateY(0);
}

/* Ohne Bewegung kein Rollen — und ohne Rollen kein zweites Wort im Ausschnitt. */
body.inv-no-motion.inv-cartbtn-roll .wc-block-components-button[data-inv-roll]::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  body.inv-cartbtn-roll .wc-block-components-button[data-inv-roll]::after {
    content: none;
  }

  body.inv-cartbtn-roll .wc-block-components-button[data-inv-roll] .wc-block-components-button__text,
  body.inv-cartbtn-roll .wc-block-components-button[data-inv-roll]:hover .wc-block-components-button__text {
    transform: none;
    transition: none;
  }
}


/* -------------------------------------------------------------
   Der leere Warenkorb

   Die Seite, die ein Besucher am häufigsten sieht, bevor er etwas kauft —
   und die einzige im ganzen Shop, für die das Theme bisher keine Zeile hatte.
   Gemessen am 01.10.2026 auf dieser Website, 1440 px breit:

     h2.wc-block-cart__empty-cart__title   24px/700, darüber ein ::before
                                           von 120 × 120 px, mask-image mit
                                           einem traurigen Einkaufswagen,
                                           background-color rgb(15,23,42)
     hr.wp-block-separator.is-style-dots   drei Punkte, kaum sichtbar
     h2                                    "New in store"
     ul.wc-block-grid__products            display:flex, Karten ohne Fläche,
                                           ohne Rahmen, ohne Rundung
     a.wp-block-button__link               rgb(17,24,39), radius 10px, 12px

   Also: ein 120-Pixel-Klecks in Vollschwarz, darunter vier Produkte, die
   aussehen, als gehörten sie zu einer anderen Website als der Katalog zwei
   Klicks weiter.

   Dagegen steht hier nichts Neues, sondern dasselbe, was der Katalog schon
   benutzt: --inv-shop-card-bg, --inv-shop-card-line, --inv-shop-card-radius,
   --inv-shop-title-color, --inv-shop-price-color. Wer seine Karten im
   Customizer einstellt, stellt damit auch diese ein.

   **Die Worte gehören nicht hierher.** "Dein Warenkorb ist leer" und "Neu im
   Shop" sind Blöcke im Editor der Seite Warenkorb; das Theme ändert sie
   nicht, es ordnet sie nur. Was es anbietet, sind zwei Schalter — das Symbol
   und die Produktreihe — denn beides ist eine Entscheidung und kein Text.

   Spezifität: die Stile der Blöcke werden im <body> gedruckt, also nach
   allem aus dem <head>. Bei Gleichstand gewinnt deshalb WooCommerce. Jede
   Regel hier beginnt mit .wp-block-woocommerce-empty-cart-block und liegt
   damit eine Klasse darüber.
   ------------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block {
  /* Breite und Seitenrand kommen von .vf-content-area, genau wie beim Katalog.
     Hier standen bis zum 02.10.2026 eigene 1040 px: gemessen bei 1440 px
     Fensterbreite lag der Katalog bei 1410 px und diese Seite bei 1040 — also
     200 px Leere an jeder Kante, die sonst nirgends auf der Website vorkommt.
     Gemeldet von der Person, die die Theme testet.

     Der Text bekommt seine eigene Spalte (weiter unten), damit eine Zeile über
     die ganze Breite nicht zu einer Zeile über die ganze Breite wird. */
  padding-block: clamp(1.5rem, 4vw, 3.25rem);
}

/* Die Meldung: eine lesbare Spalte in der Mitte, nicht die ganze Fensterbreite. */
.inv-cartempty-panel {
  max-width: var(--inv-cartempty-w, var(--inv-cartempty-w-set, 44rem));
  margin-inline: auto;
  text-align: center;
}

/* Linksbuendig ist kein Sonderfall, sondern eine Haltung: der Text faengt da
   an, wo das Auge ihn sucht. Nur die Knoepfe folgen mit. */
body.inv-cartemptyal-start .inv-cartempty-panel {
  text-align: start;
}

body.inv-cartemptyal-start .inv-cartempty-lead {
  margin-inline: 0;
}

body.inv-cartemptyal-start .inv-cartempty-cta {
  justify-content: flex-start;
}

/* „In einer Kapsel“ — dieselbe Fläche, Kante und Rundung, die jede Sektion
   der Startseite für ihre Kapsel benutzt. */
body.inv-cartempty-capsule .inv-cartempty-panel {
  padding:
    var(--inv-cartempty-pad, var(--inv-cartempty-pad-set, clamp(1.75rem, 4vw, 3rem)))
    var(--inv-cartempty-pad-x, var(--inv-cartempty-pad-x-set, clamp(1.25rem, 3vw, 2.5rem)));
  border: 1px solid var(--inv-cartempty-line-set, var(--inv-shop-card-line, var(--inv-shop-line, #e2e8f0)));
  border-radius: var(--inv-cartempty-radius, var(--inv-cartempty-radius-set, var(--inv-shop-card-radius, var(--inv-shop-radius, 16px))));
  background: var(--inv-cartempty-bg-set, var(--inv-shop-card-bg, var(--inv-shop-surface, #fff)));
  box-shadow: var(--inv-cartempty-shadow-set, var(--inv-shop-card-shadow, var(--inv-shadow-card, 0 4px 20px -4px rgba(15, 23, 42, .06))));
}

/* Der Satz unter der Überschrift. */
.inv-cartempty-lead {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--inv-shop-muted, #64748b);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
}

/* Die beiden Knöpfe. Auf dem Telefon untereinander und über die ganze
   Breite — zwei halbe Knöpfe nebeneinander sind zwei zu kleine Ziele. */
.inv-cartempty-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Der Selektor trägt .inv-cartempty-cta mit, obwohl die Klasse am Knopf
   reichen würde: der Knopf ist ein <a> im Inhalt der Seite, und
   `.entry-content a` setzt dort eine Linkfarbe. Eine Klasse allein verliert
   gegen Klasse plus Element — gemessen am 02.10.2026, der Knopf stand
   schwarz auf schwarz. */
.inv-cartempty-cta .inv-cartempty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--inv-cartempty-btn-h, var(--inv-cart-page-btn-h, var(--inv-cart-btn-height, 46px)));
  padding: .75rem var(--inv-cartempty-btn-px, var(--inv-cart-btn-px, 1.6rem));
  border: 1px solid transparent;
  border-radius: var(--inv-cartempty-btn-radius, var(--inv-cart-btn-radius, var(--inv-shop-btn-radius, var(--inv-shop-radius-sm, 10px))));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-cartempty-btn-size, .92rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color calc(var(--inv-shop-dur, 400ms) * .5) var(--inv-shop-ease, ease),
    border-color calc(var(--inv-shop-dur, 400ms) * .5) var(--inv-shop-ease, ease),
    transform calc(var(--inv-shop-dur, 400ms) * .5) var(--inv-shop-ease, ease);
}

.inv-cartempty-cta .inv-cartempty-btn--primary {
  background: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
}

.inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: var(--inv-shop-accent, #24a9b3);
  color: var(--inv-accent-fg, var(--inv-fg, #0f172a));
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -.5));
}

.inv-cartempty-cta .inv-cartempty-btn--quiet {
  border-color: var(--inv-shop-line, #e2e8f0);
  background: transparent;
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
}

.inv-cartempty-cta .inv-cartempty-btn--quiet:hover {
  border-color: var(--inv-shop-accent, #24a9b3);
  color: var(--inv-shop-accent, #24a9b3);
}

.inv-no-motion .inv-cartempty-cta .inv-cartempty-btn:hover {
  transform: none;
}

@media (max-width: 480px) {
  .inv-cartempty-cta {
    flex-direction: column;
  }

  .inv-cartempty-cta .inv-cartempty-btn {
    width: 100%;
  }
}

/* Das Symbol. WooCommerce zentriert es über einen errechneten Seitenabstand
   (margin: 0 580px 48px) — der bricht, sobald die Spalte schmaler wird. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width: var(--inv-cartempty-icon-size, 88px);
  height: var(--inv-cartempty-icon-size, 88px);
  margin: 0 auto clamp(1rem, 2vw, 1.75rem);
  background-color: var(--inv-cartempty-icon, var(--inv-shop-muted, #64748b));
  opacity: .85;
}

body.inv-cartempty-noicon .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  margin-block: 0 .5rem;
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Der Trenner. Drei graue Punkte in der Mitte eines leeren Bildschirms sind
   kein Entwurf, sondern ein Rest — hier wird daraus eine Haarlinie, so breit
   wie der Text darüber.
   
   Nicht über border: der Block-Stil von WordPress schreibt
   `.wp-block-separator.is-style-dots { border: none !important }`, und dagegen
   hilft kein Gewicht. Die Linie ist deshalb das ::before, dessen Inhalt ("···")
   ohnehin weg muss — eine Deklaration weniger im Streit statt eines zweiten
   !important. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
  width: min(220px, 40%);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
  border: 0;
  border-top: 1px solid var(--inv-shop-line, #e2e8f0);
  opacity: 1;
  color: transparent;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  height: auto;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-inline: auto;
  padding: 0;
  background: var(--inv-shop-line, #e2e8f0);
  letter-spacing: 0;
}

/* "Neu im Shop" ist eine Zwischenüberschrift, keine zweite Hauptüberschrift. */
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  margin-block: 0 clamp(1rem, 2vw, 1.5rem);
  color: var(--inv-shop-muted, #64748b);
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -------- Die Produktreihe, in der Form des Katalogs -------- */

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid;
  /* Dieselbe Kette wie im Katalog: --inv-shop-col wird dort *in* der Regel
     für ul.products gesetzt und existiert außerhalb davon nicht. Hier stand
     var(--inv-shop-col, 240px), also immer 240 — gemessen am 02.10.2026:
     fünf Spalten zu 240 px, während der Katalog mit demselben Regler auf 280
     vier Spalten zu 337 zeigte. Der Regler „Spaltenbreite“ ging an dieser
     Seite vorbei. */
  --inv-shop-col: var(--inv-shop-col-set, 240px);
  grid-template-columns: repeat(auto-fill, minmax(var(--inv-shop-col), 1fr));
  gap: var(--inv-shop-gap, clamp(16px, 1.8vw, 26px));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid[class*="has-"] li.wc-block-grid__product {
  display: flex;
  flex-direction: column;
  /* WooCommerce teilt die Reihe selbst auf: .wc-block-grid.has-4-columns
     .wc-block-grid__product bekommt flex: 1 0 25% und max-width: 25%. In
     einem Raster ist die Breite Sache der Spalte, und die Deckelung macht aus
     einer 245 px breiten Zelle eine 61 px breite Karte — gemessen, bevor das
     hier stand. Der Selektor oben trägt deshalb [class*="has-"]: drei Klassen
     plus Attribut gegen ihre drei Klassen, und das für jede Spaltenzahl. */
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
  overflow: hidden;
  border: 1px solid var(--inv-shop-card-line, var(--inv-shop-line, #e2e8f0));
  border-radius: var(--inv-shop-card-radius, var(--inv-shop-radius, 16px));
  background: var(--inv-shop-card-bg, var(--inv-shop-surface, #fff));
  box-shadow: var(--inv-shop-card-shadow, var(--inv-shadow-card, 0 4px 20px -4px rgba(15, 23, 42, .06)));
  text-align: start;
  transition:
    box-shadow var(--inv-shop-dur, 400ms) var(--inv-shop-ease, ease),
    border-color var(--inv-shop-dur, 400ms) var(--inv-shop-ease, ease);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid[class*="has-"] li.wc-block-grid__product:hover {
  border-color: var(--inv-shop-accent, #24a9b3);
  box-shadow: var(--inv-shadow-elegant, 0 30px 80px -30px rgba(15, 23, 42, .1));
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  display: block;
  margin: 0;
  text-decoration: none;
}

/* Das Bild.
 *
 * Drei Unterschiede zum Katalog, alle gemessen am 02.10.2026 bei 1440 px:
 *
 *   1. --inv-shop-card-ratio gibt es nicht. Der Regler „Bildformat“ schreibt
 *      --inv-shop-ratio; der Name hier war erfunden, also griff der Rückfall
 *      und die Bilder standen quadratisch (315 × 315), während dieselben
 *      Bilder im Katalog 4:3 hatten (336 × 252).
 *   2. Das Bild stand 16 px unter der Kartenkante: WooCommerce gibt dem <img>
 *      `margin: 16px 0`, und der Abstand fällt durch den Rahmen des Elters
 *      hindurch nach oben durch. Im Katalog sitzt das Bild bündig an der
 *      Kante. Das ist das „verschobene Bild“ aus dem Screenshot.
 *   3. Der Innenabstand kam nicht an: WooCommerce schreibt ihn mit drei
 *      Klassen, die Regel hier hatte zwei. Deshalb trägt sie jetzt den
 *      Rasterselektor davor.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-grid[class*="has-"] li.wc-block-grid__product .wc-block-grid__product-image {
  display: block;
  margin: 0 0 var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
  aspect-ratio: var(--inv-shop-ratio, 4 / 3);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, transparent);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid[class*="has-"] li.wc-block-grid__product .wc-block-grid__product-image img {
  display: block;
  width: 100%;
  height: 100%;
  /* Die 16 px von WooCommerce. */
  margin: 0;
  padding: var(--inv-shop-card-fitpad, 0);
  border: 0;
  border-radius: 0;
  /* contain wie im Katalog: ein Kabel, das auf ein Quadrat beschnitten wurde,
     ist ein Kabel, das man nicht wiedererkennt. */
  object-fit: var(--inv-shop-card-fit, contain);
}

/* Alles unter dem Bild bekommt denselben Innenabstand wie eine Katalogkarte. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.wp-block-woocommerce-empty-cart-block .wc-gzd-additional-info,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  margin-inline: 0;
  padding-inline: var(--inv-shop-card-pad, clamp(13px, 1.3vw, 18px));
}

/* Titel und Preis lesen dieselben vier Regler wie die Karte im Katalog —
   „Schrift auf der Karte“. Vorher standen hier feste Werte, und derselbe
   Laden hatte zwei Schriftgrößen für denselben Produktnamen. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  margin-block: 0 .35rem;
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-shop-title-size, .95rem);
  font-weight: var(--inv-shop-title-weight, 600);
  line-height: 1.35;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  margin-block: 0 .5rem;
  color: var(--inv-shop-price-color, var(--inv-fg, #0f172a));
  font-size: var(--inv-shop-price-size, 1rem);
  font-weight: var(--inv-shop-price-weight, 700);
}

/* Die Pflichthinweise von Germanized: klein und ruhig, aber lesbar — sie
   stehen dort, weil die Preisangabenverordnung sie verlangt. */
.wp-block-woocommerce-empty-cart-block .wc-gzd-additional-info {
  margin-block: 0 .35rem;
  color: var(--inv-shop-muted, #64748b);
  font-size: .72rem;
  line-height: 1.45;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  margin-block: auto 0;
  padding-block-start: .5rem;
}

/* Der Knopf liest dieselben sieben Regler wie der im Katalog —
   „Knopf auf der Karte“. Fläche, Textfarbe, Größe, Stärke, Höhe, Rundung;
   die Oberfläche und die Ausrichtung stehen in woo-loop.css, wo beide Seiten
   in einer Regel zusammenstehen. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--inv-shop-btn-h, var(--inv-cart-btn-height, 44px));
  /* Derselbe Innenabstand wie .woocommerce a.button im Katalog — sonst ist
     derselbe Knopf hier 44 und dort 47 Pixel hoch. */
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--inv-shop-btn-radius, var(--inv-cart-btn-radius, var(--inv-shop-radius-sm, 10px)));
  background: var(--inv-shop-btn-bg, var(--inv-primary, #111827));
  color: var(--inv-shop-btn-ink, var(--inv-primary-fg, #fff));
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: var(--inv-shop-btn-size, .86rem);
  font-weight: var(--inv-shop-btn-weight, 600);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color calc(var(--inv-shop-dur, 400ms) * .5) var(--inv-shop-ease, ease);
}

/* „So breit wie die Beschriftung“ gilt auch hier. */
body.inv-shopbtn-auto .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  width: auto;
}

/* -------- Der Schalter für die Produktreihe --------
   Der Trenner und die Zwischenüberschrift gehören dazu: sie kündigen genau
   das an, was dann nicht mehr da ist. Beide werden über :has() an der Reihe
   selbst festgemacht, damit ein eigener Absatz des Betreibers stehen bleibt. */
body.inv-cartempty-noproducts .wp-block-woocommerce-empty-cart-block .wc-block-grid,
body.inv-cartempty-noproducts .wp-block-woocommerce-empty-cart-block .wp-block-heading:has(+ .wc-block-grid),
body.inv-cartempty-noproducts .wp-block-woocommerce-empty-cart-block .wp-block-separator:has(+ .wp-block-heading + .wc-block-grid) {
  display: none;
}

@media (max-width: 782px) {
  .wp-block-woocommerce-empty-cart-block {
    padding-block: 1.25rem 2rem;
  }

  .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    width: min(var(--inv-cartempty-icon-size, 88px), 64px);
    height: min(var(--inv-cartempty-icon-size, 88px), 64px);
  }
}


/*
 * Warum die Seiten einen eigenen Wert für die Höhe haben.
 *
 * --inv-cart-btn-height gehört der Schublade ("Schublade / Mini-Cart →
 * Buttons: Höhe"). Ein zweiter Regler auf denselben Namen wäre einer von
 * zweien, der nichts tut — welcher, entscheidet die Reihenfolge, in der das
 * CSS geschrieben wird, und das ist keine Entscheidung, das ist Zufall.
 * Gemessen am 04.10.2026: der neue Regler stand auf 46, die Knöpfe blieben
 * bei 44, weil der ältere später geschrieben wird.
 *
 * Jetzt lesen die Knöpfe der Warenkorb- und Kassen-Seite zuerst
 * --inv-cart-page-btn-h und fallen auf den Wert der Schublade zurück,
 * solange niemand sie eigens eingestellt hat.
 */

/* =============================================================
   Leerer Warenkorb: fertige Entwuerfe

   Eine Vorlage bringt Maße und Flächen mit, keine Verzierung. Was hier
   bewusst nicht vorkommt: Abzeichen, blinkende Punkte, Zähler, Hinweise
   auf Dinge, die es nicht gibt. Ein leerer Warenkorb ist eine Sackgasse —
   die Aufgabe ist, einen Weg heraus zu zeigen, nicht die Stelle zu schmücken.

   Wie überall schreibt eine Vorlage `--x-set`, nie `--x`: ein Regler sticht
   sie dadurch immer.
   ============================================================= */

/* Ruhig — keine Kante, keine Fläche, viel Luft. */
body.inv-cartemptyset-ruhig {
  --inv-cartempty-bg-set: transparent;
  --inv-cartempty-line-set: transparent;
  --inv-cartempty-shadow-set: none;
  --inv-cartempty-pad-set: 0px;
  --inv-cartempty-pad-x-set: 0px;
  --inv-cartempty-w-set: 34rem;
}

/* Karte — ein deutliches Stück Papier mit Schatten. */
body.inv-cartemptyset-karte {
  --inv-cartempty-pad-set: 3.5rem;
  --inv-cartempty-pad-x-set: 3rem;
  --inv-cartempty-radius-set: 28px;
  --inv-cartempty-shadow-set: 0 40px 90px -50px rgba(15, 23, 42, .45);
  --inv-cartempty-w-set: 40rem;
}

/* Akzent — die Fläche in der Markenfarbe, sehr blass. */
body.inv-cartemptyset-akzent {
  --inv-cartempty-bg-set: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 9%, var(--inv-shop-surface, #fff));
  --inv-cartempty-line-set: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 24%, transparent);
  --inv-cartempty-shadow-set: none;
  --inv-cartempty-pad-set: 3rem;
  --inv-cartempty-radius-set: 22px;
}

/* Strich — nur eine Linie oben, sonst nichts. */
body.inv-cartemptyset-strich {
  --inv-cartempty-bg-set: transparent;
  --inv-cartempty-line-set: transparent;
  --inv-cartempty-shadow-set: none;
  --inv-cartempty-radius-set: 0px;
  --inv-cartempty-pad-set: 2.5rem;
  --inv-cartempty-pad-x-set: 0px;
}

body.inv-cartemptyset-strich .inv-cartempty-panel {
  border-block-start: 2px solid var(--inv-shop-accent, #24a9b3);
}

/* Schmal — eine enge Spalte, der Knopf über die ganze Breite. */
body.inv-cartemptyset-schmal {
  --inv-cartempty-w-set: 26rem;
  --inv-cartempty-pad-set: 2.25rem;
  --inv-cartempty-pad-x-set: 1.75rem;
}

body.inv-cartemptyset-schmal .inv-cartempty-cta {
  flex-direction: column;
}

body.inv-cartemptyset-schmal .inv-cartempty-cta .inv-cartempty-btn {
  width: 100%;
}

/* =============================================================
   Die Knöpfe: Form und Füllung

   Gilt für die Knöpfe unter der leeren Meldung und für die der
   Warenkorb- und Kassen-Seite — es sind dieselben Knöpfe für denselben
   Besucher, und zwei verschiedene Formen auf zwei Seiten wären ein
   Versehen, das nach Absicht aussieht.
   ============================================================= */
body.inv-cartbtnform-kapsel { --inv-cart-btn-radius: 999px; --inv-cart-btn-px: 2rem; }
body.inv-cartbtnform-weich  { --inv-cart-btn-radius: 14px; }
body.inv-cartbtnform-eckig  { --inv-cart-btn-radius: 0px; }

/* Umriss: der erste Knopf trägt nur eine Kante. */
body.inv-cartbtnfuell-umriss .inv-cartempty-cta .inv-cartempty-btn--primary {
  background: transparent;
  border-color: var(--inv-primary, #111827);
  color: var(--inv-primary, #111827);
}

body.inv-cartbtnfuell-umriss .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: var(--inv-primary, #111827);
  color: var(--inv-primary-fg, #fff);
}

/* Getönt: eine Fläche aus der Akzentfarbe, ohne das volle Schwarz. */
body.inv-cartbtnfuell-getoent .inv-cartempty-cta .inv-cartempty-btn--primary {
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 16%, transparent);
  color: var(--inv-shop-title-color, var(--inv-fg, #0f172a));
}

body.inv-cartbtnfuell-getoent .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: var(--inv-shop-accent, #24a9b3);
  color: var(--inv-accent-fg, var(--inv-fg, #0f172a));
}

/* Dieselbe Form auf der Warenkorb- und der Kassen-Seite. */
body[class*="inv-cartbtnform-"] .wp-block-woocommerce-cart .wc-block-components-button,
body[class*="inv-cartbtnform-"] .wc-block-checkout .wc-block-components-button {
  border-radius: var(--inv-cart-btn-radius, var(--inv-shop-btn-radius, var(--inv-shop-radius-sm, 10px)));
  min-height: var(--inv-cart-page-btn-h, var(--inv-cart-btn-height, 46px));
}


/* =============================================================
   Warenkorb- und Kassen-Seite: fertige Entwuerfe

   Eine Vorlage bringt Maße und Flächen mit, mehr nicht — und wie überall
   schreibt sie `--x-set`, nie `--x`, damit jeder Regler sie sticht.

   Zu den Zeilen: `.wc-block-cart-items` ist eine echte <table>, die Zeilen
   sind <tr>. Eine Rundung an einer Zeile mit `border-collapse: collapse`
   zeichnet kein Browser. Die Form "Karten" stellt die Tabelle deshalb auf
   `separate` um und setzt die Rundung an die äußeren Zellen — der einzige
   Weg, der in allen Browsern dasselbe ergibt.
   ============================================================= */

/* Ruhig — Haarlinien, viel Luft, kein Rahmen um die Summe. */
body.inv-cartpageset-ruhig {
  --inv-cartrow-pad-set: 24px;
  --inv-cartrow-line-set: color-mix(in srgb, var(--inv-fg, #0f172a) 7%, transparent);
  --inv-cartimg-radius-set: 8px;
  --inv-cofield-radius-set: 10px;
}

/* Kompakt — mehr Positionen auf einen Blick. */
body.inv-cartpageset-kompakt {
  --inv-cartrow-pad-set: 10px;
  --inv-cartimg-w-set: 56px;
  --inv-cartimg-radius-set: 8px;
  --inv-cofield-radius-set: 8px;
}

/* Karten — jede Position ein eigenes Feld. */
body.inv-cartpageset-karten {
  --inv-cartrow-pad-set: 18px;
  --inv-cartrow-line-set: transparent;
  --inv-cartimg-radius-set: 12px;
}

body.inv-cartpageset-karten .wp-block-woocommerce-cart .wc-block-cart-items {
  border-collapse: separate;
  border-spacing: 0 12px;
}

body.inv-cartpageset-karten .wp-block-woocommerce-cart .wc-block-cart-items__row > td {
  background: var(--inv-shop-card-bg, var(--inv-shop-surface, #fff));
  border-block: 1px solid var(--inv-shop-line, rgba(15, 23, 42, .1));
}

body.inv-cartpageset-karten .wp-block-woocommerce-cart .wc-block-cart-items__row > td:first-child {
  border-inline-start: 1px solid var(--inv-shop-line, rgba(15, 23, 42, .1));
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
  padding-inline-start: 14px;
}

body.inv-cartpageset-karten .wp-block-woocommerce-cart .wc-block-cart-items__row > td:last-child {
  border-inline-end: 1px solid var(--inv-shop-line, rgba(15, 23, 42, .1));
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  padding-inline-end: 14px;
}

/* Die Kopfzeile der Tabelle hat in dieser Form keine Aufgabe mehr: sie
   beschriftet Spalten, die jetzt als Karten gelesen werden. */
body.inv-cartpageset-karten .wp-block-woocommerce-cart .wc-block-cart-items__header {
  display: none;
}

/* Kontrast — die Summe setzt sich ab, der Rest bleibt ruhig. */
body.inv-cartpageset-kontrast {
  --inv-cartrow-pad-set: 18px;
}

body.inv-cartpageset-kontrast .wp-block-woocommerce-cart .wc-block-cart__sidebar,
body.inv-cartpageset-kontrast .wc-block-checkout .wc-block-checkout__sidebar {
  background: var(--inv-primary, #0f172a);
  border-color: transparent;
  color: #f8fafc;
  --wc-separator-color: color-mix(in srgb, #f8fafc 16%, transparent);
}

body.inv-cartpageset-kontrast .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label,
body.inv-cartpageset-kontrast .wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__label,
body.inv-cartpageset-kontrast .wp-block-woocommerce-cart .wc-block-cart__totals-title {
  color: color-mix(in srgb, #f8fafc 72%, transparent);
}

body.inv-cartpageset-kontrast .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-item__value,
body.inv-cartpageset-kontrast .wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__value,
body.inv-cartpageset-kontrast .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-product-name {
  color: #f8fafc;
}

/* =============================================================
   Die Felder der Kasse: drei Gestalten

   Dasselbe Vokabular wie auf der Anmeldeseite — Kasten, Fläche, Linie —,
   damit beide Formulare derselben Website nicht nach zwei Websites aussehen.
   ============================================================= */
body.inv-cofield-soft .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
body.inv-cofield-soft .wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
body.inv-cofield-soft .wc-block-checkout .wc-block-components-form .wc-block-components-select {
  border-color: transparent;
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 5%, transparent);
}

body.inv-cofield-line .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
body.inv-cofield-line .wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
body.inv-cofield-line .wc-block-checkout .wc-block-components-form .wc-block-components-select {
  border-width: 0 0 1px;
  border-radius: 0;
  background: none;
  padding-inline: 0;
}


/* =============================================================
   Der leere Warenkorb: Fläche der Knöpfe und wie die Meldung kommt

   Fünf Flächen. Der zweite Knopf bleibt in jeder davon die leisere
   Haarlinie — zwei gleich laute Knöpfe nebeneinander sind keine
   Empfehlung, sondern eine Frage.

   Beim Überfahren wird die Fläche dunkler, nicht heller: derselbe
   Grundsatz wie bei den Knöpfen im Konto, wo ein hellerer Hover den
   Knopf beim Anfassen blasser aussehen liess.
   ============================================================= */

body.inv-cartemptybtn-accent .inv-cartempty-cta .inv-cartempty-btn--primary {
  background: var(--inv-shop-accent, #24a9b3);
  color: #fff;
}

body.inv-cartemptybtn-accent .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 86%, #000);
  color: #fff;
}

body.inv-cartemptybtn-glass .inv-cartempty-cta .inv-cartempty-btn--primary {
  border-color: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 44%, transparent);
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 24%, transparent);
  color: var(--inv-fg, #0f172a);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    0 6px 20px -10px color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 55%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, #fff 55%, transparent);
}

body.inv-cartemptybtn-glass .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 40%, transparent);
  color: var(--inv-fg, #0f172a);
}

body.inv-cartemptybtn-soft .inv-cartempty-cta .inv-cartempty-btn--primary {
  border-color: transparent;
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 16%, transparent);
  color: var(--inv-fg, #0f172a);
}

body.inv-cartemptybtn-soft .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: color-mix(in srgb, var(--inv-shop-accent, #24a9b3) 28%, transparent);
  color: var(--inv-fg, #0f172a);
}

body.inv-cartemptybtn-ghost .inv-cartempty-cta .inv-cartempty-btn--primary {
  border-color: var(--inv-fg, #0f172a);
  background: transparent;
  color: var(--inv-fg, #0f172a);
}

body.inv-cartemptybtn-ghost .inv-cartempty-cta .inv-cartempty-btn--primary:hover {
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 8%, transparent);
  color: var(--inv-fg, #0f172a);
}

/* -------------------------------------------------------------
   Wie die Meldung erscheint

   Eine Animation, kein Übergang: die Kapsel steht beim Laden schon da,
   es gibt also keinen vorherigen Zustand, von dem aus etwas übergehen
   könnte. `backwards` hält den Anfangswert, bis die Verzögerung um ist
   — ohne das blitzt die Kapsel im ersten Bild fertig auf.
   ------------------------------------------------------------- */

@keyframes inv-cartempty-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes inv-cartempty-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes inv-cartempty-pop {
  from { opacity: 0; transform: scale(.94); }
  60%  { opacity: 1; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

body.inv-cartemptyanim-fade .inv-cartempty-panel {
  animation: inv-cartempty-fade var(--inv-cartempty-anim-dur, 520ms) var(--inv-shop-ease, ease) backwards;
}

body.inv-cartemptyanim-rise .inv-cartempty-panel {
  animation: inv-cartempty-rise var(--inv-cartempty-anim-dur, 520ms) cubic-bezier(.22, 1, .36, 1) backwards;
}

body.inv-cartemptyanim-pop .inv-cartempty-panel {
  animation: inv-cartempty-pop var(--inv-cartempty-anim-dur, 520ms) cubic-bezier(.22, 1, .36, 1) backwards;
}

/* Beide Wege, die Bewegung abzustellen, enden hier. */
body.inv-no-motion .inv-cartempty-panel {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .inv-cartempty-panel {
    animation: none;
  }
}

/* -------------------------------------------------------------
   Die Knöpfe auf Tablett und Telefon
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .inv-cartempty-cta .inv-cartempty-btn {
    min-height: var(--inv-cartempty-btn-h-tab, 44px);
    padding-inline: var(--inv-cartempty-btn-px-tab, 22px);
    font-size: var(--inv-cartempty-btn-size-tab, 14px);
  }
}

@media (max-width: 640px) {
  .inv-cartempty-cta .inv-cartempty-btn {
    min-height: var(--inv-cartempty-btn-h-mob, var(--inv-cartempty-btn-h-tab, 42px));
    padding-inline: var(--inv-cartempty-btn-px-mob, var(--inv-cartempty-btn-px-tab, 18px));
    font-size: var(--inv-cartempty-btn-size-mob, var(--inv-cartempty-btn-size-tab, 13.5px));
  }
}

/* -------------------------------------------------------------
   Warenkorb und Kasse: während neu gerechnet wird

   cart-skeleton.js setzt inv-cart-pending am Block, solange der
   Datenspeicher von WooCommerce rechnet, und data-inv-pending an der Zeile,
   deren Menge geändert wurde. Dieselbe Fläche wie .inv-skel
   (utilities/skeleton.css) — hier an Selektoren, weil die Elemente React
   gehören und keine eigene Klasse behalten.
   ------------------------------------------------------------- */
.inv-cart-pending .wc-block-components-totals-item__value,
.inv-cart-pending .wc-block-components-totals-footer-item-tax-value,
.inv-cart-pending .wc-block-components-totals-item__description .wc-block-components-formatted-money-amount,
.inv-cart-pending .wc-block-components-order-summary-item__total-price,
[data-inv-pending] .wc-block-cart-item__total .wc-block-components-product-price,
[data-inv-pending] .wc-block-cart-item__total .wc-block-components-sale-badge {
  display: inline-block;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite;
}

.inv-cart-pending .wc-block-components-totals-item__value *,
.inv-cart-pending .wc-block-components-totals-footer-item-tax-value *,
.inv-cart-pending .wc-block-components-order-summary-item__total-price *,
[data-inv-pending] .wc-block-cart-item__total .wc-block-components-product-price * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Der Betrag einer Zeile in der Bestellübersicht steht in einer Flex-Zeile,
   die ihre Kinder auf die Höhe der Zeile zieht — Bild, Name, Preis,
   Variante untereinander. Als Fläche gezeichnet wurde er dadurch so hoch wie
   die ganze Zeile: graue Säulen statt eines Platzhalters für eine Zahl
   (beim Freund, 15.10.2026). Er bleibt oben und so hoch wie sein Text. */
.inv-cart-pending .wc-block-components-order-summary-item__total-price {
  align-self: flex-start;
  height: auto;
  line-height: 1.4;
}

/* Mit einer Summe, die noch nicht stimmt, nicht zur Kasse. */
.inv-cart-pending .wc-block-cart__submit-button,
.inv-cart-pending .wc-block-components-checkout-place-order-button {
  pointer-events: none;
  opacity: .6;
  transition: opacity .2s ease;
}

/* Und dann kommt der neue Wert. */
.inv-cart-fresh .wc-block-components-totals-item__value,
.inv-cart-fresh .wc-block-components-totals-footer-item-tax-value,
[data-inv-fresh] .wc-block-cart-item__total .wc-block-components-product-price {
  display: inline-block;
  animation: inv-fresh-in .45s var(--inv-ease, cubic-bezier(.22, 1, .36, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .inv-cart-pending .wc-block-components-totals-item__value,
  .inv-cart-pending .wc-block-components-totals-footer-item-tax-value,
  .inv-cart-pending .wc-block-components-order-summary-item__total-price,
  [data-inv-pending] .wc-block-cart-item__total .wc-block-components-product-price {
    animation: none;
    background-image: none !important;
    background-color: var(--inv-skel-b) !important;
  }
  .inv-cart-fresh .wc-block-components-totals-item__value,
  .inv-cart-fresh .wc-block-components-totals-footer-item-tax-value,
  [data-inv-fresh] .wc-block-cart-item__total .wc-block-components-product-price { animation: none; }
}

/* WooCommerce ab 11 zeichnet beim Rechnen eigene Platzhalter
   (wc-block-components-skeleton__element) — in seiner Farbe. Dieselbe
   Fläche wie unsere, damit Summe und Zeile gleich schimmern; ältere
   Versionen (beim Freund 10.9) haben keine, dort greift inv-cart-pending. */
.wc-block-components-skeleton__element {
  background-image: linear-gradient(90deg, var(--inv-skel-a) 0%, var(--inv-skel-b) 50%, var(--inv-skel-a) 100%) !important;
  background-color: transparent !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: inv-skel-shimmer 1.2s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-components-skeleton__element { animation: none !important; background-image: none !important; background-color: var(--inv-skel-b) !important; }
}

/* =============================================================
   Breite: Warenkorb und Kasse immer in der Breite der Seite

   Der Block bekommt seine Breite aus seiner Ausrichtung. Mit „weit“
   (alignwide) sind es 1280 px — so legt WooCommerce ihn an. Ohne steht er im
   Rahmen der Textspalte (theme.json: 68 Zeichen, gemessen 680 px), und dort
   schaltet WooCommerce auf eine Spalte: die Felder über eine schmale Bahn in
   der Mitte, links und rechts leere Fläche, die Zusammenfassung weit unten.
   So beim Freund (Screenshot 15.10.2026) — seine Kassen-Seite stammt aus der
   Zeit vor diesem Theme. Eine Einstellung in einem Seiteninhalt darf nicht
   entscheiden, ob man bequem bezahlen kann: die beiden Blöcke stehen jetzt
   immer in der weiten Breite, egal wie sie ausgerichtet wurden.

   `body` vorn, weil die Regel der Textspalte (.is-layout-constrained > …)
   eine Klasse stark ist und sonst je nach Reihenfolge gewönne.
   ============================================================= */
body .wp-block-woocommerce-checkout,
body .wp-block-woocommerce-cart {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--inv-container-max, 1280px);
  margin-inline: auto;
}

/* Auf dem Telefon stand die Kasse randlos: die Seite gibt hier keinen
   Rand, und Karten bis an die Glaskante lesen sich wie abgeschnitten. */
@media (max-width: 782px) {
  body .wp-block-woocommerce-checkout,
  body .wp-block-woocommerce-cart {
    padding-inline: max(16px, env(safe-area-inset-left, 0px));
  }
}

/* Zwei Spalten mit Luft dazwischen; die rechte so breit, dass ein Betrag
   neben seiner Beschriftung stehen kann. */
@media (min-width: 783px) {
  .wc-block-checkout.wc-block-components-sidebar-layout,
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    gap: clamp(20px, 2.5vw, 36px);
    flex-wrap: nowrap;
  }

  .wp-block-woocommerce-checkout .wc-block-components-main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-inline-end: 0;
  }

  /* WooCommerce rückt die Spalte mit padding-left: 4.5 % von der Hauptspalte
     ab; den Abstand gibt hier `gap`. Aber die Spalte ist zugleich die Karte,
     also bleibt links derselbe Innenabstand wie rechts — in 1.3.1 stand hier
     0, und „Jetzt kaufen“ und die Summen klebten am linken Rand der Karte.
     „Ohne Fläche“ (inv-cartsum-plain) nimmt ihn mit stärkerem Selektor
     wieder weg. */
  .wp-block-woocommerce-checkout .wc-block-components-sidebar {
    flex: 0 0 clamp(340px, 34%, 420px);
    width: auto;
    padding-inline-start: var(--inv-shop-card-pad, clamp(16px, 2vw, 24px));
  }
}

/* -------------------------------------------------------------
   Germanized in der Kasse

   Das Plugin (beim Freund und in jeder deutschen Kasse) legt drei eigene
   Angaben über die Bestellübersicht, gemessen mit Germanized 4.1:

   - die Liste der Artikel auf #eeeeee mit 16 px Rand — ein grauer Block,
     der im Kasten wie ein Platzhalter aussieht, der nie verschwindet;
   - „Jetzt kaufen“, das es in die Summenspalte holt, 36 px Luft darüber und
     36 px darunter, plus 36 px Außenabstand von WooCommerce;
   - unter dem Knopf noch einmal 1em, auf dem Telefon 24 px darüber, und über der Gesamtsumme 1em, das sie
     von der Zwischensumme wegschiebt.

   Hier steht die Liste auf der Fläche der Karte wie im Warenkorb, und der
   Knopf folgt den Summen mit dem Abstand, den die Summen untereinander
   haben. Ein `body` vorn, weil Germanized mit vier Klassen kommt.
   ------------------------------------------------------------- */
body .wc-gzd-checkout .wc-block-components-order-summary,
body .wc-gzd-checkout .wc-block-components-order-summary.is-large {
  background: none;
  padding: 0 16px;
}

/* Auf schmalem Schirm kommt Germanized mit .wc-block-checkout.is-mobile —
   vier Klassen; die Layout-Klasse von WooCommerce macht hier fünf. */
body .wc-gzd-checkout .wc-block-checkout.wc-block-components-sidebar-layout .wc-gzd-checkout-submit {
  margin-top: 0;
  padding-block: 0;
}

body .wc-gzd-checkout .wc-gzd-checkout-submit .wc-block-checkout__actions,
body .wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-checkout__actions {
  margin: 0;
  padding: 8px 0 0;
}

body .wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
  margin-bottom: 10px;
}

/* -------------------------------------------------------------
   Die Schritte der Kasse als Karten

   Kontakt, Adresse, Versand, Zahlung standen als lose Überschriften
   untereinander, jede mit viel Abstand — eine lange Seite, auf der man nicht
   sieht, wo ein Teil endet. Jetzt ist jeder Schritt eine Karte in der Form
   der Zusammenfassung rechts, mit weniger Abstand dazwischen.
   ------------------------------------------------------------- */
.wp-block-woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step {
  margin: 0 0 14px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--inv-shop-card-bg, var(--inv-surface, #fff));
  border: 1px solid var(--inv-shop-card-line, var(--inv-shop-line, rgba(15, 23, 42, .1)));
  border-radius: var(--inv-shop-card-radius, var(--inv-shop-radius, 16px));
}

/* Die senkrechte Linie der nummerierten Schritte gehört zu losen
   Überschriften; in Karten würde sie aus jeder herauslaufen. */
.wp-block-woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step::after {
  display: none;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
  margin: 0 0 10px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.3;
}

/* „Bestellübersicht“ in derselben Zeile und derselben Schrift wie
   „Kontaktinformation“ daneben. WooCommerce gibt der Kopfzeile der
   Übersicht 16 px Abstand nach oben (die Karte hat schon ihren Innenrand),
   und der Text war grau in der Grundschrift — zwei Überschriften auf einer
   Höhe, die nicht auf einer Höhe standen (beim Freund, 15.10.2026). */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
  margin-block-start: 0;
}

body .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
  font-family: var(--inv-font-display, inherit);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--inv-fg, #0f172a);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
  margin: 0 0 14px;
  font-size: .92rem;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__content > * + * {
  margin-top: 12px;
}

/* -------------------------------------------------------------
   Felder von Plugins im Kleid des Themes

   WooCommerce malt seine eigenen Auswahlfelder (Land, Bundesland) als
   Kästen mit Beschriftung darin. Was andere Plugins in die Kasse stellen —
   DHL („Adresstyp“, „Abgabeort“, Packstation), Germanized, Versand-Plugins —
   ist ein nacktes <select> oder <input>, und das zeichnet der Browser:
   eckig, grauer Systempfeil, andere Höhe. Hier bekommen alle dieselbe Form
   wie die Felder von WooCommerce daneben.
   ------------------------------------------------------------- */
.wp-block-woocommerce-checkout select:not(.wc-blocks-components-select__select),
.wp-block-woocommerce-cart select:not(.wc-blocks-components-select__select),
.woocommerce-checkout form.checkout select:not(.select2-hidden-accessible),
.woocommerce-account .woocommerce form select:not(.select2-hidden-accessible),
.woocommerce-cart form select:not(.select2-hidden-accessible) {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0 44px 0 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--inv-fg, #0f172a);
  background-color: var(--inv-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  border: var(--inv-border-w, 1px) solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-cofield-radius, var(--inv-cofield-radius-set, var(--inv-radius-lg, 14px)));
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

[dir="rtl"] .wp-block-woocommerce-checkout select:not(.wc-blocks-components-select__select),
[dir="rtl"] .woocommerce form select:not(.select2-hidden-accessible) {
  padding: 0 14px 0 44px;
  background-position: left 14px center;
}

.wp-block-woocommerce-checkout input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="search"]):not(.wc-block-components-text-input input):not(.wc-block-components-quantity-selector__input):not([class*="components-form-token"]) {
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--inv-fg, #0f172a);
  background: var(--inv-surface, #fff);
  border: var(--inv-border-w, 1px) solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-cofield-radius, var(--inv-cofield-radius-set, var(--inv-radius-lg, 14px)));
  box-shadow: none;
}

.wp-block-woocommerce-checkout select:not(.wc-blocks-components-select__select):focus,
.wp-block-woocommerce-checkout input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="search"]):not(.wc-block-components-text-input input):focus,
.woocommerce form select:not(.select2-hidden-accessible):focus {
  border-color: var(--inv-primary, #111827);
  outline: 2px solid color-mix(in srgb, var(--inv-accent, #24a9b3) 35%, transparent);
  outline-offset: 1px;
}

.wp-block-woocommerce-checkout select:disabled,
.woocommerce form select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Auswahlfelder aus den Bausteinen von WordPress (SelectControl — so baut
   DHL „Adresstyp“ und „Abgabeort“): ein Kasten mit eigener Höhe (24 px,
   gemessen), eigenem Rahmen als zweites Element und eigenem Pfeil. Mit dem
   Rahmen und Pfeil von oben stand beides doppelt da. Hier gilt nur unseres. */
.wp-block-woocommerce-checkout .components-input-control__container:has(> select) {
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
}

.wp-block-woocommerce-checkout .components-input-control__container:has(> select) > .components-input-control__backdrop,
.wp-block-woocommerce-checkout .components-input-control__container:has(> select) > .components-input-control__suffix {
  display: none !important;
}

.wp-block-woocommerce-checkout select.components-select-control__input {
  height: auto !important;
  min-height: 50px !important;
  padding: 0 44px 0 14px !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.wp-block-woocommerce-checkout .components-base-control__label,
.wp-block-woocommerce-checkout .components-input-control__label {
  color: var(--inv-muted-fg, #64748b);
  font-size: .85rem;
  font-weight: 500;
  text-transform: none;
}

/* -------------------------------------------------------------
   select2 / selectWoo — dieselbe Form

   Manche Plugins (DHL in der Kasse) und WooCommerce selbst (Land und
   Bundesland unter „Mein Konto“ → Adressen) ersetzen ein Auswahlfeld durch
   select2: das echte <select> wird versteckt, sichtbar ist ein Kasten mit
   kleinem Dreieck, 26 px hoch (gemessen). Kasten, Pfeil und die Liste, die
   aufklappt, bekommen die Form der übrigen Felder.
   ------------------------------------------------------------- */
:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container {
  width: 100% !important;
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--default .select2-selection--single {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 50px;
  background: var(--inv-surface, #fff);
  border: var(--inv-border-w, 1px) solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-cofield-radius, var(--inv-cofield-radius-set, var(--inv-radius-lg, 14px)));
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 44px 0 14px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--inv-fg, #0f172a);
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--inv-muted-fg, #64748b);
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  transition: transform .2s ease;
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: translateY(-50%) rotate(180deg);
}

:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--focus .select2-selection--single,
:is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, .woocommerce-account .woocommerce, .woocommerce-checkout form.checkout) .select2-container--open .select2-selection--single {
  border-color: var(--inv-primary, #111827);
  outline: 2px solid color-mix(in srgb, var(--inv-accent, #24a9b3) 35%, transparent);
  outline-offset: 1px;
}

/* Die Liste hängt select2 ans Ende von <body> — also über die Seitenklasse. */
:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-dropdown {
  overflow: hidden;
  background: var(--inv-surface, #fff);
  border: var(--inv-border-w, 1px) solid var(--inv-border, #e2e8f0);
  border-radius: var(--inv-radius-lg, 14px);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .3);
}

:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-results__option {
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--inv-fg, #0f172a);
}

:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-container--default .select2-results__option--highlighted[aria-selected],
:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: color-mix(in srgb, var(--inv-accent, #24a9b3) 14%, var(--inv-surface, #fff));
  color: var(--inv-fg, #0f172a);
}

:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-container--default .select2-results__option[aria-selected="true"],
:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--inv-accent, #24a9b3);
  color: var(--inv-accent-fg, #fff);
}

:is(body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account) .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--inv-border, #e2e8f0);
  border-radius: 10px;
}


/* -------------------------------------------------------------
   The page shell
   ------------------------------------------------------------- */
.woocommerce-notices-wrapper {
  max-width: var(--inv-container, var(--inv-container-max, 1280px));
  margin-inline: auto;
}

/* The shop's own width.
 *
 * pages/templates.css gives .vf-content-area a 1280px cap and 1.5rem of side
 * padding — right for an article, wrong beside a front page whose capsules run
 * the full width of the screen. The catalogue sat visibly inset from
 * everything above it. Both are options now, and both default to what the rest
 * of the site does: full width, with the global edge padding. */
.woocommerce-page .vf-content-area,
.woocommerce .vf-content-area {
  max-width: min(var(--inv-shop-max-w, 100%), var(--inv-shell-max, 100%));
  padding-inline: var(--inv-shop-px, var(--inv-edge, 10px));
  padding-block: var(--inv-shop-pt, clamp(20px, 3vw, 40px)) var(--inv-shop-pb, clamp(40px, 6vw, 80px));
}


.woocommerce-page .vf-sidebar .widget,
.woocommerce .vf-sidebar .widget {
  margin-bottom: clamp(18px, 2vw, 26px);
}

.woocommerce-page .vf-main,
.woocommerce .vf-main {
  min-width: 0;
}

/* The filter column's own track.
 *
 * pages/templates.css sizes both sidebar layouts as `1fr 300px`, which is
 * right for the layout on the right and wrong for the one on the left: the
 * order property moves the sidebar into the first track, and the first track
 * is the 1fr one — so a left sidebar came out wider than the content it sat
 * beside. Here each side names its own tracks, and the width is an option.
 *
 * The breakpoint is 900px rather than the 768px templates.css uses: below
 * that the panel is a drawer, and a drawer must not also be a column. */
@media (min-width: 900px) {
  .woocommerce-page .vf-layout-sidebar-right,
  .woocommerce .vf-layout-sidebar-right {
    grid-template-columns: minmax(0, 1fr) var(--inv-shop-side-w, 280px);
  }

  .woocommerce-page .vf-layout-sidebar-left,
  .woocommerce .vf-layout-sidebar-left {
    grid-template-columns: var(--inv-shop-side-w, 280px) minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .woocommerce-page .vf-layout-sidebar-right,
  .woocommerce .vf-layout-sidebar-right,
  .woocommerce-page .vf-layout-sidebar-left,
  .woocommerce .vf-layout-sidebar-left {
    grid-template-columns: minmax(0, 1fr);
  }
}