/* WooCommerce-Hinweise im Shop-Design (inc/hinweise.php, body.wcbr-hw) – 21.10.2026 */

/* ---------- 1. Klassische Hinweise: Karte mit Symbol, Farbe je Art ---------- */
body.wcbr-hw .woocommerce-message,
body.wcbr-hw .woocommerce-info,
body.wcbr-hw .woocommerce-error,
html body.wcbr-hw.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
html body.wcbr-hw.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
html body.wcbr-hw.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
    position: relative; display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 0 0 16px !important; padding: 14px 16px 14px 56px !important; list-style: none !important;
    border: 1px solid #e6dbd2 !important; border-radius: 14px !important; background: #fdfaf7 !important; box-shadow: none !important;
    color: #3a2b2b !important; font-size: 15px; line-height: 1.5; font-variant-numeric: lining-nums;
}
html body.wcbr-hw:not(#wcbr) .woocommerce-message { background: #f5f9f0 !important; border-color: #d4e6c0 !important; border-left-width: 1px !important; }
html body.wcbr-hw:not(#wcbr) .woocommerce-info { border-left-width: 1px !important; border-left-color: #e6dbd2 !important; }
html body.wcbr-hw:not(#wcbr) .woocommerce-error { background: #fdf3f6 !important; border-color: #efc8d4 !important; border-left-width: 1px !important; }

/* Symbol links im Kreis (statt WooCommerce-Iconfont) */
body.wcbr-hw .woocommerce-message::before,
body.wcbr-hw .woocommerce-info::before,
body.wcbr-hw .woocommerce-error::before {
    content: "" !important; position: absolute !important; left: 16px !important; top: 14px !important; width: 28px; height: 28px;
    border-radius: 50%; background-color: #8e153c; background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
    font-family: inherit !important; color: transparent !important;
}
body.wcbr-hw .woocommerce-message::before {
    background-color: #4da209;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
body.wcbr-hw .woocommerce-info::before {
    background-color: #6b5e58;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7' r='.6' fill='%23fff'/%3E%3C/svg%3E");
}
body.wcbr-hw .woocommerce-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Ccircle cx='12' cy='18' r='.6' fill='%23fff'/%3E%3C/svg%3E");
}
/* Woo-Iconfont der Kasse/Konto ausblenden, falls Astra sie zusätzlich zeichnet */
body.wcbr-hw .woocommerce-message::after,
body.wcbr-hw .woocommerce-info::after,
body.wcbr-hw .woocommerce-error::after { content: none !important; }

/* Fehlerliste (mehrere Fehler als <li>) */
body.wcbr-hw ul.woocommerce-error { flex-direction: column; align-items: flex-start; gap: 4px; }
body.wcbr-hw ul.woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; }

body.wcbr-hw .woocommerce-message a:not(.button),
body.wcbr-hw .woocommerce-info a:not(.button),
body.wcbr-hw .woocommerce-error a:not(.button) { color: #8e153c !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Knopf im Hinweis (z. B. „Warenkorb anzeigen“, „Rückgängig“) rechts als Pille; Woo setzt ihn VOR den Text */
body.wcbr-hw .woocommerce-message .button,
body.wcbr-hw .woocommerce-info .button,
body.wcbr-hw .woocommerce-error .button {
    order: 2; margin: 0 0 0 auto !important; float: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 18px !important; border-radius: 999px !important; white-space: nowrap;
    background: #fff !important; color: #8e153c !important; border: 1.5px solid #8e153c !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.wcbr-hw .woocommerce-message .button:hover,
body.wcbr-hw .woocommerce-info .button:hover,
body.wcbr-hw .woocommerce-error .button:hover { background: #8e153c !important; color: #fff !important; }

@media (max-width: 640px) {
    body.wcbr-hw .woocommerce-message,
    body.wcbr-hw .woocommerce-info,
    body.wcbr-hw .woocommerce-error { padding: 12px 14px 12px 52px !important; font-size: 14px; }
    body.wcbr-hw .woocommerce-message::before,
    body.wcbr-hw .woocommerce-info::before,
    body.wcbr-hw .woocommerce-error::before { left: 14px !important; top: 12px !important; }
    /* Knopf unter den Text, volle Breite */
    body.wcbr-hw .woocommerce-message .button,
    body.wcbr-hw .woocommerce-info .button,
    body.wcbr-hw .woocommerce-error .button { flex: 1 1 100%; margin: 2px 0 0 !important; }
}

/* ---------- 2. Block-Warenkorb/-Kasse: nur Farben und Rundung (Markup bleibt unberührt) ---------- */
body.wcbr-hw .wc-block-components-notice-banner {
    border-radius: 14px !important; border: 1px solid #e6dbd2 !important; background: #fdfaf7 !important; color: #3a2b2b !important;
    font-size: 15px; box-shadow: none !important;
}
body.wcbr-hw .wc-block-components-notice-banner.is-success { background: #f5f9f0 !important; border-color: #d4e6c0 !important; }
body.wcbr-hw .wc-block-components-notice-banner.is-success > svg { background-color: #4da209 !important; }
body.wcbr-hw .wc-block-components-notice-banner.is-error { background: #fdf3f6 !important; border-color: #efc8d4 !important; }
body.wcbr-hw .wc-block-components-notice-banner.is-error > svg { background-color: #8e153c !important; }
body.wcbr-hw .wc-block-components-notice-banner.is-info > svg,
body.wcbr-hw .wc-block-components-notice-banner.is-warning > svg { background-color: #6b5e58 !important; }

/* ---------- 3. Fenster „Im Warenkorb“ ---------- */
.wcbr-toast {
    --wcbr-toast-unten: 0px;
    position: fixed; z-index: 99990; right: 24px; top: 96px; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
    background: #fff; color: #3a2b2b; border: 1px solid #e6dbd2; border-radius: 16px; padding: 14px 16px 16px;
    box-shadow: 0 18px 48px rgba(58, 43, 43, .18); font-size: 15px; line-height: 1.4;
    opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease;
}
.wcbr-toast[hidden] { display: none !important; }
.wcbr-toast--auf { opacity: 1; transform: none; }
.wcbr-toast__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wcbr-toast__ok { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #4da209; color: #fff; flex: none; }
.wcbr-toast__titel { font-weight: 700; font-size: 15px; flex: 1; }
.wcbr-toast__zu {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -8px -6px 0;
    border: 0 !important; border-radius: 50%; background: transparent !important; color: #6b5e58 !important; cursor: pointer; padding: 0 !important; box-shadow: none !important;
}
.wcbr-toast__zu:hover, .wcbr-toast__zu:focus-visible { background: #f7f0e9 !important; color: #3a2b2b !important; }
.wcbr-toast__produkt { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wcbr-toast__bild { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #fdfaf7; border: 1px solid #ece1d8; }
.wcbr-toast__bild[hidden] { display: none; }
.wcbr-toast__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wcbr-toast__name { font-weight: 600; color: #8e153c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcbr-toast__knoepfe { display: flex; gap: 8px; }
.wcbr-toast__weiter, .wcbr-toast__wk {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px !important;
    border-radius: 999px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important;
    text-decoration: none !important; cursor: pointer; white-space: nowrap; box-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important;
}
.wcbr-toast__weiter { background: #fff !important; color: #3a2b2b !important; border: 1px solid #e3d7cc !important; }
.wcbr-toast__weiter:hover { border-color: #3a2b2b !important; }
.wcbr-toast__wk { background: #4da209 !important; color: #fff !important; border: 0 !important; }
.wcbr-toast__wk:hover { background: #3f8a07 !important; }
.wcbr-toast button:focus-visible, .wcbr-toast a:focus-visible { outline: 2px solid #8e153c; outline-offset: 2px; }

/* Handy/Tablet: unten, volle Breite, über festen Leisten (Abstand setzt das Skript) */
@media (max-width: 767px) {
    .wcbr-toast {
        left: 12px; right: 12px; top: auto; width: auto; max-width: none;
        bottom: calc(12px + var(--wcbr-toast-unten) + env(safe-area-inset-bottom, 0px));
        transform: translateY(12px); padding: 12px 14px 14px;
    }
    .wcbr-toast--auf { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wcbr-toast { transition: none; transform: none; }
}

/* Gratisversand-Zähler im Fenster (nur Desktop, Zahl aus dem Mini-Warenkorb-Fragment) */
.wcbr-toast__gv { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: #fdfaf7; border: 1px solid #ece1d8; font-size: 14px; }
.wcbr-toast__gv[hidden] { display: none; }
.wcbr-toast__gvtext { display: block; }
.wcbr-toast__gvtext strong { color: #8e153c; font-weight: 700; }
.wcbr-toast__gvtext--ok strong { color: #2f6a05; }
.wcbr-toast__gvbalken { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: #ece1d8; overflow: hidden; }
.wcbr-toast__gvbalken span { display: block; height: 100%; background: #8e153c; border-radius: 99px; }
.wcbr-toast__kurzlink { display: none; }

/* Handy: schmale Leiste – Haken, Name, „Ansehen“, Schließen; kein Bild, keine Knöpfe */
.wcbr-toast.wcbr-toast--kurz { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px; min-height: 52px; }
.wcbr-toast--kurz .wcbr-toast__kopf { display: contents; }
.wcbr-toast--kurz .wcbr-toast__ok { order: 0; }
.wcbr-toast--kurz .wcbr-toast__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wcbr-toast--kurz .wcbr-toast__zu { order: 3; margin: 0; }
.wcbr-toast--kurz .wcbr-toast__produkt { order: 1; flex: 1; min-width: 0; margin: 0; gap: 10px; }
.wcbr-toast--kurz .wcbr-toast__bild,
.wcbr-toast--kurz .wcbr-toast__knoepfe,
.wcbr-toast--kurz .wcbr-toast__gv { display: none !important; }
/* Zwei Zeilen: „Im Warenkorb“ fett, darunter der Name einzeilig gekürzt */
.wcbr-toast--kurz .wcbr-toast__name { flex: 1; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.35; color: #6b5e58; font-weight: 500; }
.wcbr-toast--kurz .wcbr-toast__name::before { content: "Im Warenkorb"; display: block; font-size: 14px; font-weight: 700; color: #2f6a05; }
.wcbr-toast--kurz .wcbr-toast__kurzlink {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; flex: none;
    background: #4da209; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important;
}
.wcbr-toast--kurz .wcbr-toast__zu { width: 32px; height: 32px; }

/* Zahl am Warenkorb-Symbol hüpft kurz */
@keyframes wcbr-hupf { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.ast-icon-shopping-cart.wcbr-hupf::after { animation: wcbr-hupf .45s ease; }
@media (prefers-reduced-motion: reduce) { .ast-icon-shopping-cart.wcbr-hupf::after { animation: none; } }

/* WooCommerce hängt nach AJAX-„In den Warenkorb“ den Link „Warenkorb anzeigen“ neben den Knopf – das verschob das Layout
   (Produktseite, Marcel 22.10.2026). Das Fenster „Im Warenkorb“ bietet „Zum Warenkorb“ schon an (Desktop und Handy). */
.wcbr-hw a.added_to_cart.wc-forward { display: none !important; }