/*
==========================================================
Tiny Werk Order Center

Datei:
twoc-cart.css

Aufgabe:
Darstellung der Tiny-Werk-Produktbilder im Warenkorb
==========================================================
*/

/*
==========================================================
Tiny Werk – Warenkorbbilder
Überschreibt WooCommerce- und Theme-Vorgaben
==========================================================
*/

/* Thumbnail-Spalte niemals ausblenden */
body.woocommerce-cart
table.shop_table.cart
th.product-thumbnail,
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail {
    display: table-cell !important;
    visibility: visible !important;
    width: 150px !important;
    min-width: 150px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Beide Vorschaubilder nebeneinander */
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail
.twoc-cart-images {
    display: grid !important;
    grid-template-columns: 64px 64px !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    width: 136px !important;
    max-width: 136px !important;
}

/* Einzelne Zusatzprodukte */
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail
.twoc-cart-images_single {
    grid-template-columns: 64px !important;
    width: 64px !important;
}

/* Bildcontainer */
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail
.twoc-cart-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
}

/* Beide Bilder selbst */
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail
.twoc-cart-image,
body.woocommerce-cart
table.shop_table.cart
td.product-thumbnail
.twoc-cart-image-wrap img {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    object-fit: contain !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 700px) {
    body.woocommerce-cart
    table.shop_table.cart
    th.product-thumbnail,
    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail {
        display: table-cell !important;
        width: 116px !important;
        min-width: 116px !important;
    }

    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail
    .twoc-cart-images {
        grid-template-columns: 52px 52px !important;
        gap: 6px !important;
        width: 110px !important;
        max-width: 110px !important;
    }

    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail
    .twoc-cart-images_single {
        grid-template-columns: 52px !important;
        width: 52px !important;
    }

    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail
    .twoc-cart-image-wrap,
    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail
    .twoc-cart-image,
    body.woocommerce-cart
    table.shop_table.cart
    td.product-thumbnail
    .twoc-cart-image-wrap img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
    }
}
.twoc-clear-cart {
    margin-left: 0.5rem;
}

@media (max-width: 700px) {
    .woocommerce-cart-form__contents .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .twoc-clear-cart {
        margin-left: 0;
    }
}


/*
==========================================================
Tiny Werk – klassische Kassenübersicht
==========================================================
*/

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-checkout-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-checkout-item_images {
    flex: 0 0 auto;
}

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-checkout-item_name {
    min-width: 0;
    font-weight: 600;
}

/* Die Warenkorbregeln waren bisher auf body.woocommerce-cart begrenzt. */
body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-cart-images {
    display: grid !important;
    grid-template-columns: repeat(2, 52px) !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: max-content !important;
}

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-cart-images_single {
    grid-template-columns: 52px !important;
}

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-cart-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
}

body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-cart-image,
body.woocommerce-checkout
.woocommerce-checkout-review-order-table
.twoc-cart-image-wrap img {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-checkout-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-cart-images {
        grid-template-columns: repeat(2, 46px) !important;
    }

    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-cart-images_single {
        grid-template-columns: 46px !important;
    }

    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-cart-image-wrap,
    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-cart-image,
    body.woocommerce-checkout
    .woocommerce-checkout-review-order-table
    .twoc-cart-image-wrap img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
    }
}
/*
==========================================================
Tiny Werk Mini-Cart
Motiv + Button-Ausführung
==========================================================
*/

/*
 * WooCommerce baut jede Position als Grid auf.
 * Erste Spalte bekommt genug Platz für beide Bilder.
 */
.wc-block-mini-cart__items .wc-block-cart-items__row,
.wc-block-mini-cart-items .wc-block-cart-items__row {
    grid-template-columns: 144px minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
}

/*
 * Bildzelle.
 */
.wc-block-mini-cart__items .wc-block-cart-item__image,
.wc-block-mini-cart-items .wc-block-cart-item__image {
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;

    padding: 0 !important;
    vertical-align: top !important;
    overflow: visible !important;
}

/*
 * WooCommerce besitzt zusätzlich ein verstecktes Fallbackbild.
 * Das darf auf keinen Fall wieder sichtbar werden.
 */
.wc-block-mini-cart__items .wc-block-cart-item__image > img[hidden],
.wc-block-mini-cart-items .wc-block-cart-item__image > img[hidden] {
    display: none !important;
}

/*
 * Unser gemeinsamer Container für Motiv + Ausführung.
 */
.twoc-mini-cart-images {
    display: grid !important;
    grid-template-columns: 64px 64px !important;
    gap: 8px !important;
    align-items: start !important;

    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Motivbild.
 */
.twoc-mini-cart-motif {
    display: block !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}

/*
 * WooCommerce-Link um Nadel/Magnet/etc.
 */
.twoc-mini-cart-images > a {
    display: block !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Ausführungsbild.
 */
.twoc-mini-cart-images > a > img {
    display: block !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}

/*
 * Textspalte darf nicht unter die Bilder rutschen.
 */
.wc-block-mini-cart__items .wc-block-cart-item__product,
.wc-block-mini-cart-items .wc-block-cart-item__product {
    min-width: 0 !important;
}

/*
 * Warenkorb leeren.
 */
.twoc-mini-cart-clear {
    width: 100%;
    margin-bottom: 12px;
    justify-content: center;
}