/* Warenkorb-specific layout. Loaded after the legacy inline mobile rules. */
#main.warenkorb .gt-cart-quantity,
#main.warenkorb .gt-cart-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

#main.warenkorb .gt-cart-quantity {
    justify-content: center;
}

#main.warenkorb .gt-cart-quantity-label,
#main.warenkorb .gt-cart-more {
    display: none;
}

#main.warenkorb .gt-cart-actions {
    flex-wrap: wrap;
    margin-top: 5px;
}

@media (max-width: 760px) {
    #main.warenkorb #cart {
        display: block !important;
        width: calc(100% - 16px) !important;
        max-width: 520px !important;
        margin: 0 auto 14px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart thead {
        display: none !important;
    }

    #main.warenkorb #cart tbody {
        display: block !important;
        width: 100% !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item {
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr) auto !important;
        grid-template-areas:
            "quantity quantity subtotal"
            "media info info" !important;
        gap: 10px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 11px !important;
        padding: 11px !important;
        overflow: hidden !important;
        background: #fffdf7 !important;
        border: 1px solid #d9a43b !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(74, 43, 6, .17) !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.anzahl {
        grid-area: quantity !important;
        font-size: 14px !important;
        font-weight: normal !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.anzahl:before {
        display: none !important;
        content: none !important;
    }

    #main.warenkorb .gt-cart-quantity {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        min-height: 36px !important;
    }

    #main.warenkorb .gt-cart-quantity-label {
        display: inline-block !important;
        margin-right: 1px !important;
        color: #4a2b06 !important;
        font-size: 13px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
    }

    #main.warenkorb #cart .gt-cart-qty-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #155171 !important;
        background: #eef8fc !important;
        border: 1px solid #78aeca !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    #main.warenkorb #cart .gt-cart-qty-button .ui-icon {
        float: none !important;
        margin: 0 !important;
    }

    #main.warenkorb #cart .gt-cart-qty-button:focus,
    #main.warenkorb #cart .gt-cart-qty-button:hover {
        outline: 2px solid #f39b1f !important;
        outline-offset: 1px !important;
    }

    #main.warenkorb #cart .gt-cart-qty-value {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        min-width: 24px !important;
        height: 34px !important;
        margin: 0 !important;
        color: #2d210f !important;
        font-size: 17px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-subtotal {
        grid-area: subtotal !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        align-self: center !important;
        color: #2f1600 !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-subtotal:before {
        content: attr(data-label) ":" !important;
        color: #6b4a1f !important;
        font-size: 12px !important;
        font-weight: normal !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-media {
        grid-area: media !important;
        display: grid !important;
        grid-template-columns: repeat(2, 36px) !important;
        grid-auto-rows: 36px !important;
        align-content: start !important;
        gap: 4px !important;
        width: 76px !important;
        max-width: 76px !important;
    }

    #main.warenkorb #cart .gt-cart-media img {
        display: block !important;
        float: none !important;
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        padding: 2px !important;
        object-fit: contain !important;
        background: #fff !important;
        border: 1px solid #dbe5e9 !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart .gt-cart-media img.gt-cart-main-image {
        grid-column: 1 / -1 !important;
        grid-row: 1 / span 2 !important;
        width: 76px !important;
        max-width: 76px !important;
        height: 76px !important;
        max-height: 76px !important;
        padding: 3px !important;
    }

    #main.warenkorb #cart .gt-cart-media img.gt-cart-product-thumb-extra {
        display: none !important;
    }

    #main.warenkorb #cart .gt-cart-more {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        color: #fff !important;
        background: #2b7fab !important;
        border-radius: 5px !important;
        font: bold 12px/1 Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-info {
        grid-area: info !important;
        overflow: visible !important;
    }

    #main.warenkorb #cart .gt-cart-title {
        margin: 0 0 5px !important;
        color: #3d2407 !important;
        font-size: 19px !important;
        line-height: 1.22 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    #main.warenkorb #cart .gt-cart-description {
        display: -webkit-box !important;
        margin: 0 0 6px !important;
        overflow: hidden !important;
        color: #4a4035 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    #main.warenkorb #cart .gt-cart-unit-price {
        margin: 5px 0 0 !important;
        color: #5a4630 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    #main.warenkorb #cart .gt-cart-actions {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 9px 0 0 !important;
    }

    #main.warenkorb #cart .gt-cart-actions .ui-button,
    #main.warenkorb #cart .gt-cart-actions .remove,
    #main.warenkorb #cart .gt-cart-actions .copy,
    #main.warenkorb #cart .gt-cart-actions .edit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #main.warenkorb #cart .gt-cart-actions .ui-button-text {
        display: block !important;
        width: auto !important;
        padding-top: .62em !important;
        padding-bottom: .62em !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    #main.warenkorb #cart .gt-cart-actions .gt-cart-remove {
        color: #8f1822 !important;
        background: #fff !important;
        border: 1px solid #c9444d !important;
        box-shadow: none !important;
    }

    #main.warenkorb #cart .gt-cart-actions .gt-cart-remove:hover,
    #main.warenkorb #cart .gt-cart-actions .gt-cart-remove:focus {
        color: #fff !important;
        background: #a8242e !important;
        border-color: #8f1822 !important;
        outline: 2px solid #f39b1f !important;
        outline-offset: 1px !important;
    }

    #main.warenkorb #cart .gt-cart-rename-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #main.warenkorb #cart .gt-cart-rename-form input.bag_name {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    #main.warenkorb #cart .gt-cart-rename-form .rename_submit {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: none !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-summary-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid rgba(85, 55, 15, .25) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-summary-row > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #3d2a12 !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-summary-row > td:first-child {
        grid-column: 1 !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-summary-row > td.preis {
        grid-column: 2 !important;
        justify-self: end !important;
        font-weight: bold !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-summary-row > td.preis:before {
        content: none !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-total-row,
    #main.warenkorb #cart tbody > tr.gt-cart-due-row {
        margin-top: 4px !important;
        padding: 12px 8px !important;
        background: #eef7fb !important;
        border: 1px solid #78aeca !important;
        border-radius: 6px !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-total-row > td,
    #main.warenkorb #cart tbody > tr.gt-cart-due-row > td {
        color: #17384b !important;
        font-size: 17px !important;
        font-weight: bold !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-shipping-row {
        align-items: end !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #main.warenkorb #cart .gt-cart-shipping-cell {
        min-width: 0 !important;
    }

    #main.warenkorb #cart .gt-cart-shipping-form {
        display: grid !important;
        grid-template-columns: minmax(102px, 1fr) auto !important;
        align-items: end !important;
        gap: 5px 7px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #main.warenkorb #cart .gt-cart-shipping-form label {
        grid-column: 1 / -1 !important;
        color: #4a2b06 !important;
        font-size: 13px !important;
        font-weight: bold !important;
    }

    #main.warenkorb #cart .gt-cart-shipping-form select,
    #main.warenkorb #cart .gt-cart-shipping-form input[type="submit"] {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart .gt-cart-shipping-form input[type="submit"] {
        width: auto !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    #main.warenkorb .gt-cart-extras {
        display: block !important;
        width: calc(100% - 16px) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb .gt-cart-extras > .c33l,
    #main.warenkorb .gt-cart-extras > .c33r {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 0 !important;
        border-top: 1px solid rgba(85, 55, 15, .25) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 340px) {
    #main.warenkorb #cart tbody > tr.gt-cart-item {
        grid-template-columns: 68px minmax(0, 1fr) auto !important;
        gap: 9px !important;
        padding: 9px !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-media {
        grid-template-columns: repeat(2, 32px) !important;
        grid-auto-rows: 32px !important;
        gap: 3px !important;
        width: 67px !important;
        max-width: 67px !important;
    }

    #main.warenkorb #cart .gt-cart-media img {
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }

    #main.warenkorb #cart .gt-cart-media img.gt-cart-main-image {
        width: 67px !important;
        max-width: 67px !important;
        height: 67px !important;
        max-height: 67px !important;
    }

    #main.warenkorb #cart .gt-cart-more {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Clickable bag preview: keep the blue 2x2 tile inside the media column. */
@media (max-width: 760px) {
    #main.warenkorb #cart tbody > tr.gt-cart-item {
        grid-template-columns: 112px minmax(0, 1fr) auto !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-media {
        display: block !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        overflow: hidden !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview {
        display: grid !important;
        grid-template-columns: repeat(2, 42px) !important;
        grid-auto-rows: auto !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview img.gt-cart-product-thumb {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview .gt-cart-more,
    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview .gt-cart-preview-label {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview .gt-cart-more {
        height: 34px !important;
        color: #17384a !important;
        background: #ffd34e !important;
    }
}

@media (max-width: 340px) {
    #main.warenkorb #cart tbody > tr.gt-cart-item {
        grid-template-columns: 104px minmax(0, 1fr) auto !important;
    }

    #main.warenkorb #cart tbody > tr.gt-cart-item > td.gt-cart-media {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview {
        grid-template-columns: repeat(2, 39px) !important;
        gap: 5px !important;
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
    }

    #main.warenkorb #cart .gt-cart-media .gt-cart-bag-preview img.gt-cart-product-thumb {
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;
    }
}