/* 2026-10-21 sjmedia GS1-T100 Runde 2: Design-Nacharbeit Checkout grill-stefan.de
   Wird in layout/header.tpl nach sjm-checkout-v2.css geladen. */

/* 1 Bestellübersicht (Adress-Schritt, Versand/Zahlung) */
.sjm-co-summary.sjm-sum {
    padding: 0;
    overflow: hidden;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
}
.sjm-co-summary.sjm-sum > summary.sjm-sum-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e3e6ea;
    background: #f5f7fa;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.sjm-co-summary.sjm-sum:not([open]) > summary.sjm-sum-head { border-bottom: 0; }
.sjm-sum-title { font-size: 15px; color: #333; }
.sjm-sum-count { margin-left: 4px; color: #6c757d; font-size: 13px; font-weight: 400; }
.sjm-sum-headtotal { margin-left: auto; white-space: nowrap; }
.sjm-sum-body { padding: 12px 16px 14px; }
.sjm-sum-items { margin: 0 0 10px; padding: 0; list-style: none; }
.sjm-sum-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f4;
}
.sjm-sum-item:first-child { padding-top: 0; }
.sjm-sum-img img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid #eef0f2;
    border-radius: 4px;
    background: #fff;
}
.sjm-sum-info { min-width: 0; }
.sjm-sum-name {
    display: -webkit-box;
    overflow: hidden;
    color: #333;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sjm-sum-qty { display: block; margin-top: 2px; color: #6c757d; font-size: 12px; }
.sjm-sum-price { font-weight: 600; white-space: nowrap; }
.sjm-sum-rows { margin: 0; }
.sjm-sum-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    color: #525252;
}
.sjm-sum-rows dt { font-weight: 400; }
.sjm-sum-rows dd { margin: 0; white-space: nowrap; }
.sjm-sum-rows .sjm-sum-muted { color: #8a9097; }
.sjm-sum-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e3e6ea;
    font-size: 15px;
    font-weight: 600;
}
.sjm-sum-total strong { font-size: 18px; }
.sjm-sum-note { margin: 6px 0 0; color: #6c757d; font-size: 12px; }
@media (min-width: 992px) {
    .sjm-co-summary.sjm-sum { position: sticky; top: 88px; }
    .sjm-co-summary.sjm-sum > summary.sjm-sum-head { cursor: default; pointer-events: none; }
    .sjm-co-summary.sjm-sum > summary.sjm-sum-head::after { display: none; }
}

/* 2 Adress-Schritt kompakt */
.sjm-addr-main { max-width: 800px; }
.sjm-addr-layout .sjm-co-summary-col { margin-bottom: 16px; }
.sjm-addr-main .form-group { margin-bottom: .6rem; }
.sjm-addr-main .form-control,
.sjm-addr-main .custom-select { height: 40px; font-size: 15px; }
.sjm-addr-main .h2,
.sjm-addr-main .h3,
.sjm-addr-main legend {
    margin: .9rem 0 .5rem;
    font-size: 17px;
}
.sjm-addr-main hr { margin: .75rem 0; }
@media (min-width: 768px) {
    .sjm-addr-main .form-row > .col-md-12:has(> .form-group #salutation) { flex: 0 0 40%; max-width: 40%; }
}
/* Handy: Vorname/Nachname, Straße/Hausnummer, PLZ/Ort nebeneinander */
@media (max-width: 767.98px) {
    .sjm-addr-main .form-row > .col-12:has(> .form-group #firstName),
    .sjm-addr-main .form-row > .col-12:has(> .form-group #lastName) { flex: 0 0 50%; max-width: 50%; }
    .sjm-addr-main .form-row > .col-12:has(> .form-group #street),
    .sjm-addr-main .form-row > .col-12:has(> .form-group #city) { flex: 0 0 66.666%; max-width: 66.666%; }
    .sjm-addr-main .form-row > .col-12:has(> .form-group #streetnumber),
    .sjm-addr-main .form-row > .col-12:has(> .form-group #postcode) { flex: 0 0 33.333%; max-width: 33.333%; }
    .sjm-r2-confirm .sjm-confirm-aside .warranty-label-checkout { max-width: 320px; padding: 0; border: 0; }
}
/* Werbe-Hinweis (§ 7 Abs. 3 UWG): sichtbar, aber knapp formatiert */
.sjm-addr-main .direct-advertising small {
    display: block;
    margin: -2px 0 10px;
    padding: 6px 10px;
    border-left: 3px solid #c8ccd0;
    border-radius: 2px;
    background: #f5f7fa;
    color: #5f666d;
    font-size: 11.5px;
    line-height: 1.45;
}
/* Datenschutz- und Newsletter-Haken sauber untereinander */
.sjm-addr-main .snippets-checkbox-wrapper { margin-bottom: .5rem; }
.sjm-addr-main fieldset .col-xl-8 { flex: 0 0 100%; max-width: 100%; }
.sjm-addr-main .custom-control-label { font-size: 14px; font-weight: 400; line-height: 1.45; }
.sjm-addr-main .custom-control-label strong,
.sjm-addr-main .custom-control-label b { font-weight: 600; }
/* optionale Felder einklappbar */
.sjm-more-fields { margin: 2px 0 10px; }
.sjm-more-fields > summary {
    color: #bc3726;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}
.sjm-more-fields > summary::-webkit-details-marker { display: none; }
.sjm-more-fields > summary::before { content: "+ "; }
.sjm-more-fields[open] > summary::before { content: "\2013  "; }
.sjm-more-fields[open] > summary { margin-bottom: 10px; }
.sjm-addr-main .checkout-button-row { justify-content: flex-end; }
@media (min-width: 768px) {
    .sjm-addr-main .checkout-button-row-submit { flex: 0 0 auto; width: auto; max-width: none; }
}
.sjm-addr-main .checkout-button-row-submit .btn { padding-left: 28px; padding-right: 28px; white-space: nowrap; }
/* abweichende Lieferadresse: Überschrift über dem Formular statt daneben */
.sjm-addr-main .inc-shipping-address .col-md-4,
.sjm-addr-main .inc-shipping-address .col-md-8 { flex: 0 0 100%; max-width: 100%; }

/* 3 Zusammenfassung: Gewährleistungs-/GARAN-Hinweis als rechte Spalte */
.sjm-r2-confirm .sjm-confirm-aside .sjm-confirm-warranty { margin: 0 0 16px; }
.sjm-r2-confirm .sjm-confirm-aside .warranty-label-checkout {
    max-width: 340px;
    margin-left: auto;
    padding: 8px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #fff;
}
.sjm-r2-confirm .sjm-confirm-aside .warranty-label-checkout img { width: 100%; height: auto; }
@media (max-width: 991.98px) {
    .sjm-r2-confirm .sjm-confirm-aside .warranty-label-checkout { margin: 0; }
}