/**
 * WooCommerce Cart & Checkout – SteamCore Child Theme
 * Basiert auf WooCommerce Block-Klassen (WC 8.x+, Gutenberg Cart/Checkout Block)
 * NICHT Shortcode-basiert – komplett andere HTML-Struktur!
 *
 * Ablage: css/woo-cart.css
 */

/* =============================================================
   DESIGN-TOKEN
   ============================================================= */
:root {
    --sc-black:       #1a1a1a;
    --sc-white:       #ffffff;
    --sc-green:       #3cc43c;
    --sc-grey-light:  #f5f5f5;
    --sc-grey-border: #e0e0e0;
    --sc-grey-text:   #555555;
    --sc-red:         #c0392b;
    --sc-radius:      4px;
    --sc-transition:  0.2s ease;
}

/* =============================================================
   LAYOUT – Content-Breite (Divi-Wrapper-Reste entfernen)
   ============================================================= */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
    max-width: 100%;
    padding: 0;
}

/* =============================================================
   WARENKORB-TABELLE (Block)
   ============================================================= */

/* Tabellen-Header */
.wc-block-cart-items__header {
    border-bottom: 2px solid var(--sc-black) !important;
    padding: 10px 0 !important;
}

.wc-block-cart-items__header span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sc-grey-text) !important;
}

/* Produktzeile */
.wc-block-cart-items .wc-block-cart-item__quantity-wrapper,
.wc-block-cart-items .wc-block-cart-item {
    border-bottom: 1px solid var(--sc-grey-border) !important;
    padding: 16px 0 !important;
}

/* Produktbild */
.wc-block-cart-item__image img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: var(--sc-radius) !important;
    border: 1px solid var(--sc-grey-border) !important;
}

/* Produktname */
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
    font-weight: 600 !important;
    color: var(--sc-black) !important;
    text-decoration: none !important;
}
.wc-block-cart-item__product-name:hover,
.wc-block-components-product-name:hover {
    color: var(--sc-green) !important;
}

/* Varianten */
.wc-block-components-product-metadata__description,
.wc-block-cart-item__product-metadata {
    font-size: 13px !important;
    color: var(--sc-grey-text) !important;
}

/* Preis */
.wc-block-components-product-price,
.wc-block-cart-item__prices .wc-block-components-product-price {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--sc-black) !important;
}

/* =============================================================
   MENGEN-STEUERUNG (Block)
   ============================================================= */

.wc-block-components-quantity-selector {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--sc-grey-border) !important;
    border-radius: var(--sc-radius) !important;
    overflow: hidden !important;
    width: fit-content !important;
    background: var(--sc-white) !important;
}

.wc-block-components-quantity-selector__button {
    width: 32px !important;
    height: 36px !important;
    background: var(--sc-grey-light) !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    color: var(--sc-black) !important;
    transition: background var(--sc-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.wc-block-components-quantity-selector__button:hover {
    background: var(--sc-green) !important;
    color: var(--sc-white) !important;
}

.wc-block-components-quantity-selector__input {
    width: 44px !important;
    height: 36px !important;
    border: none !important;
    border-left: 1px solid var(--sc-grey-border) !important;
    border-right: 1px solid var(--sc-grey-border) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sc-black) !important;
    background: var(--sc-white) !important;
    -moz-appearance: textfield !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* =============================================================
   BUTTONS – WooCommerce Blocks
   Exakte Selektoren aus Browser-Inspektor (WC Block-Struktur)
   ============================================================= */

/* Cross-Sell Produkt-Buttons – gewinnt laut Inspektor mit dieser Kette */
.wp-block-woocommerce-cart .wc-block-components-product-button__button,
.wc-block-cart-cross-sells-product .wc-block-components-product-button__button,
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button,
a.wc-block-components-product-button__button,
a.wp-element-button.add_to_cart_button.wc-block-components-product-button__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 14px !important;
    background: var(--sc-black) !important;
    color: var(--sc-white) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 2px solid var(--sc-black) !important;
    border-radius: var(--sc-radius) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    width: auto !important;
    overflow: hidden !important;
    word-break: normal !important;
}

.wp-block-woocommerce-cart .wc-block-components-product-button__button:hover,
a.wc-block-components-product-button__button:hover {
    background: var(--sc-white) !important;
    color: var(--sc-black) !important;
}

/* Primary CTA: "Weiter zur Kasse" */
.wc-block-cart__submit-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: var(--sc-green) !important;
    border: 2px solid var(--sc-green) !important;
    border-radius: var(--sc-radius) !important;
    color: var(--sc-white) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.wc-block-cart__submit-button:hover {
    background: var(--sc-black) !important;
    border-color: var(--sc-black) !important;
    color: var(--sc-white) !important;
}

/* "Bestellung aufgeben" im Checkout */
.wc-block-checkout__place-order button {
    width: 100% !important;
    height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: var(--sc-green) !important;
    border: 2px solid var(--sc-green) !important;
    border-radius: var(--sc-radius) !important;
    color: var(--sc-white) !important;
    cursor: pointer !important;
}

/* =============================================================
   WARENKORB-SUMME (Block)
   ============================================================= */

.wc-block-cart__totals-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sc-grey-text) !important;
    border-bottom: 1px solid var(--sc-grey-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.wc-block-components-totals-item {
    border-bottom: 1px solid var(--sc-grey-border) !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
}

.wc-block-components-totals-item__label {
    font-weight: 600 !important;
    color: var(--sc-black) !important;
}

.wc-block-components-totals-item__value {
    font-weight: 600 !important;
    color: var(--sc-black) !important;
}

/* Gesamtsumme */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* MwSt.-Hinweis (Germanized) */
.wc-block-components-totals-taxes,
.wc-block-components-tax-summary,
.wc-block-components-totals-item__description {
    font-size: 12px !important;
    color: var(--sc-grey-text) !important;
}

/* Gutschein */
.wc-block-components-totals-coupon__input input {
    height: 42px !important;
    border: 1px solid var(--sc-grey-border) !important;
    border-radius: var(--sc-radius) !important;
    padding: 0 12px !important;
    font-size: 14px !important;
}
.wc-block-components-totals-coupon__input input:focus {
    outline: 2px solid var(--sc-green) !important;
    border-color: transparent !important;
}

/* =============================================================
   CROSS-SELLS (Block) – kompakte horizontale Liste
   ============================================================= */

.wc-block-cart-cross-sells {
    margin-top: 32px !important;
    border-top: 2px solid var(--sc-black) !important;
    padding-top: 16px !important;
}

/* Überschrift */
.wc-block-cart-cross-sells__title,
.wc-block-cart-cross-sells h2 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sc-grey-text) !important;
    margin-bottom: 12px !important;
}

/* Grid → horizontale scrollbare Liste */
.wc-block-cart-cross-sells-products,
.wc-block-grid__products.wc-block-cart-cross-sells-products {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Einzelne Karte */
.wc-block-cart-cross-sells-product,
.wc-block-grid__product.wc-block-cart-cross-sells-product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    gap: 12px !important;
    border: 1px solid var(--sc-grey-border) !important;
    border-radius: var(--sc-radius) !important;
    padding: 10px !important;
    background: var(--sc-white) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: box-shadow var(--sc-transition) !important;
}
.wc-block-cart-cross-sells-product:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.09) !important;
}

/* Produktbild – 72×72 wie Warenkorb-Thumbnail */
.wc-block-components-product-image img,
.wc-block-cart-cross-sells-product .wc-block-components-product-image img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    object-fit: cover !important;
    border-radius: var(--sc-radius) !important;
    border: 1px solid var(--sc-grey-border) !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Produkttitel */
.wc-block-cart-cross-sells-product__title,
.wc-block-cart-cross-sells-product .wc-block-components-product-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sc-black) !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Preis */
.wc-block-cart-cross-sells-product .wc-block-components-product-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Button in Cross-Sell-Karte */
.wc-block-cart-cross-sells-product .wc-block-components-product-button .wc-block-components-button,
.wc-block-cart-cross-sells-product__button .wc-block-components-button {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* =============================================================
   CHECKOUT – Formular (Block)
   ============================================================= */

/* Abschnitts-Überschriften */
.wc-block-checkout__step-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--sc-grey-text) !important;
    border-bottom: 2px solid var(--sc-black) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Input-Felder */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--sc-grey-border) !important;
    border-radius: var(--sc-radius) !important;
    font-size: 14px !important;
    color: var(--sc-black) !important;
    background: var(--sc-white) !important;
}
.wc-block-components-textarea textarea {
    height: auto !important;
    padding: 10px 12px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
    outline: 2px solid var(--sc-green) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Labels */
.wc-block-components-text-input label,
.wc-block-components-select label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--sc-grey-text) !important;
}

/* Bestellübersicht */
.wc-block-components-order-summary {
    background: var(--sc-grey-light) !important;
    border: 1px solid var(--sc-grey-border) !important;
    border-radius: var(--sc-radius) !important;
    padding: 20px !important;
}

/* Zahlungsarten */
.wc-block-components-radio-control-accordion-option {
    border-bottom: 1px solid var(--sc-grey-border) !important;
    padding: 10px 0 !important;
}
.wc-block-components-radio-control-accordion-option label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sc-black) !important;
}

/* =============================================================
   RESPONSIVE – Mobile
   ============================================================= */

@media (max-width: 767px) {

    /* Cross-Sells: Karten etwas schmaler auf Mobile */
    .wc-block-cart-cross-sells-product,
    .wc-block-grid__product.wc-block-cart-cross-sells-product {
        flex: 0 0 220px !important;
        width: 220px !important;
    }
}