/* ============================================================
   IMPACT-GRUNDLAGE FUER WARENKORB UND DRAWER (JTL, Baustein 3.6, 01.10.2026)

   Im Shopify-Theme lagen sections/main-cart.liquid, sections/cart-drawer.liquid und
   sections/variant-added.liquid (Hinweis nach dem Einlegen) allein auf Impacts theme.css.
   Im JTL-Child laedt theme.css nicht. Diese Datei traegt genau die Regeln, die ein Element
   dieser drei Bereiche treffen, automatisch ausgelesen aus der laufenden Shopify-Seite
   (shopify theme dev, 127.0.0.1:9292, /cart leer und mit Artikel, Versandrechner offen,
   Drawer leer und voll, Bestellhinweis offen, Hinweis nach dem Einlegen). Zustaende, die
   der Testartikel ohne Bild nicht zeigt (Bild und Ladepille der Position, Fehlerzeile,
   Ergebnis des Versandrechners, Bild im Hinweis), sind vor dem Auslesen als versteckte
   Kopien ergaenzt worden. Hover-, Fokus- und aria-busy-Zustaende zaehlen mit.

   Regeln unveraendert, nur mit :where(.nb-wk) begrenzt. .nb-wk steht im Child um die
   Warenkorb-Sektion (snippets/nb-warenkorb.tpl) und um die beiden Drawer
   (snippets/nb-warenkorb-drawer.tpl). [role="main"] (Impacts main) steht hier als
   :where(.nb-wk), weil die Sektion dort direkt liegt. :where hat keine Spezifitaet.

   Variablen: berechnete Werte an main im Shopify-Original bei 390, 720, 1050 und 1440 px.
   JTL: --sticky-area-height folgt --header-height aus nb-kopf.js statt fester 125 px,
   --cursor-close-svg-url zeigt auf cursor-close.svg im Theme-Ordner (gerendert aus
   assets/cursor-close.svg.liquid am Dev-Server).
   Weggelassen: Regeln fuer Shopifys Bezahlknoepfe (accelerated-checkout).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variablen wie an main im Shopify-Original gemessen (390, 720, 1050, 1440 px) */
:where(.nb-wk) {
  --background: 246 247 251;
  --background-primary: 246 247 251;
  --border-color: 16 24 40 / 0.12;
  --button-background: initial;
  --button-background-opacity: initial;
  --button-background-primary: 26 26 26;
  --button-background-secondary: 240 196 23;
  --button-text-color: initial;
  --button-text-primary: 255 255 255;
  --button-text-secondary: 26 26 26;
  --container-gutter: 1.25rem;
  --container-inner-width: initial;
  --container-max-width: 1300px;
  --cursor-close-svg-url: url('cursor-close.svg');
  --dialog-background: 255 255 255;
  --error-text: 248 58 58;
  --hash-difference: initial;
  --hash-difference-abs: initial;
  --heading-font-family: "Abril Fatface", serif;
  --heading-font-style: normal;
  --heading-font-weight: 400;
  --heading-letter-spacing: -0.015em;
  --heading-text-transform: normal;
  --input-gap: 0.5rem;
  --input-height: 2.625rem;
  --input-padding-inline: 1rem;
  --nb-easing: var(--nb-motion-kurve); /* Fassung C 09.10.2026, vorher cubic-bezier(0.4, 0, 0.2, 1) */
  --nb-hover-tint: rgba(1, 12, 40, 0.05);
  --nb-radius-input: 12px;
  --previous-section-background-hash: initial;
  --rounded: 0.875rem;
  --rounded-button: 0.5rem;
  --rounded-full: 9999px;
  --rounded-input: 0.5rem;
  --rounded-sm: 0.4375rem;
  --rounded-xs: 0.25rem;
  --scrollbar-width: initial;
  --section-background-hash: initial;
  --section-outer-spacing-block: 2.5rem;
  --section-stack-spacing-block: 2rem;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-32: 8rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --sticky-area-height: calc(1 * 0px + 1 * var(--header-height, 125px));
  --success-background: 224 244 232;
  --success-text: 0 163 65;
  --text-base: 0.875rem;
  --text-color: 16 24 40;
  --text-font-family: Inter, sans-serif;
  --text-font-style: normal;
  --text-font-weight: 400;
  --text-h2: 1.5rem;
  --text-h4: 1.125rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-letter-spacing: -0.02em;
  --text-primary: 16 24 40;
  --text-sm: 0.75rem;
  --text-xs: 0.6875rem;
  --transform-logical-flip: 1;
  --transform-origin-start: left;
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) {
    --container-gutter: 2rem;
    --input-gap: 1rem;
    --input-height: 3.125rem;
    --input-padding-inline: 1.25rem;
    --section-outer-spacing-block: 3.5rem;
    --section-stack-spacing-block: 3rem;
    --text-base: 1.0rem;
    --text-h2: 1.75rem;
    --text-h4: 1.25rem;
    --text-h5: 1.25rem;
    --text-h6: 1.125rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
  }
}
@media screen and (min-width: 1000px) {
  :where(.nb-wk) {
    --container-gutter: 3rem;
    --section-outer-spacing-block: 4rem;
  }
}
@media screen and (min-width: 1400px) {
  :where(.nb-wk) {
    --section-outer-spacing-block: 5rem;
    --text-h2: 2.5rem;
    --text-h4: 1.5rem;
    --text-h6: 1.25rem;
  }
}

/* Erbe vom Impact-body (theme.css) */
:where(.nb-wk) {
  color: rgb(var(--text-color));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
}

/* Impact-Regeln (theme.css, nextbuy-header.css, Inline-Stil des Layouts), begrenzt */
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .button:not([disabled]):hover { --button-background-opacity: 0.85; } }
}
:where(.nb-wk) *, :where(.nb-wk) ::before, :where(.nb-wk) ::after { box-sizing: border-box; border-style: solid; border-width: 0px; border-color: rgb(var(--text-color) / .12); }
:where(.nb-wk) h1 { font-size: inherit; font-weight: inherit; }
:where(.nb-wk) a { color: inherit; text-decoration: inherit; }
:where(.nb-wk) table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
:where(.nb-wk) button, :where(.nb-wk) input, :where(.nb-wk) textarea, :where(.nb-wk) select { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; color: inherit; margin: 0px; padding: 0px; }
:where(.nb-wk) button, :where(.nb-wk) select { text-transform: none; }
:where(.nb-wk) button, :where(.nb-wk) [type="button"], :where(.nb-wk) [type="submit"] { appearance: button; text-align: inherit; background-color: rgba(0, 0, 0, 0); background-image: none; }
:where(.nb-wk) button, :where(.nb-wk) label, :where(.nb-wk) [type="submit"], :where(.nb-wk) summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:where(.nb-wk) ::-webkit-inner-spin-button { height: auto; }
:where(.nb-wk) ::-webkit-outer-spin-button { height: auto; }
:where(.nb-wk) ::-webkit-search-decoration { appearance: none; }
:where(.nb-wk) ::-webkit-file-upload-button { appearance: button; font: inherit; }
:where(.nb-wk) ::-webkit-date-and-time-value { text-align: start; }
:where(.nb-wk) summary { user-select: none; list-style-type: none; }
:where(.nb-wk) summary::-webkit-details-marker { display: none; }
:where(.nb-wk) p, :where(.nb-wk) h1 { margin: 0px; }
:where(.nb-wk) ul { margin: 0px; padding: 0px; list-style: none; }
:where(.nb-wk) textarea { resize: vertical; }
:where(.nb-wk) input::placeholder, :where(.nb-wk) textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
:where(.nb-wk) :disabled { cursor: default; }
:where(.nb-wk) img { vertical-align: middle; display: block; }
:where(.nb-wk) img { color: rgba(0, 0, 0, 0); max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%); object-fit: inherit; object-position: inherit; height: auto; }
:where(.nb-wk) :focus:not(:focus-visible) { outline: none; }
:where(.nb-wk) [hidden] { display: none !important; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) img { max-width: min(var(--image-max-width, 100%), 100%); }
}
:where(.nb-wk) .accordion { --accordion-spacing: var(--spacing-5); box-sizing: content-box; border-block-width: 1px; }
:where(.nb-wk) .accordion__toggle { gap: var(--spacing-2); flex-grow: 1; justify-content: space-between; align-items: center; padding-block-start: var(--accordion-spacing); padding-block-end: var(--accordion-spacing); display: flex; }
:where(.nb-wk) .accordion__content { margin-block-end: var(--accordion-spacing); padding-inline-end: var(--spacing-6); transform: translateY(-4px); }
:where(.nb-wk) .accordion--lg { --accordion-spacing: var(--spacing-8); }
:where(.nb-wk) .button { --button-background: var(--button-background-primary) / var(--button-background-opacity, 1); --button-text-color: var(--button-text-primary); --button-outline-color: var(--button-background-primary); appearance: none; border-radius: var(--rounded-button); background-color: rgb(var(--button-background)); color: rgb(var(--button-text-color)); text-align: center; font-size: var(--text-sm); letter-spacing: var(--text-letter-spacing); padding-block-start: var(--spacing-2-5); padding-block-end: var(--spacing-2-5); padding-inline-start: var(--spacing-5); padding-inline-end: var(--spacing-5); font-weight: bold; line-height: 1.6; transition: background-color 0.15s var(--nb-motion-kurve), color 0.15s var(--nb-motion-kurve), box-shadow 0.15s var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); display: inline-block; position: relative; }
/* Druck nach Fassung C (Daniel 09.10.2026), auch fuer "Zur Kasse" */
:where(.nb-wk) .button:active:not([disabled]) { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
:where(.nb-wk) .button--lg { font-size: var(--text-base); padding-block: 0.8125rem; padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); }
:where(.nb-wk) .button--xl { font-size: var(--text-base); padding-block-start: var(--spacing-4); padding-block-end: var(--spacing-4); padding-inline-start: var(--spacing-8); padding-inline-end: var(--spacing-8); }
:where(.nb-wk) .button--secondary { --button-background: var(--button-background-secondary) / var(--button-background-opacity, 1); --button-text-color: var(--button-text-secondary); --button-outline-color: var(--button-background-secondary); }
:where(.nb-wk) .button__loader { gap: var(--spacing-1-5); opacity: 0; pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }
:where(.nb-wk) .button__loader > * { width: var(--spacing-1-5); height: var(--spacing-1-5); border-radius: var(--rounded-full); background: currentcolor; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button { padding-block-start: var(--spacing-3); padding-block-end: var(--spacing-3); padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button--lg { padding-block-start: var(--spacing-3-5); padding-block-end: var(--spacing-3-5); padding-inline-start: var(--spacing-8); padding-inline-end: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button--xl { padding-block: 1.075rem; padding-inline-start: var(--spacing-10); padding-inline-end: var(--spacing-10); }
}
:where(.nb-wk) .circle-chevron { width: var(--spacing-6); height: var(--spacing-6); border-radius: var(--rounded-full); background: rgb(var(--text-color) / .1); flex-shrink: 0; place-items: center; transition: 0.2s ease-in-out; display: grid; }
:where(.nb-wk) .circle-chevron[disabled] { opacity: 0.5; }
:where(.nb-wk) .group[aria-expanded="true"] .circle-chevron.group-expanded\:colors:not([disabled]) { background: rgb(var(--text-color)); color: rgb(var(--background)); }
:where(.nb-wk) .group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate { transform: rotate(calc(var(--transform-logical-flip) * 180deg)); }
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .group:hover .circle-chevron.group-hover\:colors:not([disabled]) { background: rgb(var(--text-color)); color: rgb(var(--background)); } }
}
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button), :where(.nb-wk) :is(.drawer, .popover)::part(close-button) { appearance: none; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button):active, :where(.nb-wk) :is(.drawer, .popover)::part(close-button):active { scale: var(--nb-motion-druck-scale); }
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button) { width: var(--spacing-12); height: var(--spacing-12); bottom: 100%; left: calc(50% - var(--spacing-6)); background: rgb(var(--dialog-background)); color: rgb(var(--text-color)); border-radius: var(--rounded-full); z-index: 1; place-items: center; margin-block-end: var(--spacing-4); margin-inline: auto; display: grid; position: absolute; }
:where(.nb-wk) :is(.drawer, .popover)::part(close-button) { color: currentcolor; background: none; margin-inline-start: auto; display: none; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button) { display: none; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) :is(.drawer, .popover)::part(close-button) { display: grid; }
}
:where(.nb-wk) .drawer { --container-outer-width: var(--spacing-6); --background: var(--dialog-background); --text-color: var(--text-primary); --drawer-header-padding: var(--spacing-5); --drawer-body-padding: var(--spacing-5) var(--spacing-6); --drawer-footer-padding: var(--spacing-6); --drawer-content-max-height: none; visibility: hidden; width: 100%; padding: var(--spacing-2); z-index: 999; position: fixed; right: 0px; }
:where(.nb-wk) .drawer::part(overlay) { background: rgba(0, 0, 0, 0.4); min-height: 100lvh; position: fixed; inset: 0px; }
:where(.nb-wk) .drawer.show-close-cursor::part(overlay) { cursor: var(--cursor-close-svg-url) 28 28, auto; }
:where(.nb-wk) .drawer::part(content) { height: 100%; max-height: var(--drawer-content-max-height); border-radius: var(--rounded-sm); background: rgb(var(--dialog-background)); color: rgb(var(--text-color)); flex-direction: column; display: flex; position: relative; }
:where(.nb-wk) .drawer::part(header) { padding: var(--drawer-header-padding); }
:where(.nb-wk) .drawer::part(body) { padding: var(--drawer-body-padding); overscroll-behavior-y: contain; flex: 1 1 auto; align-items: start; display: grid; overflow-y: auto; }
:where(.nb-wk) .drawer::part(footer) { padding: var(--drawer-footer-padding); border-block-start: 1px solid rgb(var(--border-color)); margin-block-start: auto; position: relative; }
:where(.nb-wk) .drawer > [is="close-button"] { display: none; position: absolute; top: 1.5rem; }
:where(.nb-wk) .drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: 1.5rem; }
@media screen and (max-width: 699px) {
  :where(.nb-wk) .drawer { --drawer-content-max-height: 75vh; }
}
@media screen and (max-width: 699px) {
  :where(.nb-wk) .drawer::part(header) { text-align: center; border-bottom: 1px solid rgb(var(--border-color)); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer { --container-outer-width: var(--spacing-10); --drawer-header-padding: var(--spacing-8) var(--spacing-10); --drawer-body-padding: var(--spacing-8) var(--spacing-10); --drawer-footer-padding: var(--spacing-8) var(--spacing-10); width: 510px; height: 100%; padding: var(--spacing-4); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer::part(header) { align-items: center; gap: var(--spacing-4); display: flex; position: relative; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer:not([header-bordered])::part(header) { padding-block-end: 0px; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer:not([header-bordered])::part(header)::after { content: ""; width: 100%; height: var(--spacing-8); background: linear-gradient(to bottom, rgb(var(--dialog-background)), rgb(var(--dialog-background) / .6) 50%, rgb(var(--dialog-background) / 0)); z-index: 1; position: absolute; top: 100%; left: 0px; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer > [is="close-button"] { display: grid; top: 2.25rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: 2.25rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer--lg { width: 680px; }
}
:where(.nb-wk) .banner { align-items: start; gap: var(--spacing-3-5); padding: var(--spacing-3-5); border-radius: var(--rounded-xs); font-size: var(--text-sm); color: rgb(var(--banner-color)); background: rgb(var(--banner-background)); grid-template-columns: max-content auto; display: grid; }
:where(.nb-wk) .banner--success { --banner-background: var(--success-background); --banner-color: var(--success-text); }
:where(.nb-wk) .count-bubble { --size: var(--spacing-4); width: var(--size); height: var(--size); min-width: min-content; border-radius: var(--rounded-full); background: rgb(var(--button-background-primary)); color: rgb(var(--button-text-primary)); place-items: center; padding-inline-start: var(--spacing-1); padding-inline-end: var(--spacing-1); font-size: 9px; font-weight: bold; line-height: 1; display: grid; }
:where(.nb-wk) .count-bubble--lg, :where(.nb-wk) .count-bubble--md { --size: var(--spacing-5); font-size: var(--text-xs); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .count-bubble--md { --size: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .count-bubble--lg { --size: var(--spacing-7); }
}
:where(.nb-wk) .pill-loader { background: rgb(var(--background-primary)); border-radius: var(--rounded-full); visibility: hidden; width: 2rem; height: 1rem; display: grid; }
:where(.nb-wk) .pill-loader > * { grid-area: 1 / -1; place-self: center; }
:where(.nb-wk) .loader-dots { justify-items: center; gap: 0.25rem; display: flex; }
:where(.nb-wk) .loader-dots > * { border-radius: var(--rounded-full); background: currentcolor; width: 0.25rem; height: 0.25rem; }
:where(.nb-wk) .loader-checkmark { opacity: 0; }
:where(.nb-wk) .fieldset { gap: var(--input-gap); display: grid; }
:where(.nb-wk) .textarea, :where(.nb-wk) .input, :where(.nb-wk) .select { appearance: none; width: 100%; height: var(--input-height); border-radius: var(--rounded-input); background: rgb(var(--input-background, transparent)); color: rgb(var(--input-text-color, var(--text-color))); text-align: start; border-width: 1px; padding-inline-start: var(--input-padding-inline); padding-inline-end: var(--input-padding-inline); }
:where(.nb-wk) :is(.input:focus, .textarea:focus, .select:focus-visible) { border-color: currentcolor; outline: none; box-shadow: 0px 0px 0px 1px inset; }
:where(.nb-wk) .input.is-floating, :where(.nb-wk) .select.is-floating { height: calc(var(--input-height)  + .625rem); padding-block-start: var(--spacing-4); }
:where(.nb-wk) .textarea { height: auto; vertical-align: top; padding-block-start: var(--spacing-4); padding-block-end: var(--spacing-4); }
:where(.nb-wk) .textarea.is-floating { padding-block-start: var(--spacing-6); padding-block-end: var(--spacing-2); }
:where(.nb-wk) .select { gap: var(--spacing-4); justify-content: space-between; align-items: center; padding-inline-end: calc(var(--input-padding-inline) * 2); display: flex; }
:where(.nb-wk) .select-chevron { position: absolute; top: calc(50% - 3.5px); }
:where(.nb-wk) .select-chevron:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: var(--input-padding-inline); }
:where(.nb-wk) .form-control { text-align: start; position: relative; }
:where(.nb-wk) .floating-label { height: calc(var(--input-height)  + .625rem); top: 0px; opacity: 0.5; pointer-events: none; transform-origin: var(--transform-origin-start); grid-auto-flow: column; align-items: center; column-gap: 0.5rem; margin-inline-start: var(--spacing-4); transition: transform 0.2s ease-in-out; display: grid; position: absolute; }
:where(.nb-wk) .floating-label:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: 1px; }
:where(.nb-wk) :is(:is(.input, .textarea):focus ~ .floating-label, :is(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :is(.input, .textarea, .select):autofill ~ .floating-label, .select:valid ~ .floating-label) { transform: scale(.65) translateY(calc(-1 * var(--spacing-4))); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .floating-label { margin-inline-start: var(--spacing-5); }
}
:where(.nb-wk) .v-stack { display: grid; }
:where(.nb-wk) .h-stack { align-items: center; display: flex; }
:where(.nb-wk) .container { --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--container-gutter) * 2, var(--container-max-width)); --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width)) / 2); margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2); margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2); }
:where(.nb-wk) .shopify-section { --section-is-first: 0; --hash-difference: calc(var(--section-background-hash)  - var(--previous-section-background-hash, -1)); --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference)); --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1)); background: rgb(var(--background)); position: relative; }
:where(.nb-wk) .shopify-section:not(.contents) { display: flow-root; }
:where(.nb-wk) .shopify-section:empty { display: none; }
:where(.nb-wk) .shopify-section:first-child { --section-is-first: 1; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .shopify-section:first-child { --section-outer-spacing-block-start: 24px; }
}
:where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-8); margin-block-end: var(--section-outer-spacing-block); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-12); }
}
@media screen and (min-width: 1000px) {
  :where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-16); }
}
:where(.nb-wk) .empty-state { justify-items: center; gap: var(--spacing-5); text-align: center; margin-block-start: var(--spacing-12); margin-block-end: var(--spacing-12); display: grid; }
:where(.nb-wk) .empty-state__icon-wrapper { position: relative; }
:where(.nb-wk) .empty-state__icon-wrapper > .count-bubble { position: absolute; top: calc(-1 * var(--spacing-1-5)); }
:where(.nb-wk) .empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: calc(-1 * var(--spacing-1-5)); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state { gap: var(--spacing-8); margin-block-start: var(--spacing-32); margin-block-end: var(--spacing-32); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > svg { width: var(--spacing-12); height: var(--spacing-12); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > .count-bubble { top: calc(-1 * var(--spacing-3)); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: calc(-1 * var(--spacing-3)); }
}
:where(.nb-wk) .line-item { --line-item-image-width: var(--spacing-20); align-items: start; gap: var(--spacing-5); display: flex; }
:where(.nb-wk) .line-item__media-wrapper { width: var(--line-item-image-width); min-width: var(--line-item-image-width); position: relative; }
:where(.nb-wk) .line-item__media-wrapper > .pill-loader { position: absolute; top: calc(50% - 0.5rem); }
:where(.nb-wk) .line-item__media-wrapper > .pill-loader:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: calc(50% - 1rem); }
:where(.nb-wk) .line-item__info { justify-items: start; gap: var(--spacing-1); display: grid; }
:where(.nb-wk) .line-item__info line-item-quantity { margin-block-start: var(--spacing-1); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .line-item { --line-item-image-width: var(--spacing-24); align-items: center; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .line-item__actions { margin-inline-start: auto; }
}
:where(.nb-wk) .order-summary__header { display: none; }
:where(.nb-wk) .order-summary__body td { border-top-width: 0px; padding-block-start: 0px; padding-block-end: var(--spacing-4); }
:where(.nb-wk) .order-summary__body td:first-child { width: 60%; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__header { display: table-header-group; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body td { padding-block-end: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body tr:first-child td { padding-block-start: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body tr:last-child td { padding-block-end: var(--spacing-8); }
}
:where(.nb-wk) .quantity-input { width: var(--quantity-input-characters-count, 1ch); border-radius: var(--rounded-input); text-align: center; min-width: 44px; font-size: var(--text-xs); appearance: none; background: none; border-width: 1px; outline: none; padding-block-start: var(--spacing-1); padding-block-end: var(--spacing-1); }
:where(.nb-wk) .quantity-input::-webkit-outer-spin-button { appearance: none; margin: 0px; }
:where(.nb-wk) .quantity-input::-webkit-inner-spin-button { appearance: none; margin: 0px; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quantity-input { min-width: 48px; padding-block-start: var(--spacing-2); padding-block-end: var(--spacing-2); }
}
:where(.nb-wk) .buy-buttons { align-items: start; gap: var(--spacing-2); display: grid; }
:where(.nb-wk) .buy-buttons--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
:where(.nb-wk) .price-list { align-items: baseline; gap: var(--spacing-0-5) var(--spacing-2); flex-wrap: wrap; display: flex; }
:where(.nb-wk) .quick-buy-drawer { --drawer-header-padding: var(--spacing-6); --drawer-body-padding: var(--spacing-6); --shopify-payment-button-padding: .8125rem var(--spacing-6); display: none; }
:where(.nb-wk) .quick-buy-drawer::part(close-button) { align-self: start; margin-block-start: 0.25rem; margin-inline-end: 0.25rem; }
:where(.nb-wk) .quick-buy-drawer__media { max-width: var(--spacing-20); }
:where(.nb-wk) .quick-buy-drawer__info { gap: var(--spacing-6); margin-block-start: 1rem; display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer { --drawer-header-padding: var(--spacing-6); width: 560px; height: auto; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer :is(.button, .shopify-payment-button__button--unbranded) { padding: var(--spacing-3) var(--spacing-6) !important; font-size: var(--text-sm) !important; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer__info { gap: var(--spacing-8); }
}
:where(.nb-wk) .list-disc { list-style: inside; }
:where(.nb-wk) .prose > :first-child { margin-block-start: 0px !important; }
:where(.nb-wk) .prose > :last-child { margin-block-end: 0px !important; }
:where(.nb-wk) .prose * + .button { margin-block-start: var(--spacing-6) !important; }
:where(.nb-wk) .prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4) + * { margin-block-start: var(--spacing-5); }
:where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose * + .button { margin-block-start: var(--spacing-8) !important; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose :is(.h4, h4) + * { margin-block-start: var(--spacing-5); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .prose :is(.h3, .h4, h3, h4) + * { margin-block-start: var(--spacing-6); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
}
:where(.nb-wk) .link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.35em) / 100% 1px no-repeat; transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out; }
@supports (height: 1lh) {
  :where(.nb-wk) .link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.2lh) / 100% 1px no-repeat; }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) :is(.link, .prose a:not(.button)):hover { background-size: 0px 1px; } }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .text-subdued :is(.link, .prose a:not(.button)):hover { color: rgb(var(--text-color)); } }
}
:where(.nb-wk) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.35em) / 0px 1px no-repeat; transition: background-size 0.3s ease-in-out; }
@supports (height: 1lh) {
  :where(.nb-wk) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.2lh) / 0px 1px no-repeat; }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .reversed-link.hover\:show:hover { background-size: 100% 1px; } }
}
:where(.nb-wk) .link-faded { opacity: 0.7; transition: opacity 0.2s ease-in-out; }
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .link-faded:hover { opacity: 1; } }
}
:where(.nb-wk) table { width: 100%; }
:where(.nb-wk) th { text-align: start; }
:where(.nb-wk) th, :where(.nb-wk) td { padding: var(--spacing-4); vertical-align: top; }
:where(.nb-wk) table:not(.table--bordered) :is(th, td):first-child { padding-inline-start: 0px; }
:where(.nb-wk) table:not(.table--bordered) :is(th, td):last-child { padding-inline-end: 0px; }
:where(.nb-wk) thead th { border-block-end-width: 1px; }
:where(.nb-wk) thead + tbody tr > * { border-top-width: 1px; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) th, :where(.nb-wk) td { padding-block-start: var(--spacing-6); padding-block-end: var(--spacing-6); }
}
:where(.nb-wk) .text-with-icon { gap: var(--spacing-3); align-items: center; display: flex; }
:where(.nb-wk) .text-with-icon > svg { flex-shrink: 0; }
:where(.nb-wk) .icon { vertical-align: middle; display: block; }
:where(.nb-wk) .offset-icon { --icon-baseline-distance: calc(1em * 1.6); --icon-offset: calc((var(--icon-baseline-distance)  - var(--icon-height)) / 2); top: var(--icon-offset); position: relative; }
:where(.nb-wk) .icon-chevron-bottom { transition: transform 0.2s ease-in-out; }
:where(.nb-wk) .cart { gap: var(--section-stack-spacing-block); max-width: 1350px; margin-inline: auto; display: grid; }
:where(.nb-wk) .cart-header { gap: var(--spacing-6); text-align: center; justify-items: center; display: grid; }
:where(.nb-wk) .cart-order { align-items: start; gap: var(--spacing-6); display: grid; }
:where(.nb-wk) .cart-form { gap: var(--spacing-5); padding: var(--spacing-6); border-width: 1px; display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-order { gap: var(--spacing-12); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-form { gap: var(--spacing-6); padding: var(--spacing-10) var(--spacing-12); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .cart-order { grid-template-columns: 1fr 380px; }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .cart-order__recap { top: calc(var(--sticky-area-height)  + 20px); position: sticky; }
}
@media screen and (min-width: 1400px) {
  :where(.nb-wk) .cart-order { gap: var(--spacing-24); }
}
:where(.nb-wk) .shipping-estimator { gap: var(--spacing-6); display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .shipping-estimator__form { flex-wrap: wrap; margin-inline-end: var(--spacing-6); display: flex; }
}
:where(.nb-wk) .cart-drawer { --drawer-footer-padding: 1rem 1.5rem 1.5rem 1.5rem; --drawer-content-max-height: none; height: 100%; top: 0px; }
:where(.nb-wk) .cart-drawer::part(outside-close-button) { display: none; }
:where(.nb-wk) .cart-drawer > [is="close-button"] { display: grid; }
:where(.nb-wk) .cart-drawer__top { gap: var(--spacing-2); padding-block-end: var(--spacing-6); display: grid; }
:where(.nb-wk) .cart-drawer__note { visibility: hidden; width: 100%; transition: visibility 0.2s ease-in-out; position: absolute; bottom: calc(100% + 1px); overflow: hidden; }
:where(.nb-wk) .cart-drawer__note:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: 0px; }
:where(.nb-wk) .cart-drawer__note-inner { padding: var(--spacing-5); background: rgb(var(--dialog-background)); border-block-start-width: 1px; transition: transform 0.2s ease-in-out; transform: translateY(100%); }
:where(.nb-wk) .cart-drawer__note[open] { visibility: visible; }
:where(.nb-wk) .cart-drawer__note[open] > .cart-drawer__note-inner { transform: translateY(0px); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer { --drawer-footer-padding: 1.5rem 2.5rem 2.5rem 2.5rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer__top { gap: var(--spacing-4); padding-block-end: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer__note-inner { padding: var(--spacing-8) var(--spacing-10) var(--spacing-10) var(--spacing-10); }
}
:where(.nb-wk) .sr-only { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
:where(.nb-wk) .rounded-xs { border-radius: var(--rounded-xs); }
:where(.nb-wk) .rounded { border-radius: var(--rounded); }
:where(.nb-wk) .text-error { color: rgb(var(--error-text)); }
:where(.nb-wk) .text-subdued { color: rgb(var(--text-color) / .7); }
:where(.nb-wk) .hidden { display: none; }
:where(.nb-wk) .block { display: block; }
:where(.nb-wk) .contents { display: contents; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:hidden { display: none; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:block { display: block; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:table-cell { display: table-cell; }
}
:where(.nb-wk) .wrap { flex-wrap: wrap; }
:where(.nb-wk) .grow { flex-grow: 1; }
:where(.nb-wk) .text-start { text-align: start; }
:where(.nb-wk) .text-center { text-align: center; }
:where(.nb-wk) .text-end { text-align: end; }
:where(.nb-wk) .justify-center { justify-content: safe center; }
:where(.nb-wk) .justify-between { justify-content: space-between; }
:where(.nb-wk) .justify-self-start { justify-self: start; }
:where(.nb-wk) .align-center { align-items: center; }
:where(.nb-wk) .align-self-center { align-self: center; }
:where(.nb-wk) .align-center { vertical-align: middle; }
:where(.nb-wk) .w-full { width: 100%; }
:where(.nb-wk) .w-0 { width: 0px; }
:where(.nb-wk) .gap-0\.5 { gap: var(--spacing-0-5); }
:where(.nb-wk) .gap-1 { gap: var(--spacing-1); }
:where(.nb-wk) .gap-2 { gap: var(--spacing-2); }
:where(.nb-wk) .gap-3 { gap: var(--spacing-3); }
:where(.nb-wk) .gap-4 { gap: var(--spacing-4); }
:where(.nb-wk) .gap-6 { gap: var(--spacing-6); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-2\.5 { gap: var(--spacing-2-5); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-6 { gap: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-8 { gap: var(--spacing-8); }
}
:where(.nb-wk) .bold { font-weight: bold; }
:where(.nb-wk) .text-xs { font-size: var(--text-xs); line-height: 1.7; }
:where(.nb-wk) .text-sm { font-size: var(--text-sm); line-height: 1.6; }
:where(.nb-wk) .h4, :where(.nb-wk) .h5, :where(.nb-wk) .h2, :where(.nb-wk) .h6 { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); overflow-wrap: anywhere; }
:where(.nb-wk) .h2 { font-size: var(--text-h2); line-height: 1.1; }
:where(.nb-wk) .h4 { font-size: var(--text-h4); line-height: 1.3; }
:where(.nb-wk) .h5 { font-size: var(--text-h5); line-height: 1.4; }
:where(.nb-wk) .h6 { font-size: var(--text-h6); line-height: 1.4; }
:where(.nb-wk) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .section-header__title, .prose :is(h1, h2, h3, h4, h5, h6), .product-card__title) { font-family: Gilroy, GilroyFallback, sans-serif !important; font-weight: 600 !important; }
:where(.nb-wk) .cart-drawer [is="close-button"] { padding: 8px; margin: -8px; border-radius: var(--nb-radius-input); background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: background var(--nb-motion-transform) var(--nb-easing), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) { :where(.nb-wk) .cart-drawer [is="close-button"]:hover { color: var(--nb-ink-700); } }
/* Druck nach Fassung C (Daniel 09.10.2026) */
:where(.nb-wk) .cart-drawer [is="close-button"]:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }

/* html.lock aus theme.css Zeile 4011, gesetzt von nb-warenkorb.js, solange ein Drawer offen ist */
html.lock { overflow: hidden; }

/* JTL: der Fokusring des Child (.nb-v3 :focus-visible in nb-tokens-v3.css) traf das Mengenfeld, das in Impact
   ohne Ring steht (.quantity-input { outline: none }). Felder bekommen keinen globalen Ring (komponenten-formular.md).
   .input, .textarea und .select setzen ihren Fokus oben selbst und schlagen den Ring schon. */
.nb-v3 .nb-wk .quantity-input:focus-visible { outline: none; box-shadow: none; }