/**
 * Warenkorb, Kasse und Kontobereich an die SVE-Handschrift angleichen
 *
 * Entscheidung vom 10.10.2026: Der Kaufweg bleibt HELL. Angeglichen werden
 * Schrift, Orange als Akzent, Knopfform, Rundungen und Abstände — nicht der
 * Aufbau der Seiten.
 *
 * Warum nicht dunkel wie der Rest der Website:
 *   - Eingebettete Zahlungsfelder (PayPal und Co.) sind fremde Rahmen und
 *     selbst hell. Von aussen laesst sich daran nichts aendern.
 *   - WooCommerce-Meldungen sind hell. Jede einzeln dunkel nachzuziehen ist
 *     Flickwerk, das beim naechsten Update wieder aufgeht.
 *   - An der Stelle, an der Geld fliesst, zaehlt Lesbarkeit mehr als
 *     Stilkonsequenz.
 *
 * WICHTIG zu Orange: #e17a00 hat auf Weiss nur 2,9:1 und taugt deshalb NICHT
 * als Textfarbe. Es wird nur als Flaeche und Linie benutzt; auf orangem
 * Grund steht dunkler Text (#212121, 5,4:1), nicht weisser.
 *
 * Diese Datei laedt nur auf Warenkorb, Kasse und Kontoseiten und laesst sich
 * komplett abschalten:
 *     add_filter('sve_enable_shop_styles', '__return_false');
 */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
    --sve-paper: #ffffff;
    --sve-sand: #f6f7f9;
    --sve-line: #e3e7eb;
    --sve-line-2: #eef1f4;
    --sve-ink: #1f2a33;
    --sve-ink-2: #5a6470;
    --sve-ink-3: #8a949e;
    --sve-slate: #34495e;
    --sve-accent: #e17a00;
    --sve-accent-hover: #f08800;
    --sve-on-accent: #212121;
    --sve-ok: #2f7d4a;
    --sve-ok-bg: #eaf5ee;
}

/* ---------- Ueberschriften ---------- */
.woocommerce-cart .entry-content h1,
.woocommerce-checkout .entry-content h1,
.woocommerce-cart h2,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
    color: var(--sve-slate);
    letter-spacing: -.01em;
}

/* ---------- Knoepfe ----------
   Dunkler Text auf Orange, nicht weisser: nur so bleibt die Beschriftung
   lesbar (5,4:1 statt 2,9:1). */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-checkout #place_order {
    background: var(--sve-accent);
    color: var(--sve-on-accent);
    font-weight: 700;
    border: 0;
    border-radius: 11px;
    padding: 15px 28px;
    line-height: 1.3;
    text-shadow: none;
    transition: background .15s;
}
.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-checkout #place_order:hover {
    background: var(--sve-accent-hover);
    color: var(--sve-on-accent);
}

.woocommerce-checkout #place_order {
    width: 100%;
    font-size: 19px;
    padding: 18px 32px;
}

/* Zweitrangige Knoepfe zurueckhaltend */
.woocommerce-cart .woocommerce a.button.wc-backward,
.woocommerce-account .woocommerce a.button.wc-backward {
    background: transparent;
    color: var(--sve-slate);
    border: 1px solid #c6ced6;
    font-weight: 600;
}
.woocommerce-cart .woocommerce a.button.wc-backward:hover,
.woocommerce-account .woocommerce a.button.wc-backward:hover {
    background: transparent;
    border-color: var(--sve-slate);
}

/* ---------- Formularfelder ---------- */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-cart .woocommerce form .form-row input.input-text {
    border: 1px solid #c6ced6;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--sve-ink);
    background: var(--sve-paper);
    box-shadow: none;
}
.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus,
.woocommerce-account .woocommerce form .form-row input.input-text:focus {
    outline: 3px solid var(--sve-accent);
    outline-offset: 1px;
    border-color: #c6ced6;
}
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-account .woocommerce form .form-row label {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--sve-ink);
    margin-bottom: 6px;
}
.woocommerce-checkout .woocommerce form .form-row .required {
    color: var(--sve-ink-2);
    text-decoration: none;
}

/* ---------- Kaestchen: Rechnungsdaten, Bestellung, Zahlung ---------- */
.woocommerce-checkout .woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce form.checkout_coupon,
.woocommerce-cart .woocommerce .cart_totals,
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--sve-paper);
    border: 1px solid var(--sve-line);
    border-radius: 14px;
    padding: 28px 30px;
}
.woocommerce-checkout .woocommerce-checkout #customer_details {
    margin-bottom: 20px;
}

/* Bestelluebersicht */
.woocommerce-checkout .woocommerce table.shop_table,
.woocommerce-cart .woocommerce table.shop_table {
    border: 0;
    border-radius: 0;
    font-size: 15.5px;
}
.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table td,
.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-cart .woocommerce table.shop_table td {
    border-top: 0;
    border-bottom: 1px solid var(--sve-line-2);
    padding: 14px 10px;
    color: var(--sve-ink);
}
.woocommerce-checkout .woocommerce table.shop_table thead th,
.woocommerce-cart .woocommerce table.shop_table thead th {
    font-size: 12.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sve-ink-2);
    font-weight: 700;
}
.woocommerce-checkout .woocommerce table.shop_table tfoot .order-total th,
.woocommerce-checkout .woocommerce table.shop_table tfoot .order-total td,
.woocommerce-cart .woocommerce table.shop_table tfoot .order-total th,
.woocommerce-cart .woocommerce table.shop_table tfoot .order-total td {
    border-bottom: 0;
    border-top: 1px solid var(--sve-line);
    padding-top: 16px;
    font-size: 18px;
}
.woocommerce-checkout .woocommerce table.shop_table tfoot .order-total td .amount,
.woocommerce-cart .woocommerce table.shop_table tfoot .order-total td .amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--sve-slate);
    white-space: nowrap;
}
/* Rabattzeilen gruen — der Kunde soll sehen, dass etwas abgezogen wurde */
.woocommerce-checkout .woocommerce table.shop_table .cart-discount td,
.woocommerce-cart .woocommerce table.shop_table .cart-discount td {
    color: var(--sve-ok);
    font-weight: 600;
}

/* ---------- Zahlungsarten ---------- */
.woocommerce-checkout .woocommerce #payment {
    background: transparent;
    border-radius: 0;
}
.woocommerce-checkout .woocommerce #payment ul.payment_methods {
    border-bottom: 0;
    padding: 0;
    margin: 0 0 18px;
}
.woocommerce-checkout .woocommerce #payment ul.payment_methods li {
    border: 1px solid var(--sve-line);
    border-radius: 11px;
    padding: 16px 18px;
    margin-bottom: 10px;
    list-style: none;
    background: var(--sve-paper);
}
.woocommerce-checkout .woocommerce #payment ul.payment_methods li label {
    font-weight: 600;
    font-size: 16px;
}
/* Das eingebettete Zahlungsfeld gehoert dem Anbieter — nur der Rahmen
   drumherum wird angefasst, der Inhalt bleibt wie er ist. */
.woocommerce-checkout .woocommerce #payment div.payment_box {
    background: var(--sve-sand);
    border: 1px solid var(--sve-line);
    border-radius: 10px;
    color: var(--sve-ink-2);
    font-size: 14.5px;
    margin-top: 12px;
}
.woocommerce-checkout .woocommerce #payment div.payment_box::before {
    display: none;
}
.woocommerce-checkout .woocommerce #payment div.form-row.place-order {
    padding: 18px 0 0;
}

/* ---------- Hinweise und Meldungen ---------- */
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-account .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
    border-top: 0;
    border-left: 4px solid var(--sve-accent);
    border-radius: 0 12px 12px 0;
    background: var(--sve-sand);
    color: var(--sve-ink);
    padding: 16px 20px;
    font-size: 15.5px;
    line-height: 1.55;
}
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-account .woocommerce-message {
    border-left-color: var(--sve-ok);
    background: var(--sve-ok-bg);
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
    border-left-color: #b3391f;
    background: #fdeeea;
}
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-account .woocommerce-message::before {
    display: none;
}

/* ---------- Kontobereich ---------- */

/* Menü links: schmal, kompakt und beim Scrollen stehend. Bricks gibt den
   Menülinks sonst eine Zeilenhöhe von 60px, jeder Punkt wird 84px hoch. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    width: 250px;
    min-width: 0; /* Bricks setzt sonst 25 % */
    align-self: flex-start;
    position: sticky;
    top: 24px;
    background: var(--sve-paper);
    border: 1px solid var(--sve-line);
    border-radius: 14px;
    padding: 10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--sve-ink);
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1.35;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--sve-line-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--sve-ink-2);
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Inhalt rechts als eigener Scrollbereich, statt die ganze Seite in die
   Höhe wachsen zu lassen. Nur am Desktop: Auf Tablet und Handy wären zwei
   ineinander scrollende Flächen mühsam zu bedienen. */
@media (min-width: 992px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        max-height: max(520px, calc(100vh - 180px));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #c6ced6 transparent;
    }
    /* Tabellenkopf bleibt beim Scrollen oben stehen. -28px = Innenabstand
       des Scrollbereichs, damit der Kopf an der Kante klebt. */
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
        position: sticky;
        top: -28px;
        z-index: 1;
        background: var(--sve-paper);
        box-shadow: inset 0 -1px 0 var(--sve-line);
    }
}

/* Bestellungen, Abos, Downloads: kompakte Tabelle */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    font-size: 15.5px;
    margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sve-line-2);
    padding: 14px 12px;
    color: var(--sve-ink);
    vertical-align: middle;
    line-height: 1.45;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sve-ink-2);
    font-weight: 700;
    white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover > * {
    background: var(--sve-sand);
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    color: var(--sve-slate);
}
.woocommerce-account .woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-orders-table__cell-order-total,
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    white-space: nowrap;
}

/* Knöpfe in Tabellen klein und nebeneinander statt gestapelt in voller
   Kassengröße. „Ansehen" bleibt orange, Rechnungen sind zweitrangig. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a.button {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    margin: 3px 6px 3px 0;
    font-size: 14px;
    border-radius: 8px;
    white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a.button:not(.view) {
    background: transparent;
    color: var(--sve-slate);
    border: 1px solid #c6ced6;
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a.button:not(.view):hover {
    background: transparent;
    border-color: var(--sve-slate);
    color: var(--sve-slate);
}

/* Seitenwechsel unter der Bestellliste */
.woocommerce-account .woocommerce-pagination {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

/* Tablet und Handy: Menü oben über die ganze Breite, nicht stehend */
@media (max-width: 991px) {
    .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
        flex-wrap: wrap;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        flex-basis: 100%;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex-basis: auto;
        width: 100%;
        position: static;
    }
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--sve-sand);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--sve-accent);
    color: var(--sve-on-accent);
    font-weight: 700;
}

@media (max-width: 760px) {
    .woocommerce-checkout .woocommerce-checkout #customer_details,
    .woocommerce-checkout .woocommerce-checkout #order_review,
    .woocommerce-cart .woocommerce .cart_totals,
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 22px;
    }
}