/**
 * Ultra Media - einheitliche Mengensteuerung
 * Version 4.1.103
 *
 * Gleiche Darstellung in:
 * - Off-Canvas-Warenkorb (Referenz)
 * - Produktlisting
 * - Produktdetailseite
 */

/* =========================================================
   Gemeinsame Mengensteuerung fuer Listing und Detailseite
   Exakte Abmessungen entsprechend dem Off-Canvas-Warenkorb:
   38px Minus | 54px Eingabe | 38px Plus
   ========================================================= */
.um-product-qty-control {
    position: relative;
    z-index: 3;
    display: inline-flex !important;
    align-items: stretch;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #bfb1a1 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    vertical-align: top;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.um-product-qty-control:focus-within {
    border-color: #333 !important;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1) !important;
}

.um-product-qty-control .um-product-qty-input {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    display: block !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-right: 1px solid #e1d8ce !important;
    border-left: 1px solid #e1d8ce !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #222 !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.um-product-qty-control .um-product-qty-input::-webkit-outer-spin-button,
.um-product-qty-control .um-product-qty-input::-webkit-inner-spin-button {
    display: none !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.um-product-qty-control .um-product-qty-button {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f5f2ee !important;
    color: #333 !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    text-align: center !important;
    cursor: pointer;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.um-product-qty-control .um-product-qty-button:hover:not(:disabled),
.um-product-qty-control .um-product-qty-button:focus-visible:not(:disabled) {
    background: #c5ac8f !important;
    color: #fff !important;
    outline: 0 !important;
}

.um-product-qty-control .um-product-qty-button:active:not(:disabled) {
    transform: translateY(1px);
}

.um-product-qty-control .um-product-qty-button:disabled {
    opacity: 0.38 !important;
    cursor: default !important;
}

/* =========================================================
   Produktlisting
   ========================================================= */
.artikel_box .kategoriebuttons_actions,
.um-article_box .kategoriebuttons_actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.artikel_box .menge-buybox-input.um-listing-qty-host,
.um-article_box .menge-buybox-input.um-listing-qty-host {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.artikel_box .um-listing-qty-control,
.um-article_box .um-listing-qty-control {
    margin: 0 !important;
}

/* Alte Button-Abstaende duerfen nicht zusaetzlich zur Flex-Luecke wirken. */
.artikel_box .kategoriebuttons_actions > .kategoriebuttons.button,
.artikel_box .kategoriebuttons_actions > a.kategoriebuttons,
.um-article_box .kategoriebuttons_actions > .kategoriebuttons.button,
.um-article_box .kategoriebuttons_actions > a.kategoriebuttons {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* =========================================================
   Produktdetailseite
   ========================================================= */
.produkt-detail .produkt_warenkorb_button .buybox > .menge-buybox,
.produkt-detail .buybox > .menge-buybox {
    display: none !important;
}

.produkt-detail .produkt_warenkorb_button .buybox > .um-detail-qty-control,
.produkt-detail .buybox > .um-detail-qty-control {
    margin: 0 8px 12px 0 !important;
}

/* Vorhandene direkte Input-Regeln aus dem Template greifen nach dem Wrapping
   nicht mehr. Diese Regeln sichern trotzdem alle Detailvarianten ab. */
.produkt-detail .um-detail-qty-control input[name="warenkorb_artikel_anzahl"] {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-right: 1px solid #e1d8ce !important;
    border-left: 1px solid #e1d8ce !important;
    border-radius: 0 !important;
    text-align: center !important;
}

@media screen and (max-width: 767px) {
    .produkt-detail .produkt_warenkorb_button .buybox,
    .produkt-detail .buybox.um-detail-qty-ready {
        grid-template-columns: 132px minmax(0, 1fr) !important;
        grid-template-areas: "quantity cart" !important;
    }

    .produkt-detail .produkt_warenkorb_button .buybox > .um-detail-qty-control,
    .produkt-detail .buybox > .um-detail-qty-control {
        grid-area: quantity !important;
        align-self: center !important;
        justify-self: start !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 6px 0 !important;
    }
}

@media screen and (max-width: 360px) {
    .produkt-detail .produkt_warenkorb_button .buybox,
    .produkt-detail .buybox.um-detail-qty-ready {
        grid-template-columns: 124px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .produkt-detail .produkt_warenkorb_button .buybox > .um-detail-qty-control,
    .produkt-detail .buybox > .um-detail-qty-control {
        width: 124px !important;
        min-width: 124px !important;
        max-width: 124px !important;
    }

    .produkt-detail .um-detail-qty-control .um-product-qty-input {
        flex-basis: 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .um-product-qty-control,
    .um-product-qty-control .um-product-qty-button {
        transition: none !important;
    }
}

/* =========================================================
   Kompatibilitaet mit dem Lieferbarkeitsfilter
   Die Karten-Ausrichtung setzt Produktkarten auf display:flex !important.
   ========================================================= */
#artikel.artikeluebersicht > .artikel_box.um-article_box.um-stock-filter-hidden,
#artikel.artikeluebersicht > .artikel_box.um-stock-filter-hidden,
#artikel.artikeluebersicht > .um-article_box.um-stock-filter-hidden {
    display: none !important;
}