/*
  matnext Kasse Look, geladen von matnext-kasse-look.php.
  Tokens wie app/globals.css im Frontend. Ändert sich dort etwas, hier nachziehen.
  Selektoren mit "body" davor, damit sie unabhängig von der Ladereihenfolge der Block-Styles gewinnen.
*/

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url(bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url(bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens, dazu die Theme-Variablen von Twenty Twenty-Five umgebogen ---------- */

body {
  --mn-brand-50: #f3f4ff;
  --mn-brand-100: #eef0ff;
  --mn-brand-200: #d6d9ff;
  --mn-brand-500: #3d4aff;
  --mn-brand-600: #2f3be6;
  --mn-brand-700: #242dbf;
  --mn-night-900: #1b1638;
  --mn-paper: #fbfaf7;
  --mn-sand-100: #f1eee7;
  --mn-sand-200: #e7e3da;
  --mn-sand-300: #d5d0c4;
  --mn-stone-500: #6f6c65;
  --mn-stone-700: #5c5a54;
  --mn-ink: #16171d;
  --mn-eco-100: #e2f7f2;
  --mn-eco-700: #0b7a64;
  --mn-danger: #c8322b;
  --mn-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mn-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mn-radius-field: 0.875rem;
  --mn-radius-card: 1.25rem;
  --mn-shadow-card: 0 1px 2px rgb(22 23 29 / 0.04), 0 8px 24px -12px rgb(22 23 29 / 0.12);
  --mn-shadow-brand: 0 10px 30px -10px rgb(61 74 255 / 0.55);
  --mn-ring: 0 0 0 4px rgb(61 74 255 / 0.14);

  --wp--preset--color--base: var(--mn-paper);
  --wp--preset--color--contrast: var(--mn-ink);
  --wp--preset--color--accent-4: var(--mn-stone-500);
  --wp--preset--font-family--manrope: var(--mn-sans);
  --wp--preset--font-family--fira-code: var(--mn-sans);
  /* Ränder wie container-page im Frontend: Kopf, Inhalt und Fuß stehen bündig */
  --wp--style--global--wide-size: 76rem;
  --wp--style--root--padding-left: 1rem;
  --wp--style--root--padding-right: 1rem;
  --wc-separator-color: var(--mn-sand-200);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--mn-paper);
  color: var(--mn-ink);
  font-family: var(--mn-sans);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 40rem) { body { --wp--style--root--padding-left: 1.5rem; --wp--style--root--padding-right: 1.5rem; } }
@media (min-width: 64rem) { body { --wp--style--root--padding-left: 2rem; --wp--style--root--padding-right: 2rem; } }
body .wp-site-blocks { flex: 1 0 auto; padding-top: 0; }
body ::selection { background: var(--mn-brand-200); }

body h1, body h2, body h3, body .wp-block-post-title {
  font-family: var(--mn-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body h1, body .wp-block-post-title { font-size: clamp(2rem, 1.35rem + 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }

body a { color: var(--mn-brand-600); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
body a:hover { color: var(--mn-brand-700); }
body :focus-visible { outline: 2px solid var(--mn-brand-500); outline-offset: 3px; }

/* ---------- Kopfzeile wie components/layout/Header.tsx ---------- */

.mn-container {
  width: 100%;
  max-width: calc(76rem + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mn-topbar { background: var(--mn-brand-500); color: #fff; font-size: 0.8rem; font-weight: 500; }
.mn-topbar .mn-container { height: 2.25rem; justify-content: center; }
.mn-topbar span { display: inline-flex; align-items: center; gap: 0.375rem; }
@media (min-width: 40rem) { .mn-topbar .mn-container { justify-content: space-between; } }

.mn-header { background: var(--mn-paper); border-bottom: 1px solid var(--mn-sand-200); }
.mn-header .mn-container { height: 4rem; }
@media (min-width: 64rem) { .mn-header .mn-container { height: 4.5rem; } }
.mn-logo-link { display: inline-flex; margin-right: auto; }
.mn-logo { display: block; height: 2rem; width: auto; }
@media (min-width: 40rem) { .mn-logo { height: 2.25rem; } }

.mn-sicher { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--mn-stone-700); font-size: 0.875rem; font-weight: 500; }
.mn-sicher svg { color: var(--mn-eco-700); }
body .mn-weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 999px;
  color: var(--mn-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--mn-sand-300);
  background: #fff;
  transition: box-shadow 0.2s, color 0.2s;
}
body .mn-weiter:hover { color: var(--mn-ink); box-shadow: inset 0 0 0 1px rgb(22 23 29 / 0.4); }
@media (max-width: 39.99rem) {
  .mn-ab-sm { display: none !important; }
  body .mn-weiter { width: 2.75rem; padding: 0; justify-content: center; }
  body .mn-weiter span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 47.99rem) { .mn-sicher { display: none; } }

/* ---------- Fusszeile wie components/layout/Footer.tsx, verkürzt ---------- */

.mn-footer { margin-top: 4rem; background: var(--mn-night-900); color: rgb(255 255 255 / 0.75); font-size: 0.875rem; }
.mn-footer .mn-container { flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 2rem; }
.mn-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
body .mn-footer a { color: rgb(255 255 255 / 0.75); text-decoration: none; }
body .mn-footer a:hover { color: #fff; }
.mn-footer p { margin: 0; font-size: 0.75rem; color: rgb(255 255 255 / 0.5); display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }

/* ---------- Seitenrahmen ---------- */

body main.wp-block-group { padding-top: 1.5rem !important; margin-top: 0 !important; }
body main .entry-content { margin-block-start: 0; }
body .wp-block-woocommerce-checkout { padding-top: 0; }
@media (min-width: 64rem) { body main.wp-block-group { padding-top: 2.5rem !important; } }

/* ---------- Überschriften der Schritte ---------- */

body .wc-block-components-title.wc-block-components-title,
body .wc-block-components-checkout-step__title {
  font-family: var(--mn-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
body .wc-block-components-checkout-step__description,
body .wc-block-checkout__guest-checkout-notice,
body .wc-block-components-address-form__address_2-toggle { color: var(--mn-stone-500); font-size: 0.875rem; }

/* ---------- Eingabefelder ---------- */

body .wc-block-components-text-input input[type],
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-text-input textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
body .wc-block-components-textarea,
body .wc-block-checkout__order-notes textarea {
  background: #fff;
  border: 1px solid var(--mn-sand-300);
  border-radius: var(--mn-radius-field);
  color: var(--mn-ink);
  font-family: var(--mn-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Klassische Formulare von WooCommerce: Widerrufsformular, Konto */
body .woocommerce form .form-row .input-text,
body .woocommerce form .form-row select,
body .woocommerce form .form-row textarea {
  min-height: 3.125rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--mn-sand-300);
  border-radius: var(--mn-radius-field);
  color: var(--mn-ink);
  font-family: var(--mn-sans);
  font-size: 1rem;
  box-sizing: border-box;
}
body .woocommerce form .form-row textarea { min-height: 7rem; }
body .woocommerce form .form-row .input-text:focus,
body .woocommerce form .form-row select:focus,
body .woocommerce form .form-row textarea:focus { border-color: var(--mn-brand-500); box-shadow: var(--mn-ring); outline: none; }
body .woocommerce form .form-row label { color: var(--mn-stone-700); font-weight: 600; font-size: 0.875rem; }
body .woocommerce form .form-row .required { color: var(--mn-danger); }

body .wc-blocks-components-select .wc-blocks-components-select__container { background: #fff; border-radius: var(--mn-radius-field); }
body .wc-block-components-text-input input[type]:hover,
body .wc-block-components-form .wc-block-components-text-input input[type]:hover,
body .wc-blocks-components-select .wc-blocks-components-select__select:hover { border-color: var(--mn-stone-500); }
body .wc-block-components-text-input input[type]:focus,
body .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body .wc-block-components-text-input textarea:focus,
body .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
body .wc-block-components-textarea:focus {
  border-color: var(--mn-brand-500);
  border-width: 1px;
  box-shadow: var(--mn-ring);
  outline: none;
}
body .wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--mn-stone-500); }
body .wc-block-components-form .wc-block-components-text-input.has-error input[type],
body .wc-blocks-components-select.has-error .wc-blocks-components-select__select { border-color: var(--mn-danger); }
body .wc-block-components-validation-error { color: var(--mn-danger); }

/* ---------- Checkboxen und Radios ---------- */

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border: 1px solid var(--mn-sand-300);
  border-radius: 6px;
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--mn-brand-500);
  border-color: var(--mn-brand-500);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #fff; }
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus { outline: none; box-shadow: var(--mn-ring); }

body .wc-block-components-radio-control .wc-block-components-radio-control__input { border: 1px solid var(--mn-sand-300); }
body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border: 6px solid var(--mn-brand-500); }
body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { display: none; }
body .wc-block-components-radio-control .wc-block-components-radio-control__input:focus { outline: none; box-shadow: var(--mn-ring); }

/* Auswahlkästen für Versand und Zahlung wie die Stärke-Kacheln im Konfigurator */
body .wc-block-components-radio-control--highlight-checked { background: #fff; border-radius: var(--mn-radius-field); }
body .wc-block-components-radio-control--highlight-checked::after { border-color: var(--mn-sand-300); border-radius: var(--mn-radius-field); }
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  background: var(--mn-brand-50);
  border-radius: var(--mn-radius-field);
  box-shadow: inset 0 0 0 2px var(--mn-brand-500);
}
body .wc-block-components-radio-control__label,
body .wc-block-components-radio-control__option .wc-block-components-radio-control__label-group { font-weight: 600; }
body .wc-block-components-radio-control__secondary-label { color: var(--mn-eco-700); font-weight: 600; }

/* ---------- Express-Zahlung ---------- */

body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before { border-radius: var(--mn-radius-card) 0 0 0; }
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { border-radius: 0 var(--mn-radius-card) 0 0; }
body .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content { border-radius: 0 0 var(--mn-radius-card) var(--mn-radius-card); background: #fff; }
body .wc-block-components-express-payment__title { color: var(--mn-stone-500); font-size: 0.875rem; }
body .wc-block-components-express-payment-continue-rule { color: var(--mn-stone-500); font-size: 0.875rem; }

/* ---------- Bestellbutton wie der Primärbutton im Frontend ---------- */

body .wc-block-components-button:not(.is-link).contained,
body .wc-block-components-checkout-place-order-button,
body .wp-element-button.wc-block-cart__submit-button,
body .woocommerce .button,
body .wp-block-button__link {
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--mn-brand-500);
  color: #fff;
  font-family: var(--mn-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: var(--mn-shadow-brand);
  transition: background-color 0.2s, transform 0.2s;
}
body .wc-block-components-button:not(.is-link).contained:hover,
body .wc-block-components-checkout-place-order-button:hover,
body .wp-element-button.wc-block-cart__submit-button:hover,
body .woocommerce .button:hover,
body .wp-block-button__link:hover { background: var(--mn-brand-600); color: #fff; }
body .wc-block-components-checkout-place-order-button:active { transform: scale(0.98); }
body .wc-block-components-checkout-place-order-button:focus-visible { outline: 2px solid var(--mn-brand-500); outline-offset: 3px; }

body .wc-block-components-checkout-return-to-cart-button { color: var(--mn-stone-700); font-weight: 600; }

/* ---------- Bestellübersicht als Karte wie im Side-Cart ---------- */

body .wp-block-woocommerce-checkout-order-summary-block {
  background: #fff;
  border: 1px solid var(--mn-sand-200);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  overflow: hidden;
}
body .wc-block-components-checkout-order-summary__title-text,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  font-family: var(--mn-display);
  font-size: 1.125rem;
  font-weight: 600;
}
/* Handy: Woo zeigt die Übersicht oben als aufklappbare Zeile, in der Karte braucht sie Innenabstand */
body .wc-block-checkout:is(.is-mobile, .is-small) .wp-block-woocommerce-checkout-order-summary-block { padding-inline: 1rem; margin-bottom: 1.5rem; }
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { margin-top: 0; border-top: 0; border-bottom: 0; padding-block: 1rem; }
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title:focus { outline: none; }
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title:focus-visible { outline: 2px solid var(--mn-brand-500); outline-offset: 2px; border-radius: 0.5rem; }
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content.is-open { border-top: 1px solid var(--mn-sand-200); border-bottom: 0; }

body .wc-block-components-order-summary-item__image img { border-radius: 0.75rem; background: var(--mn-sand-100); }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
  background: var(--mn-brand-500);
  border: 2px solid #fff;
  color: #fff;
}
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span { color: #fff; }
body .wc-block-components-product-name { font-weight: 600; color: var(--mn-ink); }
body .wc-block-components-product-metadata,
body .wc-block-components-product-details { color: var(--mn-stone-500); }
body .wc-block-components-product-price__regular { color: var(--mn-stone-500); }

/* Ersparnis wie die Pille "Save 10%" im Frontend */
body .wc-block-components-product-badge,
body .wc-block-components-sale-badge {
  background: var(--mn-eco-100);
  color: var(--mn-eco-700);
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
}

body .wc-block-components-totals-item__value { font-weight: 600; }
body .wc-block-components-totals-shipping .wc-block-components-totals-item__value,
body .wc-block-components-totals-item.wc-block-components-totals-shipping strong { color: var(--mn-eco-700); }
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--mn-display);
  font-size: 1.375rem;
  font-weight: 600;
}
body .wc-block-components-totals-footer-item-tax { color: var(--mn-stone-500); }

body .wc-block-components-panel__button,
body .wc-block-components-totals-coupon-link { color: var(--mn-brand-600); font-weight: 600; }

/* ---------- Hinweise ---------- */

body .wc-block-components-notice-banner { border-radius: var(--mn-radius-field); border-color: var(--mn-sand-300); }
body .wc-block-components-notice-banner.is-error { border-color: var(--mn-danger); background: #fdf3f2; }
body .wc-block-components-notice-banner.is-success { border-color: var(--mn-eco-700); background: var(--mn-eco-100); }
body .wc-block-components-notice-banner.is-info { border-color: var(--mn-brand-200); background: var(--mn-brand-50); }

/* ---------- Danke-Seite und Konto ---------- */

body .wc-block-order-confirmation-status,
body .woocommerce-order-overview,
body .wc-block-order-confirmation-summary {
  background: #fff;
  border: 1px solid var(--mn-sand-200);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  padding: 1.5rem;
}
body .wc-block-order-confirmation-summary-list { margin: 0; }
body .wc-block-order-confirmation-totals table,
body .wc-block-order-confirmation-downloads table,
body .woocommerce table.shop_table { border-radius: var(--mn-radius-card); overflow: hidden; }