/*
 * Das Warenkorb-Panel des neuen Mockups (wp/mockup/Kaffee Filter.dc.html,
 * der Block ab "Dein Warenkorb").
 *
 * Gebaut wird es nicht selbst: der Mini-Cart-Block von WooCommerce bringt
 * genau dieses Panel schon mit -- Einblenden von rechts, Abdunkeln dahinter,
 * Fokusfalle, gesperrtes Scrollen, Mengensteller, Zwischensumme und die
 * beiden Knoepfe. Hier bekommt es nur das Kleid des Designs.
 *
 * Die Klassen stammen entsprechend aus WooCommerce (mini-cart.css,
 * mini-cart-contents.css). Wo dessen Regeln gleich stark sind, entscheidet die
 * Ladereihenfolge -- deshalb steht davor teils eine zweite Klasse.
 *
 * Tokens: src/pages/design/design.css.
 */


/* ── Flaeche dahinter ────────────────────────────────────────────────── */

.wc-block-components-drawer__screen-overlay {
  background-color : color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
}


/* ── Das Panel ───────────────────────────────────────────────────────── */

/* WooCommerce zieht die Breite aus --drawer-width (Attribut des
   Mini-Cart-Inhalts-Blocks). Die zweite Klasse hebt die Angabe hier darueber,
   ohne die Variable zu verbiegen: die Schliess-Bewegung rechnet mit ihr
   weiter und faehrt das Panel ueber translateX(100%) hinaus. */
.wc-block-mini-cart__drawer.wc-block-components-drawer {
  /* Hoehe der Kopfzeile. Ueberschrift und Schliess-Knopf rechnen beide damit,
     deshalb steht sie hier einmal und nicht zweimal als Zahl im Text. */
  --cart-head : 58px;

  width      : 420px;
  max-width  : 92vw;
  background : var(--color-surface);
  color      : var(--color-text);
  box-shadow : var(--shadow-lg);
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
  display        : flex;
  flex-direction : column;
  height         : 100%;
  background     : var(--color-surface);
  font-family    : var(--font-body);
}


/* ── Fokus ───────────────────────────────────────────────────────────────
   WooCommerce legt um jeden Knopf im Panel einen blauen Ring, und zwar als
   box-shadow und schon bei :focus -- also auch nach einem Mausklick. Das war
   die einzige Farbe im Panel, die nicht aus dem Design kam.

   Der Ring geht weg, der Fokus bleibt: sichtbar wird er ueber :focus-visible
   und den Ring des Design-Systems, denselben wie auf den Seiten. */
.wc-block-mini-cart__drawer .wc-block-components-button:focus {
  box-shadow : none;
}

.wc-block-mini-cart__drawer .wc-block-components-button:focus-visible {
  outline        : 2px solid var(--color-accent);
  outline-offset : 2px;
}


/* ── Kopf ────────────────────────────────────────────────────────────── */

/* Der Meldungs-Bereich steht leer ueber der Ueberschrift und bringt trotzdem
   seinen Aussenabstand mit -- die Kopfzeile begann dadurch 16px zu tief,
   waehrend der Schliess-Knopf am Rand des Panels haengt. Ohne den Abstand
   fangen beide an derselben Kante an. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices {
  margin-block : 0;
}

/* WooCommerce laesst die Ueberschrift unter den Inhalt durchscheinen
   (mask-image, negativer Rand). Das Mockup trennt stattdessen mit einer Linie
   -- also beides zurueck auf Null. Feste Hoehe statt Innenabstand oben und
   unten, damit der Schliess-Knopf daneben rechnerisch mittig sitzt. */
.wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
  box-sizing    : border-box;
  display       : flex;
  align-items   : center;
  gap           : 6px;
  min-height    : var(--cart-head);
  margin        : 0;
  padding       : 0 calc(var(--space-4) + 44px) 0 var(--space-4);  /* Platz fuer das Kreuz */
  border-bottom : 1px solid var(--color-divider);
  mask-image    : none;
  font-family   : var(--font-title);
  font-weight   : var(--font-title-weight);
  font-size     : 19px;
  line-height   : 1.2;
}

/* Das Kreuz sitzt bei WooCommerce absolut in der Ecke des Panels -- hier auf
   die Mitte der Kopfzeile und in die Form der uebrigen Symbolknoepfe. */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
  top             : calc((var(--cart-head) - 36px) / 2);
  right           : var(--space-3);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 36px;
  height          : 36px;
  padding         : 0 !important;
  margin          : 0;
  border-radius   : 999px;
  color           : var(--color-accent) !important;
  opacity         : 1;
}

/* 16px wie die uebrigen Symbole im Mockup; WooCommerce liefert 24px. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
  width  : 16px;
  height : 16px;
}

.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover {
  background : color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
}


/* ── Artikel ─────────────────────────────────────────────────────────── */

.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
  padding : var(--space-4) var(--space-4) 0;
}

.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  border-bottom : 1px solid var(--color-divider);
}

.wc-block-mini-cart__drawer .wc-block-cart-items__row:last-child {
  border-bottom : none;
}

/* Fotos fallen wie im Raster in die warme Flaeche zurueck (.washed). */
.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
  border-radius : var(--radius-sm);
  background    : var(--color-neutral-200);
  filter        : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

/* Der Artikelname ist im Mockup ein Link und traegt damit die Akzentfarbe. */
.wc-block-mini-cart__drawer .wc-block-components-product-name {
  color           : var(--color-accent);
  font-size       : 14px;
  font-weight     : 600;
  line-height     : 1.3;
  text-decoration : none;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name:hover {
  color : var(--color-accent-600);
}

/* Einzelpreis und Angaben zur Ausfuehrung stehen zurueck, die Zeilensumme
   rechts traegt das kraeftige Terrakotta. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata,
.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price {
  font-size : 13px;
  color     : var(--color-neutral-600);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price {
  font-weight : 600;
  color       : var(--color-accent-700);
}

/* Mengensteller: die Pille aus dem Mockup. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
  border        : 1.5px solid var(--color-divider);
  border-radius : 999px;
  background    : transparent;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after {
  content : none;   /* WooCommerce zeichnet den Rahmen sonst ein zweites Mal */
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
  background : transparent;
  color      : var(--color-text);
  font-size  : 13px;
}

/* Plus, Minus und Papierkorb sind im Mockup .btn-ghost -- also Akzentfarbe,
   nicht Textfarbe. */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
  background : transparent;
  color      : var(--color-accent);
  font-size  : 13px;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover {
  color : var(--color-accent-600);
}

/* Der Papierkorb steht bei WooCommerce auf `color: inherit`, und zwar aus
   einer Regel mit vier Klassen und einem Element. Die ganze Kette hier noch
   einmal, sonst entscheidet allein die Ladereihenfolge. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  color : var(--color-accent);
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
  color : var(--color-accent-600);
}


/* ── Fuss ────────────────────────────────────────────────────────────── */

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
  padding    : var(--space-4);
  border-top : 1px solid var(--color-divider);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
  margin-bottom : var(--space-2);
  font-size     : 16px;
  font-weight   : 600;
}

.wc-block-mini-cart__drawer .wc-block-components-totals-item__description {
  font-size : 12px;
  color     : var(--color-neutral-600);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
  gap        : var(--space-2);
  margin-top : var(--space-3);
}

/* Die beiden Knoepfe des Mockups: "Warenkorb anzeigen" schlicht, "Zur Kasse
   gehen" in Akzent. WooCommerce faerbt sie ueber Inline-Stile aus den
   Block-Attributen ein -- daher hier !important. */
/* Polster wie .btn im Design-System (WooCommerce liefert 16px 36px). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
  padding       : var(--space-2) calc(var(--space-3) * 1.2);
  border-radius : 999px;
  font-family   : var(--font-title);
  font-weight   : var(--font-title-weight);
  font-size     : 14px;
  line-height   : 1.2;
}

/* Die Klassen sitzen am <a> selbst, nicht an einer Huelle darum. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
  border           : 1px solid var(--color-divider) !important;
  background-color : transparent !important;
  color            : var(--color-text) !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover {
  background-color : color-mix(in srgb, var(--color-text) 7%, transparent) !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
  border           : 1px solid transparent !important;
  background-color : var(--color-accent) !important;
  color            : var(--color-bg) !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
  background-color : var(--color-accent-600) !important;
}


/* ── Leerer Warenkorb ────────────────────────────────────────────────── */

.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper {
  padding : var(--space-6) var(--space-4);
}

/* Die Meldung steht mittig im leeren Panel -- die Ausrichtung bringt der
   Block selbst mit (has-text-align-center). Hier nur die Groesse des
   Design-Systems statt der 16px des Themes. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper p {
  margin      : 0 0 var(--space-4);
  font-size   : 15px;
  line-height : 1.55;
  color       : var(--color-text);
}

/* Der Knopf traegt seine Klasse am <a> selbst, so wie die beiden im Fuss --
   die Regel hier zielte frueher auf ein <a> *innerhalb* von
   .wc-block-mini-cart__shopping-button und griff deshalb nie. Uebrig blieb
   das schwarze Rechteck, das das Theme jedem .wp-element-button gibt.

   Beide Schreibweisen stehen im Selektor, weil WooCommerce den Block in zwei
   Fassungen ausliefert (MiniCartShoppingButtonBlock.php): in der neueren, die
   hier laeuft, sitzt die Klasse am <a>, in der aelteren an der Huelle darum.

   Anders als im Fuss braucht es kein !important: dort faerbt WooCommerce die
   Knoepfe ueber Inline-Stile aus den Block-Attributen ein, hier kommt die
   Farbe aus einer :where()-Regel des Themes und wiegt entsprechend leicht. */
.wc-block-mini-cart__drawer a.wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button > a {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : var(--space-2) calc(var(--space-3) * 1.2);
  border          : 1px solid transparent;
  border-radius   : 999px;
  background-color: var(--color-accent);
  color           : var(--color-bg);
  font-family     : var(--font-title);
  font-weight     : var(--font-title-weight);
  font-size       : 14px;
  line-height     : 1.2;
  text-decoration : none;
}

.wc-block-mini-cart__drawer a.wc-block-mini-cart__shopping-button:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button > a:hover {
  background-color : var(--color-accent-600);
  color            : var(--color-bg);
}


/* ── Telefon ─────────────────────────────────────────────────────────── */

/* Im Mockup laesst das Panel dort einen schmalen Streifen der Seite stehen. */
@media (max-width: 600px) {
  .wc-block-mini-cart__drawer.wc-block-components-drawer {
    --cart-head : 50px;

    width : 88vw;
  }

  .wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
    padding   : 0 calc(var(--space-3) + 44px) 0 var(--space-3);
    font-size : 16px;
  }

  .wc-block-mini-cart__drawer .wc-block-mini-cart__items,
  .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    padding : var(--space-3);
  }

  /* Das Mockup laesst auf dem Telefon nur "Zur Kasse gehen" stehen. Der Weg
     zur Warenkorb-Seite bleibt ueber das Panel selbst erreichbar. */
  .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
    display : none !important;
  }
}