/* Bestellungen und Rechnungen: dieselben Aktionen auf Desktop und Mobilgeräten. */
.etica-order-history {
    --order-accent: #fbbb22;
    --order-ink: #232323;
    --order-muted: #595959;
    --order-line: #ddd;
    --order-surface: #fff;
    --order-gap: 1rem;
    color: var(--order-ink);
    container-type: inline-size;
}
.etica-order-history__note,
.etica-order-card__pending { color: var(--order-muted); }
.etica-order-history__list { display: grid; gap: var(--order-gap); }
.etica-order-card {
    padding: 1.5rem;
    background: var(--order-surface);
    border: 1px solid var(--order-line);
    border-block-start: 3px solid var(--order-accent);
    overflow-wrap: anywhere;
}
.etica-order-card__header,
.etica-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--order-gap);
}
.etica-order-card__header { justify-content: space-between; }
.etica-order-card__header h2 { margin: 0; font-size: 1.125rem; }
.etica-order-card__header a,
.etica-order-history__corrections a { color: var(--order-ink); text-decoration: underline; }
.etica-order-card__status {
    padding: .35rem .65rem;
    background: #f4f4f4;
    border: 1px solid var(--order-line);
    font-size: .875rem;
}
.etica-order-card__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--order-gap);
    margin-block: 1.5rem;
}
.etica-order-card__facts dt { color: var(--order-muted); font-size: .875rem; font-weight: 400; }
.etica-order-card__facts dd { margin: .3rem 0 0; font-weight: 600; }
.etica-order-card__facts small { font-weight: 400; }
.etica-order-card__actions { border-block-start: 1px solid var(--order-line); padding-block-start: var(--order-gap); }
.etica-order-card__details,
.etica-order-card__invoice,
.etica-order-card__reorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: .65rem 1rem;
    color: var(--order-ink);
    text-align: center;
    border: 1px solid var(--order-ink);
    line-height: 1.4;
}
.etica-order-card__invoice { background: var(--order-accent); border-color: var(--order-accent); font-weight: 600; }
.etica-order-card__reorder { border-color: var(--order-line); }
.etica-order-history a:hover { color: var(--order-ink); text-decoration: underline; }
.etica-order-history a:focus-visible { outline: 3px solid var(--order-ink); outline-offset: 3px; }
.etica-order-history__corrections { margin-block-start: 1.5rem; }
@container (max-width: 560px) {
    .etica-order-card { padding: 1rem; }
    .etica-order-card__facts { grid-template-columns: 1fr; }
    .etica-order-card__actions { align-items: stretch; flex-direction: column; }
}

/* ==========================================================================
   CHECKOUT — DURCHSUCHBARE LAENDERAUSWAHL
   Das native Select bleibt fuer Formularuebermittlung und Validierung erhalten;
   die sichtbare Komponente ergaenzt Suche, Priorisierung und Tastaturbedienung.
   ========================================================================== */

.etica-country-select {
    position: relative;
    width: 100%;
}

.etica-country-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.etica-country-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    color: #232323;
    background: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 0;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.etica-country-select__toggle:hover {
    border-color: #8e8e8e;
}

.etica-country-select__toggle:focus,
.etica-country-select.is-open .etica-country-select__toggle {
    outline: none;
    border-color: #24b9d7;
    box-shadow: 0 0 0 1px #24b9d7;
}

.etica-country-select__arrow {
    width: 0;
    height: 0;
    margin-left: 0.75rem;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.15s ease;
}

.etica-country-select.is-open .etica-country-select__arrow {
    transform: rotate(180deg);
}

.etica-country-select__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    width: 100%;
    min-width: 240px;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #c7c7c7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.etica-country-select.opens-upward .etica-country-select__panel {
    top: auto;
    bottom: calc(100% + 4px);
}

.etica-country-select__panel[hidden] {
    display: none;
}

.etica-country-select__search {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    color: #232323;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0;
    font: inherit;
}

.etica-country-select__search:focus {
    outline: none;
    border-color: #24b9d7;
    box-shadow: 0 0 0 1px #24b9d7;
}

.etica-country-select__list {
    max-height: 260px;
    margin-top: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.etica-country-select__option {
    display: block;
    width: 100%;
    padding: 0.48rem 0.65rem;
    color: #232323;
    background: transparent;
    border: 0;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.etica-country-select__option:hover,
.etica-country-select__option:focus {
    outline: none;
    background: #f2f2f2;
}

.etica-country-select__option.is-selected {
    color: #111;
    background: #f8ba2b;
    font-weight: 600;
}

.etica-country-select__option.is-priority {
    font-weight: 600;
}

.etica-country-select__option.is-last-priority {
    margin-bottom: 0.3rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #dedede;
}

.etica-country-select__empty {
    margin: 0.6rem 0.65rem;
    color: #6c6c6c;
    font-size: 0.9rem;
}

/* Hover Overlay für Produktkarten (überschreibt PrestaShop Standard-Styles falls nötig) */
.product-card-v2 {
    position: relative;
}

.product-card-v2__image-container {
    position: relative;
    padding: 0.5rem 1rem 0.15rem;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.product-miniature .product-thumbnail {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 0;
}

.product-card-v2__image-container img {
    object-fit: contain !important;
    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
}

.product-badge-new,
.product-badge {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    color: #fff;
    background: #4a4a4a;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.product-badge--new,
.product-badge--preorder,
.product-flags .product-flag.new,
.product-flags .product-flag.preorder {
    color: #fff;
    background: #4a4a4a;
}

.product-flags .product-flag.new,
.product-flags .product-flag.preorder {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 30px;
    padding: 6px 12px;
    margin-bottom: 6px;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.product-card-v2__hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 10;
    border-radius: inherit;
}

.product-card-v2__image-container:hover .product-card-v2__hover-overlay {
    opacity: 1;
    visibility: visible;
}

.product-card-v2__hover-overlay .overlay-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    width: 80%;
    justify-content: center;
    font-family: inherit;
    cursor: pointer;
}

.product-card-v2__hover-overlay .overlay-btn-cart {
    background-color: #f7ca18;
    /* gelb fallback */
    color: #000;
    border: none;
}

.product-card-v2__hover-overlay .overlay-btn-cart:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.product-card-v2__hover-overlay .overlay-btn-details {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}

.product-card-v2__hover-overlay .overlay-btn-details:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

.product-card-v2__hover-overlay form.add-to-cart-or-refresh {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    /* Bootstrap Abstände zurücksetzen */
}

/* Entfernt unschönen nativen Border bei PrestaShop Thumbnails */
.product-miniature .thumbnail-container {
    border: none;
    box-shadow: none;
}

/* ── Produktliste: gleiche Kartenhöhe pro Zeile (Bootstrap-Row stretch + Flex) ── */
#products .products .product,
.products.row .product {
    display: flex;
    flex-direction: column;
}

.product-miniature {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.product-miniature .thumbnail-container.product-card-v2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.product-miniature .product-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Preis immer am unteren Kartenrand */
.product-miniature .product-price-and-shipping {
    margin-top: auto;
}

/* Titel NICHT kürzen: volle Anzeige inkl. Zeilenumbruch */
.product-miniature .product-title a {
    display: block;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word;
}

/* Alle Produktkarten: ohne farbigen Hintergrund (keine Kategorie-Klassen mehr) */
.product-card-v2__image-container,
.no-cat .product-card-v2__image-container {
    background-color: transparent !important;
}

/* Autornamen in Produktkarten – einheitlich in Gelb */
.product-miniature .product-card-v2__category {
    text-align: center;
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: #f8ba2b;
}

/* Einheitliche Schrift in allen Produktkarten (unabhängig von Kategorie-Klasse) */
.product-card-v2 .product-description,
.product-card-v2 .product-description h2,
.product-card-v2 .product-description a,
.product-card-v2 .product-title,
.product-card-v2 .product-title a {
    font-family: inherit !important;
    font-size: inherit;
}

/* Produktdetail: Bild-Modal über Backdrop – #main beim geöffneten Modal über das Backdrop heben (Bootstrap: .modal-backdrop z-index 1040) */
body.modal-open #main {
    position: relative;
    z-index: 1051;
}

/* FINAL OVERRIDE: Startseite Produktkarten */
#products .product-card-v2__image-container,
.products .product-card-v2__image-container {
    padding: 0.5rem 1rem 0.15rem !important;
    background: transparent !important;
    background-color: transparent !important;
    align-items: flex-end !important;
}

body#checkout .condition-label {
    margin-top: 0!important;
}

@media (max-width: 767.98px) {
    #products .product-card-v2__image-container,
    .products .product-card-v2__image-container {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
}

/* Abstand zwischen Bildblock und Textblock zusätzlich reduzieren */
#products .product-miniature .product-description,
.products .product-miniature .product-description {
    margin-top: 0 !important;
    padding-top: 0.1rem !important;
}

/* Abstand der Autorenzeile verringern */
#products .product-miniature .product-card-v2__category,
.products .product-miniature .product-card-v2__category {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

/* Card Bottom-Abstand reduzieren */
#products .product-miniature .product-card-v2__content,
.products .product-miniature .product-card-v2__content {
    padding-top: 0.25rem !important;
}

/* ── Checkout: Tabs für "Gast bestellen / Konto erstellen / Anmelden" ── */

/* Allgemein: Tabs sauber horizontal, kein Unterrand-Bordüre */
.checkout-tabs {
    border-bottom: 2px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
}

.checkout-tabs .nav-item {
    flex: 0 1 auto;
    margin-bottom: -2px; /* Aktiver Tab überlappt den Border */
}

.checkout-tabs .nav-link {
    display: block;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    text-align: center;
}

.checkout-tabs .nav-link:hover,
.checkout-tabs .nav-link:focus {
    color: #000;
    background-color: #fef9e7;
    border-color: #f8ba2b #f8ba2b transparent;
}

.checkout-tabs .nav-link.active {
    color: #000;
    background-color: #fff;
    border-color: #f8ba2b #f8ba2b #fff;
    font-weight: 700;
}

/* ── Mobile: Tabs untereinander stapeln ── */
@media (max-width: 575.98px) {
    .checkout-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 0.35rem;
    }

    .checkout-tabs .nav-item {
        margin-bottom: 0;
        width: 100%;
    }

    .checkout-tabs .nav-link {
        border-radius: 8px;
        border: 2px solid #eee;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        text-align: center;
        width: 100%;
    }

    .checkout-tabs .nav-link:hover,
    .checkout-tabs .nav-link:focus {
        border-color: #f8ba2b;
        background-color: #fef9e7;
    }

    .checkout-tabs .nav-link.active {
        border-color: #f8ba2b;
        background-color: #fef9e7;
        color: #000;
    }
}

/* ── Tablet: Tabs nebeneinander, gleichmäßig verteilt ── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .checkout-tabs {
        flex-wrap: nowrap;
    }

    .checkout-tabs .nav-item {
        flex: 1 1 0;
    }

    .checkout-tabs .nav-link {
        font-size: 0.85rem;
        padding: 0.6rem 0.5rem;
        text-align: center;
    }
}


/* ==========================================================================
   WARENKORB-SEITE — Mobile & Tablet Optimierung
   ========================================================================== */

/* ── Allgemein: Cart Page Grundlagen ── */

/* Überschrift "Shopping Cart" */
#main .cart-container .card-block .h1,
#main .cart-container .card-block h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    padding: 0.5rem 0;
}

/* Separator-Linie unter dem Titel */
#main .cart-container hr.separator {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, #f8ba2b 0%, #e0e0e0 100%);
    margin: 0;
}

/* Cart-Items-Liste: kein Standard-Listenstil */
#main .cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Jedes Produkt in einer Karte */
#main .cart-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 0.75rem;
    transition: background-color 0.2s ease;
}

#main .cart-item:last-child {
    border-bottom: none;
}

#main .cart-item:hover {
    background-color: #fafafa;
}

/* Produktbild-Container */
#main .product-line-grid-left .product-image img {
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #eee;
    background: #f9f9f9;
}

/* Produktname-Link */
#main .product-line-info a.label {
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    transition: color 0.2s ease;
}

#main .product-line-info a.label:hover {
    color: #d4a843;
}

/* Attribute (Größe, Farbe etc.) */
#main .product-line-grid-body .product-line-info .label {
    font-weight: 500;
    color: #888;
    font-size: 0.85rem;
}

#main .product-line-grid-body .product-line-info .value {
    color: #555;
    font-size: 0.85rem;
}

/* Preis-Styling */
#main .product-line-grid-body .current-price .price {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 1rem;
}

#main .product-line-grid-body .product-discount .regular-price {
    color: #aaa;
    text-decoration: line-through;
    font-size: 0.85rem;
}

#main .product-line-grid-body .product-discount .discount {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

/* Menge-Input Desktop optimieren */
#main .product-line-grid-right .qty input.js-cart-line-product-quantity {
    width: 56px;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    background: #fff;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
}

#main .product-line-grid-right .qty input.js-cart-line-product-quantity:focus {
    border-color: #f8ba2b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 186, 43, 0.15);
}

#main .product-line-grid-right .qty input.js-cart-line-product-quantity::-webkit-inner-spin-button,
#main .product-line-grid-right .qty input.js-cart-line-product-quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Gesamtpreis pro Produkt */
#main .product-line-grid-right .product-price strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* Löschen-Button */
#main .cart-line-product-actions .remove-from-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: #999;
    transition: all 0.2s ease;
    text-decoration: none;
}

#main .cart-line-product-actions .remove-from-cart:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.1);
}

#main .cart-line-product-actions .remove-from-cart .material-icons {
    font-size: 20px;
}

/* ── Cart Summary (rechte Seite) ── */

#main .cart-grid-right .cart-summary {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: #fff;
}

#main .cart-detailed-totals .cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

#main .cart-detailed-totals .cart-summary-line .label {
    color: #666;
    font-weight: 500;
}

#main .cart-detailed-totals .cart-summary-line .value {
    font-weight: 600;
    color: #1a1a2e;
}

/* Total-Zeile: hervorgehoben */
#main .cart-summary-totals .cart-total {
    border-top: 2px solid #1a1a2e;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

#main .cart-summary-totals .cart-total .label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
}

#main .cart-summary-totals .cart-total .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* Checkout-Button */
#main .cart-detailed-actions .btn.btn-primary {
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: #d4a843;
    color: #fff;
    transition: all 0.25s ease;
    text-transform: none;
    letter-spacing: 0;
}

#main .cart-detailed-actions .btn.btn-primary:hover {
    background: #c09530;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.35);
}

/* Weiter einkaufen Link */
#main .cart-grid-body > a.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.75rem 0;
    transition: color 0.2s ease;
}

#main .cart-grid-body > a.label:hover {
    color: #d4a843;
}

#main .cart-grid-body > a.label .material-icons {
    font-size: 18px;
}

/* Promo-Code-Bereich */
#main .block-promo .promo-code-button a {
    color: #d4a843;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

#main .block-promo .promo-code-button a:hover {
    color: #c09530;
}

#main .block-promo .promo-input {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

#main .block-promo .promo-input:focus {
    border-color: #f8ba2b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 186, 43, 0.15);
}


/* Mobile-only additions stay hidden in the desktop cart and checkout. */
.etica-cart-mobile-only { display: none; }

/* ==========================================================================
   WARENKORB — MOBILE: Umsetzung des freigegebenen Mockups
   Scoped to the cart page; PrestaShop still owns quantities, prices and hooks.
   ========================================================================== */
@media (max-width: 767.98px) {
    body#cart {
        --cart-ink: #1b1b29;
        --cart-muted: #68686c;
        --cart-paper: #faf9f6;
        --cart-surface: #fff;
        --cart-line: #e5e2dc;
        --cart-gold: #d4a843;
        --cart-radius: 14px;
    }
    #cart #wrapper { background: var(--cart-paper); }
    #cart #main { color: var(--cart-ink); padding-block-end: 24px; }
    #cart #main .etica-cart-mobile-only { display: block; }
    #cart #main .etica-cart-desktop-title,
    #cart #main .cart-container > hr.separator,
    #cart #main .cart-grid-body > a.label { display: none; }

    #cart #main .etica-cart-back,
    #cart #main .etica-cart-continue {
        display: flex;
        align-items: center;
        gap: 12px;
        min-block-size: 44px;
        color: var(--cart-muted);
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
    }
    #cart #main .etica-cart-back { margin-block-end: 12px; }
    #cart #main .etica-cart-back span,
    #cart #main .etica-cart-continue span { font-size: 26px; line-height: 1; }
    #cart #main .cart-grid.row { display: block; margin: 0; }
    #cart #main .cart-grid-body,
    #cart #main .cart-grid-right { float: none; inline-size: 100%; padding: 0; }
    #cart #main .card.cart-container {
        background: transparent; border: 0; border-radius: 0;
        box-shadow: none; margin-block-end: 16px;
    }
    #cart #main .cart-container > .card-block { padding: 0; }
    #cart #main .cart-container .card-block h1.h1 {
        font-family: 'Zilla Slab', Georgia, serif;
        font-size: clamp(30px, 8.5vw, 42px);
        font-weight: 600; line-height: 1.12;
        letter-spacing: -0.035em; text-transform: none;
        margin: 0; padding: 0;
        color: var(--cart-ink);
    }
    #cart #main .etica-cart-count {
        margin: 10px 0 20px; color: var(--cart-muted); font-size: 14px;
    }
    #cart #main .cart-items { display: grid; gap: 12px; }
    #cart #main .cart-item,
    #cart #main .cart-item:hover {
        padding: 16px; background: var(--cart-surface);
        border: 1px solid #f2f0ec; border-radius: var(--cart-radius);
        box-shadow: 0 4px 22px rgb(35 30 20 / 3%);
    }
    #cart #main .product-line-grid {
        display: grid; grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px 16px; align-items: start;
    }
    #cart #main .product-line-grid > .clearfix { display: none; }
    #cart #main .product-line-grid .product-line-grid-left,
    #cart #main .product-line-grid .product-line-grid-body,
    #cart #main .product-line-grid .product-line-grid-right {
        float: none; inline-size: auto; min-inline-size: 0; max-inline-size: none;
        padding: 0; margin: 0;
    }
    #cart #main .product-line-grid-left { grid-column: 1; grid-row: 1 / span 2; }
    #cart #main .product-line-grid-body { grid-column: 2; }
    #cart #main .product-line-grid-left .product-image img {
        display: block; inline-size: 80px; block-size: 118px;
        object-fit: contain; border: 0; border-radius: 2px;
        background: var(--cart-surface);
    }
    #cart #main .product-line-grid-body > br { display: none; }
    #cart #main .product-line-grid-body .product-line-info a.label {
        display: block; overflow: visible; -webkit-line-clamp: unset;
        font-size: 15px; line-height: 1.4; font-weight: 600;
        color: var(--cart-ink); overflow-wrap: anywhere;
    }
    #cart #main .product-line-grid-body .product-price.h5 { margin: 10px 0 0; }
    #cart #main .product-line-grid-body .current-price .price {
        font-size: 17px; font-weight: 700;
    }
    #cart #main .product-line-grid .product-line-grid-right { grid-column: 2; }
    #cart #main .product-line-grid-right > .row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
    }
    #cart #main .product-line-grid-right .col-xs-4.hidden-md-up { display: none; }
    #cart #main .product-line-grid-right .col-md-10.col-xs-6 {
        float: none; width: auto; padding: 0; flex: 1 1 132px; min-inline-size: 0;
    }
    #cart #main .product-line-grid-right .col-md-10 > .row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
    }
    #cart #main .product-line-grid-right .qty {
        float: none; width: auto; padding: 0;
    }
    /* Preserve the line total, also when quantity > 1 or discounted. */
    #cart #main .product-line-grid-right .col-md-6.col-xs-2.price {
        float: none; width: auto; padding: 0; flex: 1 0 100%;
    }
    #cart #main .product-line-grid-right .product-price strong {
        font-size: 14px; color: var(--cart-muted);
    }
    #cart #main .product-line-grid-right .etica-cart-single-price { display: none; }
    #cart #main .product-line-grid-right .col-md-2.col-xs-2 {
        float: none; width: auto; padding: 0; margin-inline-start: auto;
        align-self: flex-start;
    }

    /* TouchSpin inserts its vertical button wrapper after each AJAX refresh.
       Flatten that wrapper into the grid while retaining the original buttons. */
    #cart #main .qty .bootstrap-touchspin {
        display: grid; grid-template-columns: 44px 44px 44px;
        inline-size: 132px; block-size: 44px;
        border: 1px solid var(--cart-line); border-radius: 9px;
        overflow: hidden; background: var(--cart-surface);
    }
    #cart #main .qty .bootstrap-touchspin .input-group-btn-vertical,
    #cart #main .qty .bootstrap-touchspin .input-group-btn { display: contents; }
    #cart #main .qty .bootstrap-touchspin .input-group-addon { display: none; }
    #cart #main .qty .bootstrap-touchspin button {
        position: static; float: none; display: flex;
        align-items: center; justify-content: center;
        inline-size: 44px; block-size: 44px; min-block-size: 44px;
        margin: 0; padding: 0; border: 0; border-radius: 0;
        background: transparent; color: var(--cart-ink);
        box-shadow: none; font-size: 24px; line-height: 1;
    }
    #cart #main .qty .bootstrap-touchspin button i { display: none; }
    #cart #main .qty .bootstrap-touchspin-down { grid-column: 1; grid-row: 1; }
    #cart #main .qty .bootstrap-touchspin-up { grid-column: 3; grid-row: 1; }
    #cart #main .qty .bootstrap-touchspin-down::before { content: '−'; }
    #cart #main .qty .bootstrap-touchspin-up::before { content: '+'; }
    #cart #main .product-line-grid-right .qty input.js-cart-line-product-quantity {
        grid-column: 2; grid-row: 1; inline-size: 44px; block-size: 44px;
        min-inline-size: 0; margin: 0; padding: 0;
        border: 0; border-inline: 1px solid var(--cart-line); border-radius: 0;
        font-size: 16px; text-align: center; background: var(--cart-surface);
        color: var(--cart-ink); box-shadow: none;
    }
    #cart #main .cart-line-product-actions .remove-from-cart {
        width: 44px; height: 44px; color: var(--cart-ink);
        background: #f4f3f1; transform: none;
    }
    #cart #main .cart-line-product-actions .remove-from-cart .material-icons {
        float: none; font-size: 21px;
    }
    #cart #main .cart-grid-right .cart-summary {
        margin: 0 0 16px; border: 1px solid #f2f0ec;
        border-radius: var(--cart-radius); background: var(--cart-surface);
        box-shadow: 0 4px 22px rgb(35 30 20 / 3%);
    }
    #cart #main .etica-cart-summary-title {
        font-family: 'Zilla Slab', Georgia, serif;
        font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2;
        letter-spacing: -0.025em; text-transform: none;
        color: var(--cart-ink); margin: 0; padding: 20px 18px 12px;
    }
    #cart #main .cart-detailed-totals .card-block { padding: 8px 18px; }
    #cart #main .cart-detailed-totals .cart-summary-line {
        display: flex; flex-wrap: wrap; justify-content: space-between;
        align-items: baseline; gap: 6px 12px; padding: 7px 0; font-size: 14px;
    }
    #cart #main .cart-summary-line > .label { flex: 1; min-inline-size: 0; }
    #cart #main .cart-summary-line > .value { margin-inline-start: auto; text-align: end; }
    #cart #main .cart-detailed-totals .cart-summary-line .label { color: var(--cart-ink); }
    #cart #main .cart-detailed-totals .cart-summary-line .value { font-weight: 500; }
    #cart #main .cart-summary-totals .cart-total {
        border-top: 1px solid var(--cart-line); margin-top: 4px; padding-top: 18px;
    }
    #cart #main .cart-summary-totals .cart-total .label { font-size: 16px; font-weight: 700; }
    #cart #main .cart-summary-totals .cart-total .value { font-size: 21px; font-weight: 700; }
    #cart #main .cart-detailed-actions { padding: 14px 18px 18px; }
    #cart #main .cart-detailed-actions .btn.btn-primary {
        display: flex; align-items: center; justify-content: center;
        gap: 12px; min-block-size: 50px; padding: 12px;
        border-radius: 9px; background: var(--cart-gold);
        font-size: 17px; line-height: 1.4; white-space: normal;
        transition: transform 0.2s ease;
    }
    #cart #main .cart-detailed-actions a.btn.btn-primary::after { content: '→'; }
    #cart #main .cart-detailed-actions .btn:disabled { opacity: 0.55; }
    #cart #main .etica-cart-continue {
        justify-content: center; margin: 0 18px; padding: 12px 0;
        border-top: 1px solid var(--cart-line);
    }
    #cart #main .block-promo .promo-code { padding: 12px 18px; }
    #cart #main .block-promo .promo-code form { display: flex; flex-wrap: wrap; gap: 8px; }
    #cart #main .block-promo .promo-input { flex: 1; min-width: 0; font-size: 16px; }
    #cart #main .block-promo .promo-code .btn { min-block-size: 44px; }
    #cart #main .no-items { display: block; padding: 20px 0; }
    #cart #main a:focus-visible,
    #cart #main button:focus-visible,
    #cart #main input:focus-visible {
        outline: 2px solid var(--cart-ink); outline-offset: -3px;
    }
}
@media (max-width: 359.98px) {
    #cart #main .product-line-grid { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    #cart #main .product-line-grid-left .product-image img { inline-size: 64px; block-size: 96px; }
    #cart #main .product-line-grid .product-line-grid-right { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    #cart #main .cart-item,
    #cart #main .cart-detailed-actions .btn,
    #cart #main .cart-line-product-actions .remove-from-cart { transition: none; }
}

/* ==========================================================================
   WARENKORB — TABLET (768px – 991px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Cart Container */
    #main .card.cart-container {
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    }

    /* Produktbild Tablet */
    #main .product-line-grid .product-line-grid-left .product-image img {
        border-radius: 10px;
    }

    /* Summary Card */
    #main .cart-grid-right .cart-summary {
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        position: sticky;
        top: 1rem;
    }
}

/* ==========================================================================
   WISHLIST-HERZCHEN AUF PRODUKTKARTEN AUSBLENDEN
   Das blockwishlist-Modul injiziert den Herz-Button (.wishlist-button-add)
   per JS in jede Produktkarte. Hier wird er ausgeblendet.
   ========================================================================== */

.wishlist-button-add {
    display: none !important;
}

/* Produktdetailseite: Den von PrestaShop Checkout dynamisch erzeugten
   Block "100% sichere Zahlungen" samt Zahlungslogos ausblenden. */
#product #ps_checkout-payment-method-logo-block-container {
    display: none !important;
}

/* ==========================================================================
   CHECKOUT — ZAHLUNG
   ========================================================================== */

#checkout-payment-step .content {
    padding-top: 0.25rem;
}

#checkout-payment-step .etica-payment-intro {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1rem;
    color: #1a1a2e;
}

#checkout-payment-step .etica-payment-intro__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #9a7219;
    background: #fff8e7;
    border: 1px solid #f3dfac;
}

#checkout-payment-step .etica-payment-intro__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

#checkout-payment-step .etica-payment-intro__copy strong {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

#checkout-payment-step .etica-payment-intro__copy > span {
    color: #6b6b73;
    font-size: 0.86rem;
    line-height: 1.45;
}

#checkout-payment-step .payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

#checkout-payment-step .etica-payment-option-shell {
    position: relative;
    margin: 0 !important;
    padding: 0;
}

/* Versteckte Zusatz-/Formularcontainer duerfen keinen Platz beanspruchen —
   sonst entstehen die grossen Luecken zwischen den Zahlungsarten. */
#checkout-payment-step .payment-options .ps-hidden {
    display: none;
}

#checkout-payment-step .etica-payment-option-form,
#checkout-payment-step .etica-payment-option-form > form {
    margin: 0;
    padding: 0;
}

#checkout-payment-step .etica-payment-option-form:empty {
    display: none;
}

/* Modulformulare (z. B. die Kreditkartenfelder von ps_checkout) werden vom SDK
   bereits beim Laden befuellt, auch wenn die Option nicht gewaehlt ist. Sie
   duerfen keine Hoehe belegen, sonst entsteht die groessere Luecke vor der
   naechsten Zahlungsart. Bewusst kein display:none — die Zahlungs-SDKs muessen
   ihre Container weiterhin vermessen koennen. */
#checkout-payment-step .etica-payment-option-shell:not(:has(input[name="payment-option"]:checked)) > *:not(.etica-payment-option) {
    max-height: 0;
    overflow: hidden;
}

/* ps_checkout rendert serverseitig JEDE Funding Source (eps, iDEAL, Bancontact,
   giropay, Pay Later ...) und blendet die im PayPal-Konto nicht freigeschalteten
   erst per JS mit style="display: none" aus. Die leere Huelle bleibt dabei im
   Fluss stehen und erzeugt die ungleichmaessigen Luecken — vor allem vor
   Google Pay. Sie wird nur aus dem Layout genommen und bleibt fuer die
   asynchrone SDK-Initialisierung jederzeit im DOM. */
#checkout-payment-step .etica-payment-option-shell--empty,
#checkout-payment-step .etica-payment-option-shell--ideal,
#checkout-payment-step .etica-payment-option-shell:has(input[data-module-name="ps_checkout-ideal"]),
#checkout-payment-step .etica-payment-option-shell:has(> .payment-option[style*="display: none"]),
#checkout-payment-step .etica-payment-option-shell:has(> .payment-option[style*="display:none"]) {
    display: none !important;
}

#checkout-payment-step .etica-payment-option {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0.65rem 0.85rem;
    margin: 0;
    border: 1px solid #dedee3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#checkout-payment-step .etica-payment-option:hover,
#checkout-payment-step .etica-payment-option:focus-within {
    border-color: #d4a843;
    box-shadow: 0 5px 18px rgba(26, 26, 46, 0.09);
}

#checkout-payment-step .etica-payment-option:has(input[name="payment-option"]:checked) {
    border-color: #d4a843;
    background: linear-gradient(135deg, #fffdf8 0%, #fff 72%);
    box-shadow: 0 5px 20px rgba(212, 168, 67, 0.16);
}

#checkout-payment-step .etica-payment-option__radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0 0.75rem 0 0;
    float: none !important;
}

#checkout-payment-step .etica-payment-option__radio input,
#checkout-payment-step .etica-payment-option__radio > span {
    width: 22px;
    height: 22px;
}

#checkout-payment-step .etica-payment-option__radio input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#checkout-payment-step .etica-payment-option__radio > span {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 2px solid #b8b8c0;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#checkout-payment-step .etica-payment-option__radio > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4a843;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.16s ease;
}

#checkout-payment-step .etica-payment-option__radio input:checked + span {
    border-color: #d4a843;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}

#checkout-payment-step .etica-payment-option__radio input:checked + span::after {
    transform: translate(-50%, -50%) scale(1);
}

#checkout-payment-step .etica-payment-option__radio input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.2);
}

#checkout-payment-step .etica-payment-option__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

/* Stripe-Kachel: Inhalt ueber die volle Breite statt Titel/Logo nebeneinander */
#checkout-payment-step .etica-payment-option__label--stack {
    display: block;
}

#checkout-payment-step .etica-payment-option__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Das ps_checkout-SDK identifiziert seine Option ueber den originalen
   call_to_action_text. Visuell bleibt nur unsere kurze Bezeichnung sichtbar. */
#checkout-payment-step .etica-payment-option__sdk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#checkout-payment-step .etica-payment-option__title {
    display: block;
    color: #1a1a2e;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

#checkout-payment-step .etica-payment-option__description {
    display: block;
    margin-top: 0.2rem;
    color: #6b6b73;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Alle Zahlungslogos auf eine einheitliche Hoehe bringen und direkt neben den
   Titel setzen — nicht an den rechten Rand, damit Text und Logo zusammengehoeren. */
#checkout-payment-step .etica-payment-option__logo {
    display: block !important;
    width: auto;
    height: 22px;
    max-width: 110px;
    margin: 0;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: left center;
    opacity: 1 !important;
    visibility: visible !important;
    vertical-align: middle;
}

/* Die Kartengrafik zeigt drei Marken nebeneinander und wirkt bei gleicher
   Hoehe sonst deutlich dominanter als die Einzellogos. */
#checkout-payment-step .etica-payment-option__card-logos {
    height: 19px;
    max-width: 96px;
}

#checkout-payment-step .etica-stripe-methods {
    display: block;
}

#checkout-payment-step .etica-stripe-methods__header {
    display: flex;
    align-items: center;
    margin-bottom: 0.55rem;
}

#checkout-payment-step .etica-stripe-methods__list {
    display: grid;
    grid-template-columns: minmax(170px, 1.6fr) repeat(3, minmax(95px, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

#checkout-payment-step .etica-stripe-method {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    min-width: 0;
    min-height: 38px;
    padding: 0.4rem 0.55rem;
    color: #3e3e47;
    background: #f7f7f9;
    border: 1px solid #ececef;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

#checkout-payment-step .etica-pay-icon {
    flex: 0 0 auto;
    vertical-align: middle;
}

#checkout-payment-step .etica-pay-badges {
    display: inline-flex;
    gap: 0.2rem;
    margin-left: auto;
}

#checkout-payment-step .etica-pay-badges svg {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    vertical-align: middle;
}

#checkout-payment-step .additional-information {
    position: relative;
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem 0.8rem 2.75rem;
    color: #63636c;
    background: #f6f7f9;
    border: 1px solid #e7e8ec;
    border-radius: 9px;
    font-size: 0.85rem;
    line-height: 1.45;
}

#checkout-payment-step .additional-information::before {
    content: "i";
    position: absolute;
    top: 0.78rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #83641d;
    background: #fff3d4;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    font-style: normal;
}

#checkout-payment-step .additional-information > :last-child {
    margin-bottom: 0;
}

#checkout-payment-step #conditions-to-approve {
    margin: 1rem 0 0;
    padding: 0;
}

/* Vom ps_checkout-SDK bei einem Klick ohne akzeptierte Bedingungen
   eingeblendeter Hinweis. */
#checkout-payment-step .accept-cgv {
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
}

#checkout-payment-step #conditions-to-approve ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#checkout-payment-step #conditions-to-approve li {
    display: flex;
    align-items: center;
    padding: 0.95rem 1rem;
    margin: 0;
    background: #fafafa;
    border: 1px solid #e4e4e8;
    border-radius: 10px;
}

#checkout-payment-step #conditions-to-approve li + li {
    margin-top: 0.55rem;
}

#checkout-payment-step #conditions-to-approve li > .float-xs-left {
    float: none !important;
    flex: 0 0 auto;
    margin-right: 0.7rem;
}

#checkout-payment-step #conditions-to-approve .custom-checkbox {
    display: block;
    width: 22px;
    height: 22px;
}

#checkout-payment-step #conditions-to-approve .custom-checkbox input,
#checkout-payment-step #conditions-to-approve .custom-checkbox input + span {
    width: 22px;
    height: 22px;
}

#checkout-payment-step #conditions-to-approve .custom-checkbox input + span {
    border: 2px solid #b8b8c0;
    border-radius: 5px;
    background: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#checkout-payment-step #conditions-to-approve .custom-checkbox input:checked + span {
    color: #fff;
    border-color: #d4a843;
    background: #d4a843;
}

#checkout-payment-step #conditions-to-approve .custom-checkbox input:focus + span {
    box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.18);
}

#checkout-payment-step #conditions-to-approve .checkbox-checked {
    color: inherit;
    font-size: 17px;
    line-height: 18px;
}

#checkout-payment-step #conditions-to-approve .condition-label {
    min-width: 0;
    padding: 0;
}

#checkout-payment-step #conditions-to-approve .condition-label label {
    margin: 0;
    color: #3e3e47;
    font-size: 0.86rem;
    line-height: 1.55;
    cursor: pointer;
}

#checkout-payment-step #conditions-to-approve .condition-label a {
    color: #8b6819;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#checkout-payment-step #conditions-to-approve .condition-label a:hover,
#checkout-payment-step #conditions-to-approve .condition-label a:focus {
    color: #674a0c;
}

#checkout-payment-step #payment-confirmation {
    margin-top: 1rem;
}

#checkout-payment-step #payment-confirmation .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 50px;
    padding: 0.85rem 1.25rem;
    margin: 0;
    color: #fff;
    background: #d4a843;
    border: 1px solid #d4a843;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(212, 168, 67, 0.25);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#checkout-payment-step #payment-confirmation .btn.btn-primary:not(:disabled):not(.disabled):hover,
#checkout-payment-step #payment-confirmation .btn.btn-primary:not(:disabled):not(.disabled):focus {
    background: #bf9232;
    border-color: #bf9232;
    box-shadow: 0 7px 20px rgba(191, 146, 50, 0.32);
    transform: translateY(-1px);
}

#checkout-payment-step #payment-confirmation .btn.btn-primary:disabled,
#checkout-payment-step #payment-confirmation .btn.btn-primary.disabled {
    color: #8a8a91;
    background: #e7e7ea;
    border-color: #e7e7ea;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

#checkout-payment-step .etica-payment-confirmation__arrow {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

#checkout-payment-step #payment-confirmation .btn.btn-primary:not(:disabled):not(.disabled):hover .etica-payment-confirmation__arrow {
    transform: translateX(3px);
}

#checkout-payment-step .js-alert-payment-conditions {
    margin-top: 0.75rem;
    border-radius: 9px;
    font-size: 0.84rem;
}

@media (max-width: 991.98px) {
    #checkout-payment-step .etica-stripe-methods__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* nur die mehrzeilige Stripe-Kachel oben ausrichten, einzeilige Optionen bleiben zentriert */
    #checkout-payment-step .etica-payment-option:has(.etica-payment-option__label--stack) {
        align-items: flex-start;
    }

    #checkout-payment-step .etica-payment-option:has(.etica-payment-option__label--stack) .etica-payment-option__radio {
        margin-top: 0.1rem;
    }
}

@media (max-width: 575.98px) {
    #checkout-payment-step .content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #checkout-payment-step .etica-payment-intro {
        align-items: flex-start;
        margin-bottom: 0.85rem;
    }

    #checkout-payment-step .etica-payment-intro__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    #checkout-payment-step .etica-payment-intro__copy strong {
        font-size: 0.95rem;
    }

    #checkout-payment-step .etica-payment-intro__copy > span {
        font-size: 0.8rem;
    }

    #checkout-payment-step .etica-payment-option {
        min-height: 0;
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
    }

    #checkout-payment-step .etica-payment-option__radio {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-right: 0.65rem;
    }

    #checkout-payment-step .etica-payment-option__radio input,
    #checkout-payment-step .etica-payment-option__radio > span {
        width: 20px;
        height: 20px;
    }

    #checkout-payment-step .etica-payment-option__radio > span::after {
        width: 8px;
        height: 8px;
    }

    #checkout-payment-step .etica-stripe-methods__header {
        align-items: flex-start;
        margin-bottom: 0.65rem;
    }

    #checkout-payment-step .etica-stripe-methods__title {
        font-size: 0.86rem;
    }

    #checkout-payment-step .etica-payment-option__label {
        gap: 0.5rem;
    }

    #checkout-payment-step .etica-payment-option__title {
        font-size: 0.9rem;
    }

    #checkout-payment-step .etica-payment-option__logo {
        height: 20px;
        max-width: 92px;
    }

    #checkout-payment-step .etica-payment-option__card-logos {
        height: 17px;
        max-width: 86px;
    }

    #checkout-payment-step .etica-stripe-methods__list {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    #checkout-payment-step .etica-stripe-method {
        min-height: 36px;
        font-size: 0.76rem;
    }

    #checkout-payment-step .etica-pay-badges {
        margin-left: auto;
    }

    #checkout-payment-step .additional-information {
        padding: 0.7rem 0.75rem 0.7rem 2.4rem;
        font-size: 0.79rem;
    }

    #checkout-payment-step .additional-information::before {
        top: 0.68rem;
        left: 0.75rem;
    }

    #checkout-payment-step #conditions-to-approve li {
        padding: 0.8rem;
    }

    #checkout-payment-step #conditions-to-approve .condition-label label {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    #checkout-payment-step #payment-confirmation .btn.btn-primary {
        min-height: 48px;
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   FOOTER
   Das Classic-Theme setzt in theme.css `#footer { background: #fff; color: #7a7a7a }`
   und im Checkout zusaetzlich `body#checkout #footer { ... }`. Beide schlagen
   den Element-Selektor `footer` aus /css/style.css, wodurch der gelbe
   Etica-Footer weiss und die Schrift grau wird. Hier wird er zurueckgeholt.
   ========================================================================== */

body #footer,
body#checkout #footer {
    padding: 160px 20px;
    color: #000;
    background-color: var(--gelb, #f8ba2b);
}

body #footer a,
body#checkout #footer a {
    color: inherit;
}

/* ==========================================================================
   PRODUKTDETAIL — AUTORENSEKTION
   Gelber Autorenblock nach dem Vorbild der Etica-Inhaltsseiten.
   ========================================================================== */

@font-face {
    font-family: "Etica Rustico";
    src: url("/fonts/Rustico-V2-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Der Footer-Hook gibt seine Karten als gefloatete, direkte Produktzeile aus.
   Ein eigener Formatierungskontext lässt die Zeile ihre volle Höhe behalten. */
#product #main > .products {
    display: flow-root;
}

#product .etica-product-authors {
    display: flow-root;
    clear: both;
    position: relative;
    width: calc(100% - 3rem);
    max-width: 1100px;
    margin: 5.5rem auto 5rem;
    isolation: isolate;
}

/* Die API blendet die Sektion erst ein, sobald echte Autorendaten vorliegen. */
#product .etica-product-authors[hidden] {
    display: none;
}

#product .etica-product-authors::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #f8ba2b;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

#product .etica-product-authors__inner {
    position: relative;
    padding: 5rem clamp(3rem, 9vw, 8.25rem) 5.5rem;
}

#product .etica-product-authors__title {
    position: absolute;
    top: -2rem;
    left: 50%;
    z-index: 2;
    width: auto;
    margin: 0;
    transform: translateX(-50%) rotate(-2.5deg);
    line-height: 1;
}

#product .etica-product-authors__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    min-height: 4rem;
    padding: 0.8rem 1.25rem 0.65rem;
    color: #fff;
    background: #050505;
    box-shadow: none;
    font-family: "Etica Rustico", "Arial Black", sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

#product .etica-product-authors__list {
    display: flex;
    flex-direction: column;
}

#product .etica-product-author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

#product .etica-product-author + .etica-product-author {
    margin-top: 3.25rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.16);
}

#product .etica-product-author__content {
    order: 1;
    width: 100%;
    color: #000;
}

#product .etica-product-author__name {
    margin: 0 0 0.55rem;
    color: #000;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

#product .etica-product-author__bio {
    max-width: 100%;
    color: #000;
    font-size: 0.93rem;
    line-height: 1.55;
}

#product .etica-product-author__bio p {
    margin: 0 0 0.65rem;
    color: #000;
}

#product .etica-product-author__bio p:last-child {
    margin-bottom: 0;
}

#product .etica-product-author__portrait {
    order: 2;
    width: min(220px, 100%);
    aspect-ratio: 3 / 4;
    margin-top: 1.35rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
}

#product .etica-product-author__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center top;
}

/* Der wiederhergestellte Empfehlungsblock bleibt klar vom Autorenfeld getrennt. */
#product [data-role="product-footer"],
#product .product-accessories,
#product .featured-products {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    #product .etica-product-authors {
        width: calc(100% - 1rem);
        margin-top: 4.75rem;
        margin-bottom: 3.5rem;
    }

    #product .etica-product-authors::before {
        clip-path: polygon(0 2.25%, 100% 0, 100% 97.75%, 0 100%);
    }

    #product .etica-product-authors__inner {
        padding: 4.25rem 1.35rem 4.25rem;
    }

    #product .etica-product-authors__title {
        top: -1.65rem;
    }

    #product .etica-product-authors__badge {
        min-width: 6.5rem;
        min-height: 3.4rem;
        padding: 0.7rem 1rem 0.55rem;
    }

    #product .etica-product-author__bio {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    #product .etica-product-author__portrait {
        width: min(210px, 100%);
    }
}

/* ==========================================================================
   BESTELLBESTÄTIGUNG — SUMMEN & BESTELLDETAILS
   Die Summenblöcke liegen im selben Raster wie die Produktzeilen, damit die
   Beträge exakt unter der Spalte "Gesamt" stehen.
   ========================================================================== */

/* Bestellpositionen nutzen die volle Breite – die Trennlinie zur ehemaligen
   rechten Detailspalte entfällt dadurch. */
#content.page-order-confirmation #order-items {
    border-right: none;
}

#content.page-order-confirmation #order-items hr {
    margin: 0.5rem 0 1rem;
}

/* ── Summenzeilen ── */
.order-confirmation-table .order-totals {
    margin-bottom: 0.5rem;
}

.order-confirmation-table .order-total-line {
    align-items: center;
    padding: 0.35rem 0;
    font-size: 1em; /* nie kleiner als die Produktzeilen darüber */
    line-height: 1.4;
}

.order-confirmation-table .order-total-line .label {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    padding-top: 0;
    padding-bottom: 0;
    white-space: normal;
}

.order-confirmation-table .order-total-line .value {
    font-size: inherit;
    white-space: nowrap;
}

/* ── Gesamtsumme hervorheben, aber nie kleiner als die Produktzeilen ── */
.order-confirmation-table .order-total-line.total-value {
    margin-top: 0.35rem;
    padding: 0.6rem 0;
    background: #f6f6f6;
    font-size: 1.0625em;
    font-weight: 700;
}

.order-confirmation-table .order-total-line.total-value .label,
.order-confirmation-table .order-total-line.total-value .value {
    font-size: inherit;
    font-weight: 700;
}

/* Steuerhinweis unter der Gesamtsumme */
.order-confirmation-table .order-total-line.sub.taxes {
    padding-top: 0.4rem;
    font-size: 0.9em;
    opacity: 0.85;
}

/* Der Detailblock ist keine schmale Nebenspalte mehr – der große Einzug aus
   dem Parent-Theme entfällt. */
#content.page-order-confirmation #order-details {
    padding-left: 15px;
    padding-right: 15px;
}

/* ── Bestelldetails im Zahlungs-Container ── */
#content-hook_payment_return .order-details--in-payment {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ececec;
}

#content-hook_payment_return .order-details--in-payment ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

#content-hook_payment_return .order-details--in-payment ul li {
    margin-bottom: 0.5rem;
}

/* Überschrift auf dem Desktop einzeilig */
#order-details .order-details-title {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    #order-details .order-details-title {
        white-space: nowrap;
    }
}

/* ── Mobile: Summen kompakt, Beträge rechtsbündig ── */
@media (max-width: 543.98px) {
    .order-confirmation-table .order-total-line {
        padding: 0.3rem 0;
    }

    .order-confirmation-table .order-total-line.total-value {
        padding: 0.5rem 0;
    }

    #order-details .order-details-title {
        white-space: normal;
    }
}

/* ==========================================================================
   CHECKOUT — ADRESSEN (Liefer- / Rechnungsadresse)
   ========================================================================== */

#checkout-addresses-step .etica-address-intro {
    margin: 0 0 1rem;
}

#checkout-addresses-step .etica-address-intro--invoice {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e6e6e6;
}

#checkout-addresses-step .etica-address-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: none;
}

#checkout-addresses-step .etica-address-intro p {
    margin: 0;
    color: #6b6b73;
    font-size: 0.9rem;
    line-height: 1.45;
}

#checkout-addresses-step .etica-same-address--selector {
    margin: 0.25rem 0 1.5rem;
    padding: 0.9rem 1.1rem;
    background: #fff8e7;
    border: 1px solid #f3dfac;
    border-radius: 6px;
}

#checkout-addresses-step .etica-same-address--selector input[type="checkbox"] {
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
    cursor: pointer;
}

#checkout-addresses-step .etica-same-address--selector label {
    display: inline;
    margin: 0;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
}

#checkout-addresses-step .etica-same-address__hint {
    display: block;
    margin-top: 0.25rem;
    color: #6b6b73;
    font-size: 0.82rem;
}