/*
 * Auffangnetz, kein Design.
 *
 * Solange AAWP installiert ist, liegt dessen Stylesheet ueber diesen Regeln und
 * die Boxen sehen aus wie bisher. Wird AAWP spaeter entfernt, faellt sein CSS weg
 * und die Boxen wuerden ohne diese Datei als untereinander stehende Fragmente
 * erscheinen. Hier steht deshalb nur, was die Grundform herstellt: Bild links,
 * Text rechts, ein erkennbarer Button, Haken und Kreuze in den Listen.
 */

.nspa-product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
    position: relative;
}

.nspa-product .aawp-product__thumb {
    flex: 0 0 180px;
    max-width: 180px;
    text-align: center;
}

/*
 * Die Hoehe ist begrenzt, nicht die Breite. Amazon liefert Bilder in sehr
 * unterschiedlichen Seitenverhaeltnissen; ohne Deckel wird ein hochkant
 * fotografierter Poolsauger doppelt so gross wie ein querformatiger daneben.
 * 200 Pixel ist derselbe Wert, den AAWP hier seit jeher benutzt.
 */
.nspa-product .aawp-product__image,
.cb-card .aawp-product__image,
.cb-top .aawp-product__image {
    display: block;
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    margin: 0 auto 15px;
}

.nspa-product .aawp-product__content {
    flex: 1 1 300px;
    min-width: 0;
}

.nspa-product .aawp-product__title {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.nspa-product .aawp-product__price {
    margin: .5rem 0 .75rem;
    font-size: 1.15em;
    font-weight: 700;
}

.nspa-product .aawp-product__details {
    flex: 1 1 100%;
}

.nspa-product .aawp-product__details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nspa-product .aawp-product__details li {
    padding: .15rem 0;
}

.nspa-product .aawp-product__details li i {
    margin-right: .5rem;
}

/* Ohne Font Awesome bleibt die Zeile sonst ohne Zeichen stehen. */
.nspa-pro i:before { content: "\2713"; color: #2e7d32; }
.nspa-con i:before { content: "\2717"; color: #c62828; }
.nspa-pro i.fa:before, .nspa-con i.fa:before { content: none; }

/*
 * Der Knopf traegt die CTA-Farbe der Seite, nicht das Amazon-Gold.
 *
 * Drei Dinge sind hier bewusst so gebaut, weil dieses Stylesheet auf jeder Seite
 * der Flotte landet und dort nichts umwerfen darf:
 *
 * 1. Die Farbe kommt aus einer Variablen, nicht aus einem festen Wert. Wer eine
 *    andere will, setzt --nspa-btn-bg im Kindtheme, ohne diese Datei anzufassen.
 *    Ohne eigene Angabe gilt --ccolor, die CTA-Farbe, die die Kindthemes der
 *    Flotte ohnehin fuehren. Der feste Wert am Ende greift nur, wo es weder das
 *    eine noch das andere gibt.
 * 2. Der Verlauf von AAWP muss ausdruecklich weg. Ein Verlauf ist ein
 *    Hintergrundbild und deckt jede Hintergrundfarbe zu; nur die Farbe zu setzen
 *    reicht nicht.
 * 3. !important steht nur da, wo AAWP selbst !important benutzt (Rahmen und
 *    Schriftfarbe). Alles andere gewinnt ueber die Genauigkeit des Selektors.
 *    So kann jedes Kindtheme diese Regeln weiterhin mit einer eigenen
 *    ueberschreiben, statt gegen eine Wand zu laufen.
 */
.nspa-product .aawp-button,
a.aawp-button.aawp-button--amazon,
.aawp a.aawp-button.aawp-button--amazon {
    display: inline-block;
    padding: .6rem 1.4rem;
    border: 0 !important;
    border-radius: var(--bradius, 4px);
    background-image: none;
    background-color: var(--nspa-btn-bg, var(--ccolor, #303e79));
    box-shadow: none;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: transform .12s ease, opacity .12s ease;
}

.nspa-product .aawp-button:visited,
a.aawp-button.aawp-button--amazon:visited,
.aawp a.aawp-button.aawp-button--amazon:visited {
    color: #fff !important;
}

/*
 * Beim Zeigen hebt sich der Knopf leicht an und wird eine Spur durchsichtiger.
 * Farbe und Schrift bleiben, damit nichts springt. AAWP legt seinen Verlauf auch
 * auf :hover und :focus, deshalb steht das hier noch einmal.
 */
.nspa-product .aawp-button:hover,
.nspa-product .aawp-button:focus,
a.aawp-button.aawp-button--amazon:hover,
a.aawp-button.aawp-button--amazon:focus,
.aawp a.aawp-button.aawp-button--amazon:hover,
.aawp a.aawp-button.aawp-button--amazon:focus {
    background-image: none;
    background-color: var(--nspa-btn-bg, var(--ccolor, #303e79));
    border: 0 !important;
    color: #fff !important;
    opacity: .92;
    transform: translateY(-2px);
}

/* Wer die Bewegung nicht will oder nicht vertraegt, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .nspa-product .aawp-button,
    a.aawp-button.aawp-button--amazon,
    .aawp a.aawp-button.aawp-button--amazon {
        transition: none;
    }
    .nspa-product .aawp-button:hover,
    a.aawp-button.aawp-button--amazon:hover,
    .aawp a.aawp-button.aawp-button--amazon:hover {
        transform: none;
    }
}

/*
 * Das Amazon-Zeichen. Font Awesome 5 fuehrt Markenzeichen in einer eigenen
 * Schriftfamilie, die alte Klasse "fa fa-amazon" aus AAWP-Zeiten trifft sie
 * nicht mehr. Das Zeichen wird deshalb hier gesetzt, in Weiss wie die Schrift.
 */
a.aawp-button--amazon i.fa-amazon:before,
.nspa-product .aawp-button i.fa-amazon:before {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome";
    font-weight: 400;
    content: "\f270";
    color: #fff;
}

/*
 * Manche Kindthemes setzen das Amazon-Zeichen selbst vor die Beschriftung, so
 * wie die Bestenlisten-Vorlage. Dort wuerde das Zeichen aus dem Plugin ein
 * zweites Mal erscheinen, deshalb bleibt es in diesem Fall aus. Der Knopf
 * behaelt genau ein Zeichen, gleich woher es kommt.
 */
.aawp-bestenliste a.aawp-button--amazon i.fa-amazon:before {
    content: none;
}

a.aawp-button--amazon i.fa-amazon,
.nspa-product .aawp-button i.fa-amazon {
    color: #fff;
    margin-left: .35rem;
}

/*
 * Der Zeitstempel ist eine Pflichtangabe von Amazon, aber keine Kaufinformation.
 * Er steht deshalb klein und ruhig neben dem Preis.
 */
.nspa-stand {
    display: inline-block;
    font-size: .75em;
    font-weight: 400;
    color: #767676;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .nspa-product {
        display: block;
    }
    .nspa-product .aawp-product__thumb {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}