/* ══════════════════════════════════════════════════════════════════
   css/layer.css — Warenkorb-Layer rechts (js/layer.js, js/cart.js)
   Overlay #new_layer_box_N (.layer_outer) + Panel #header_side_layer (.side_layer)
   Farben/Buttons aus site.css. Der Inhalt (ajax/layer_cart.php) nutzt cart_3.css.
   ══════════════════════════════════════════════════════════════════ */

.layer_outer {
    position: fixed;
    inset: 0;
    background: rgba(17, 18, 20, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.layer_outer.active {
    opacity: 1;
}

.side_layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;              /* Loader mittig — cart.js setzt danach display:block */
    align-items: center;
    justify-content: center;
    width: min(480px, 100vw);
    padding: 20px var(--gutter) 40px;
    background: var(--gesso);
    color: var(--paynes-grey);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -24px 0 48px -24px rgba(17, 18, 20, 0.35);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.side_layer.open {
    transform: translateX(0);
}

/* "Weiter einkaufen" — layer_cart.php setzt color:white inline (xxl-art ist dunkel) */
.side_layer .header_side_layer_close {
    gap: 4px;
    margin: 0 0 12px;
    color: var(--paynes-grey) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--button-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
}

.side_layer .header_side_layer_close span {
    font-size: inherit !important;
}

.side_layer .header_side_layer_close svg {
    width: 20px;
    height: 20px;
}

/* Lade-Kreis während layer_cart.php kommt */
.loader_circle_layer {
    width: 32px;
    height: 32px;
    border: 2px solid var(--rule);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: layer-spin 0.8s linear infinite;
}

@keyframes layer-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Buttons im Layer (layer_cart.php setzt Größen inline — auf unseren Button-Stil zurück) */
.side_layer .button {
    width: 100%;
    gap: 10px;
    padding: var(--button-padding) !important;
    font-size: var(--button-font-size) !important;
}

.side_layer .button_cart_icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.layer-error {
    color: var(--graphite);
}

/* Express-Checkout und Lottie brauchen xxl-art-JS (PayPal, Lottie), das alexzerr nicht lädt —
   die leeren Platzhalter nicht zeigen. Auf den Checkout-Seiten bleibt alles wie es ist. */
.side_layer .express_checkout_title_box,
.side_layer .paypal-express-button:not(.paypal-button-rendered),
.cart-page .express_checkout_title_box,
.cart-page .paypal-express-button:not(.paypal-button-rendered),
.side_layer .lottie:empty,
.cart-page .lottie:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .layer_outer,
    .side_layer {
        transition: none;
    }
}