/* ==========================================================================
   SCHAKAL SPORTS — Kasse, Bestellbestätigung, Kundenkonto
   Nur im WordPress-Theme geladen (ss_woo_assets() in inc/woocommerce.php);
   die statische Fassung hat keine Kasse und bindet diese Datei nicht ein.

   Die Kasse ist der Checkout-Block von WooCommerce, das Konto der klassische
   Shortcode. Beide bringen ihr eigenes Markup mit, und das bleibt so: Wer es
   nachbaut, baut es bei jedem WooCommerce-Update wieder nach. Hier wird nur
   übersetzt — Schrift, Farben, Rundung und Knöpfe aus den Tokens in base.css.
   Deshalb steht in dieser Datei **keine einzige Farbe**, und die dunkle
   Fassung stimmt von allein.

   Die Selektoren sind die Klassen, die WooCommerce als stabil ausweist
   (`wc-block-components-*`). Greift nach einem Update eine Regel nicht mehr,
   sieht die Kasse aus wie WooCommerce ab Werk — unschön, aber bedienbar.
   ========================================================================== */

.kasse { padding-top: var(--s-6); }

/* Der Block legt sich sonst auf „alignwide" über die Satzkante hinaus */
.kasse .wp-block-woocommerce-checkout,
.kasse .woocommerce { max-width: none; margin-inline: 0; }

.kasse,
.kasse input,
.kasse select,
.kasse textarea,
.kasse button { font-family: var(--f-body); }

/* --- Abschnittstitel: dieselbe Mono-Ebene wie die Labels der Seite ------- */
.kasse .wc-block-components-title,
.kasse .wc-block-components-checkout-step__title,
.kasse .woocommerce-MyAccount-content h2,
.kasse .woocommerce h2 {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.kasse .wc-block-components-checkout-step__description,
.kasse .wc-block-components-address-card { color: var(--fg-mute); }

/* --- Eingabefelder ------------------------------------------------------- */
.kasse .wc-block-components-text-input input,
.kasse .wc-block-components-textarea,
.kasse .wc-blocks-components-select__select,
.kasse .wc-block-components-combobox .components-combobox-control input,
.kasse .woocommerce form .input-text,
.kasse .woocommerce form select {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: none;
}

.kasse .wc-block-components-text-input label,
.kasse .wc-blocks-components-select__label,
.kasse .wc-block-components-combobox .components-base-control__label { color: var(--fg-faint); }

.kasse .wc-block-components-text-input input:focus,
.kasse .wc-blocks-components-select__select:focus,
.kasse .wc-block-components-combobox .components-combobox-control input:focus,
.kasse .woocommerce form .input-text:focus {
  border-color: var(--fg);
  outline: 2px solid var(--accent-br);
  outline-offset: 1px;
}

.kasse .wc-block-components-validation-error,
.kasse .has-error label { color: var(--accent-br); }

/* --- Auswahl: Zahlart, Versand, Häkchen ---------------------------------- */
.kasse .wc-block-components-radio-control__option,
.kasse .wc-block-components-radio-control-accordion-option {
  border-color: var(--line);
  border-radius: var(--r-3);
}
.kasse .wc-block-components-radio-control__input,
.kasse .wc-block-components-checkbox__input { accent-color: var(--accent); }
.kasse .wc-block-components-radio-control__input:checked { border-color: var(--accent); }
.kasse .wc-block-components-radio-control__input:checked::before { background: var(--accent); }
.kasse .wc-block-components-checkbox__input:checked { background: var(--accent); border-color: var(--accent); }
.kasse .wc-block-components-checkbox__mark { fill: var(--bone); }

/* --- Der Knopf, der zählt ------------------------------------------------
   „Zahlungspflichtig bestellen" war das Einzige, was bei der Testbestellung
   am 20.9.2026 unformatiert dastand — ausgerechnet der Knopf, an dem
   bezahlt wird. Er bekommt die Gestalt von `.btn`, ohne den Wischer: Der
   braucht ein zweites Element, und das gehört nicht in fremdes Markup. */
.kasse .wc-block-components-button:not(.is-link),
.kasse .woocommerce .button,
.kasse .woocommerce button[type='submit'] {
  min-height: 3.2rem;
  padding: 1.05rem 1.9rem;
  background: var(--accent);
  color: var(--bone);
  border: 0;
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* Füllung und Schrift wechseln zusammen, und nur mit echtem Zeiger —
   dieselbe Regel wie bei `.btn` (siehe components.css). */
@media (hover: hover) and (pointer: fine) {
  .kasse .wc-block-components-button:not(.is-link):hover,
  .kasse .woocommerce .button:hover,
  .kasse .woocommerce button[type='submit']:hover {
    background: var(--contrast);
    color: var(--on-contrast);
  }
}

.kasse .wc-block-components-button:not(.is-link):focus-visible,
.kasse .woocommerce .button:focus-visible {
  outline: 2px solid var(--accent-br);
  outline-offset: 3px;
}

.kasse .wc-block-components-button.is-link,
.kasse .wc-block-components-checkout-return-to-cart-button,
.kasse .woocommerce a:not(.button) { color: var(--accent-br); }

/* --- Bestellübersicht ---------------------------------------------------- */
.kasse .wc-block-checkout__sidebar .wc-block-components-order-summary,
.kasse .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

.kasse .wc-block-components-order-summary-item__quantity {
  background: var(--contrast);
  color: var(--on-contrast);
  border-color: var(--surface);
  box-shadow: none;
}

/* Bilder der Artikel: Freisteller auf der Bühnenfläche, wie in der Schublade */
.kasse .wc-block-components-order-summary-item__image img {
  background: var(--stage-flat);
  border-radius: var(--r-1);
}

/* Ausführung und „Teil von: Das Startpaket" — die Mono-Zeile der Korbzeile */
.kasse .wc-block-components-product-details,
.kasse .wc-block-components-product-metadata {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--fg-faint);
}

.kasse .wc-block-components-totals-item,
.kasse .wc-block-components-totals-wrapper { border-color: var(--line); }
.kasse .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.kasse .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Der Paketnachlass ist das Versprechen der Paketseite — er soll auffallen */
.kasse .wc-block-components-totals-fees .wc-block-components-totals-item__value { color: var(--ok); }

/* --- Hinweise ------------------------------------------------------------ */
.kasse .wc-block-components-notice-banner,
.kasse .woocommerce-message,
.kasse .woocommerce-info,
.kasse .woocommerce-error {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
}
.kasse .wc-block-components-notice-banner.is-success,
.kasse .woocommerce-message { border-left-color: var(--ok); }
.kasse .wc-block-components-notice-banner > svg { fill: currentColor; background: none; }

/* --- Bestellbestätigung (klassisches Markup, auch unter der Block-Kasse) - */
.kasse .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-block: var(--s-5);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.kasse .woocommerce-order-overview li {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.kasse .woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

.kasse .woocommerce table.shop_table,
.kasse .woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.kasse .woocommerce table.shop_table th,
.kasse .woocommerce table.shop_table td {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  text-align: left;
}

/* --- Konto ---------------------------------------------------------------- */
.kasse .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: var(--s-2); }
.kasse .woocommerce-MyAccount-navigation a { color: var(--fg-mute); }
.kasse .woocommerce-MyAccount-navigation .is-active a { color: var(--fg); font-weight: 600; }

/* Die klassischen WooCommerce-Stile lassen Navigation und Inhalt floaten
   (30 % / 68 %). Im Raster stören die Floats, und der leere Hinweisbereich
   (.woocommerce-notices-wrapper) belegte die erste Zelle: Am 12.10.2026 stand
   der Inhalt deshalb in einer Spalte von 14 rem unter der Navigation. */
.kasse .woocommerce-MyAccount-navigation,
.kasse .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.kasse .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.kasse .woocommerce-MyAccount-navigation li a { color: var(--fg-mute); text-decoration: none; }
.kasse .woocommerce-MyAccount-navigation li.is-active a { color: var(--fg); font-weight: 600; }
.kasse .woocommerce-MyAccount-content { display: grid; gap: var(--s-4); max-width: 46rem; }

@media (min-width: 900px) {
  .kasse .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
  .kasse .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .kasse .woocommerce-MyAccount-navigation { grid-column: 1; }
  .kasse .woocommerce-MyAccount-content { grid-column: 2; }
}
@media (max-width: 899px) {
  .kasse .woocommerce-MyAccount-navigation { margin-bottom: var(--s-6); }
  .kasse .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
}

/* Anmelden und Registrieren (13.10.2026). Das Newsletter-Häkchen von MailPoet
   und der Datenschutzsatz von WooCommerce standen ohne Abstand untereinander
   und lasen sich wie ein Absatz, der Knopf klebte direkt darunter. Die
   Einrückung von 3 px ist die der WooCommerce-Formularzeilen (.form-row),
   damit Text, Felder und Knopf an einer Kante stehen. */
.kasse .woocommerce-form .registration-form-mailpoet { margin: var(--s-4) 0 0; padding-inline: 3px; }
.kasse .woocommerce-form .registration-form-mailpoet label {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: start;
  font-size: .92rem; line-height: 1.5; color: var(--fg-mute);
}
.kasse .woocommerce-form .registration-form-mailpoet input[type='checkbox'] { margin: .3em 0 0; }
.kasse .woocommerce-form .woocommerce-privacy-policy-text {
  margin: var(--s-4) 0 var(--s-5); padding-inline: 3px;
  font-size: .82rem; line-height: 1.55; color: var(--fg-mute);
}
.kasse .woocommerce-form .woocommerce-privacy-policy-text p { margin: 0; }
.kasse .woocommerce-form .lost_password { padding-inline: 3px; }
/* Das Auge im Passwortfeld ist bei WooCommerce ein schwarzes SVG und war in
   der dunklen Fassung auf dem dunklen Feld nicht zu sehen. Derselbe Filter,
   der dort auch das Logo umkehrt. */
.kasse .woocommerce form .show-password-input::before { filter: var(--logo-filter); }