/* xup: Cross-Selling-Block auf der Artikeldetailseite.
   Der Block sitzt in der Kaufspalte (siehe Bootstrap::injectCrossSelling) und ist damit so
   breit wie der Kaufbereich — nicht wie der Bildschirm. Farben kommen aus dem Theme: Buttons
   ueber .btn-primary, die Akzentfarbe fuer gewaehlte Zeilen liest das JS aus dem Kaufen-Button
   und legt sie als --xup-accent ab. So traegt der Block die Farbe des jeweiligen Shops, ohne
   eine eigene Marke mitzubringen. */
.xup-xsell {
    margin: 1.5rem 0;
    /* Kontur und Grund explizit setzen: manche Themes rendern .card randlos und transparent —
       dann scheinen Hintergrundgrafiken durch Kopf und Fuss der Karte. */
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .5rem;
    background-color: #fff;
    /* Eigene Stacking-Ebene: manche Themes legen Deko-Grafiken als fixiertes Overlay ueber
       den Content (Drexel: .drx-deko, z-index 3). Klein genug fuer Navigation/Modals (>=1000). */
    position: relative;
    z-index: 4;
    /* Maximalbreite ist im Backend einstellbar (--xup-breite kommt dann inline vom Block).
       Ohne Begrenzung fuellt der Block die Breite seines Containers — bei der Platzierung
       hinter dem buy_form waere das die volle Seitenbreite, deshalb der Standardwert. */
    max-width: var(--xup-breite, 720px);
    /* Zeilenlayout richtet sich nach der Breite des Blocks, nicht nach der des Fensters —
       er kann in einer schmalen Spalte stehen, waehrend der Bildschirm breit ist. */
    container-type: inline-size;
    overflow: hidden;
}
.xup-xsell-header {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.xup-xsell-title {
    font-weight: 700;
    font-size: 1.05rem;
}
.xup-xsell-subtitle {
    opacity: .65;
}

/* Die Liste scrollt intern und zeigt 3,5 Karten: die angeschnittene vierte ist der
   deutlichste Hinweis darauf, dass es weitergeht. */
.xup-xsell-scroll {
    /* Im Backend einstellbar; 0 dort = gar keine Variable = Liste waechst mit, kein Scrollen. */
    max-height: var(--xup-hoehe, 218px);
    overflow-y: auto;
    /* Ohne das erbt overflow-x den Wert auto (CSS-Spec) und die Liste laesst sich seitlich
       schieben, sobald eine Zeile auch nur ein Pixel zu breit rechnet. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: .5rem;
    background: rgba(0, 0, 0, .025);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .35) rgba(0, 0, 0, .06);
}
.xup-xsell-scroll::-webkit-scrollbar {
    width: 10px;
    -webkit-appearance: none;
}
.xup-xsell-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.xup-xsell-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.xup-xsell-scroll.has-more::after {
    content: '';
    display: block;
    position: sticky;
    bottom: -.75rem;
    height: 40px;
    margin: -40px -.75rem -.75rem;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(248, 248, 248, .95));
    pointer-events: none;
}
.xup-xsell-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Jede Zeile ist eine eigene Karte — das gibt der Liste Rhythmus und macht die Auswahl
   sichtbar greifbar. Zeile: Bild | Name | Preis | Stepper. */
.xup-xsell-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .65rem;
    padding: .4rem .6rem;
    margin-bottom: .35rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: .4rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.xup-xsell-item:last-child { margin-bottom: 0; }
/* Grid-Kinder duerfen unter ihre Inhaltsbreite schrumpfen — ohne das rechnet der lange
   Artikelname die Zeile ein paar Pixel zu breit und die Liste laesst sich seitlich schieben. */
.xup-xsell-item > * { min-width: 0; }
.xup-xsell-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.xup-xsell-item.is-selected {
    border-color: var(--xup-accent, rgba(0, 0, 0, .5));
    box-shadow: 0 0 0 1px var(--xup-accent, rgba(0, 0, 0, .3));
}
.xup-xsell-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .3rem;
    background: rgba(0, 0, 0, .03);
    overflow: hidden;
}
.xup-xsell-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.xup-xsell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .1rem;
}
.xup-xsell-name {
    color: inherit;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xup-xsell-name:hover { text-decoration: underline; }
.xup-xsell-desc {
    font-size: .76rem;
    line-height: 1.25;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xup-xsell-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}
.xup-xsell-unit {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.25;
}
/* Zeilensumme erscheint erst mit gewaehlter Menge — bei Staffelpreisen steht hier der
   tatsaechlich geltende Stueckpreis mal Menge. */
.xup-xsell-line {
    font-size: .74rem;
    line-height: 1.25;
    opacity: .65;
}
/* Stepper und Maximum nebeneinander — uebereinander waere die Zeile doppelt so hoch. */
.xup-xsell-qty {
    display: flex;
    align-items: center;
    gap: .4rem;
}
/* Der Stepper bekommt EINE gemeinsame Kontur statt drei einzelner Elemente — viele Themes
   stylen Inputs nur mit Unterstrich, dann wirkt "- [ ] +" auseinandergefallen. */
.xup-xsell-stepper {
    width: 100px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .4rem;
    overflow: hidden;
    background: #fff;
}
.xup-xsell-stepper .btn { padding: .15rem .5rem; }
.xup-xsell-stepper .form-control { height: auto; padding: .15rem .25rem; }
.xup-xsell-stepper .btn,
.xup-xsell-stepper .form-control {
    border: 0;
    box-shadow: none;
    background: transparent;
}
.xup-xsell-input { text-align: center; font-weight: 600; }
.xup-xsell-input::-webkit-outer-spin-button,
.xup-xsell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xup-xsell-input { -moz-appearance: textfield; }
.xup-xsell-max {
    font-size: .72rem;
    opacity: .55;
    white-space: nowrap;
}

.xup-xsell-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.xup-xsell-withmain {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .88rem;
    cursor: pointer;
}
.xup-xsell-msg { font-size: .88rem; width: 100%; }
.xup-xsell-msg:empty { display: none; }
.xup-xsell-msg-ok { color: #1e7e34; font-weight: 600; }
.xup-xsell-msg-warn { color: #a94442; font-weight: 600; }
.xup-xsell-sum {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}
/* Voll breit wie der native Kaufen-Button darueber — er ist der Abschluss des Blocks,
   kein Nebenelement. */
.xup-xsell-submit { width: 100%; }

/* Schmale Spalte (nicht: schmaler Bildschirm) — Preis und Stepper rutschen unter den Namen. */
@container (max-width: 460px) {
    /* In der schmalen Spalte sind die Karten zweizeilig — mit der Desktop-Hoehe waeren nur
       anderthalb sichtbar. Eigene Einstellung, weil die richtige Hoehe hier eine andere ist. */
    .xup-xsell-scroll { max-height: var(--xup-hoehe-mobil, 330px); }
    .xup-xsell-item {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "img   info"
            "price qty";
        gap: .5rem .75rem;
    }
    .xup-xsell-img   { grid-area: img; width: 56px; height: 56px; }
    .xup-xsell-info  { grid-area: info; }
    .xup-xsell-price { grid-area: price; align-items: flex-start; align-self: center; }
    .xup-xsell-qty   { grid-area: qty; }
    .xup-xsell-sum   { margin-left: 0; }
    .xup-xsell-submit { width: 100%; }
}