/* ------------------------------------------------------------------------
   Merkzettel als Liste — Optik an der Maxia-Variantentabelle orientiert.
   Geladen nur auf der Merkzettel-Seite (page/wishlist/index.html.twig).

   Kein SCSS/Theme-Build: eine eigene Datei unter Resources/public, damit
   Aenderungen mit `assets:install` live gehen und nicht mit `theme:compile`.
   ------------------------------------------------------------------------ */

/* Spaltenraster — Kopfzeile und Datenzeilen teilen dieselbe Aufteilung */
.wmg-wl-head,
.wmg-wl-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 150px 170px 48px 40px;
    align-items: center;
    column-gap: 16px;
}

.wmg-wl-head {
    background: #333;
    color: #fff;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    font-size: .875rem;
}

/* Kacheln aufloesen: kein Rahmen, kein Schatten, nur eine Trennlinie */
.wishlist-page .cms-listing-row { display: block; }

.wishlist-page .cms-listing-col {
    padding: 0;
    max-width: 100%;
    flex: 0 0 100%;
}

.wishlist-page .cms-listing-col .card {
    border: 0;
    border-bottom: 1px solid #e6e4e0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

.wishlist-page .card-body-wishlist {
    padding: 9px 16px;
}

.wishlist-page .cms-listing-col:hover .card { background: #faf9f7; }

/* --- Zellen ------------------------------------------------------------ */
.wmg-wl-cell--img img,
.wmg-wl-cell--img .product-image {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

.wishlist-page .wmg-wl-cell--img .product-image-wrapper {
    padding: 0;
    height: auto;
    min-height: 0;
}

.wmg-wl-cell--info { min-width: 0; }

.wishlist-page .wmg-wl-cell--info .product-name {
    font-size: .9375rem;
    line-height: 1.3;
    margin: 0;
    white-space: normal;
    display: block;
}

.wmg-wl-nr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    color: #666;
    margin-top: 2px;
}

.wishlist-page .wmg-wl-cell--info .product-variant-characteristics {
    font-size: .8125rem;
    color: #666;
    margin-top: 2px;
}

/* Lagerstatus: nur zwei Zustaende, mit Punkt wie in der Variantentabelle */
.wmg-wl-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: #666;
    margin-top: 3px;
}

.wmg-wl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b6b1a9;
    flex: 0 0 8px;
}

.wmg-wl-stock.is-in .wmg-wl-dot { background: #2e9b4f; }
.wmg-wl-stock.is-out .wmg-wl-dot { background: #d08b12; }

.wmg-wl-cell--price { text-align: right; }

.wishlist-page .wmg-wl-cell--price .product-price {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Das Theme blendet die Kaufen-Aktion in Produktboxen aus (display:none) —
   in der Liste ist sie eine eigene Spalte und muss sichtbar sein. Drei Klassen
   schlagen die Theme-Regel; eine Wichtig-Kennzeichnung braucht es nicht. */
.wishlist-page .wmg-wl-cell--buy .product-action {
    display: block;
    margin: 0;
    opacity: 1;
    visibility: visible;
}

.wishlist-page .wmg-wl-cell--buy .btn {
    white-space: nowrap;
    width: 100%;
    padding: 7px 14px;
    font-size: .875rem;
}

/* Bootstrap `stretched-link` am Produktnamen legt einen unsichtbaren Ueberzug
   ueber die GANZE Karte — in der Kachel gewollt (alles klickbar), in der Liste
   fatal: Glocke, Kaufen und Entfernen lagen darunter und jeder Klick sprang zum
   Artikel. Ueberzug abschalten, nur der Text bleibt Link. */
.wishlist-page .wmg-wl-cell--info .product-name.stretched-link::after {
    display: none;
}

/* Bedienelemente sicher oben halten */
.wishlist-page .wmg-wl-cell--buy,
.wishlist-page .wmg-wl-cell--bell,
.wishlist-page .wmg-wl-cell--remove {
    position: relative;
    z-index: 2;
}

/* --- Erinnerungs-Glocke je Zeile ---------------------------------------
   Neutral gerendert, aktiv markiert WmgRestockNotify per `is-active`.
   Aktiv = farbig (Bernstein) und gefuellt, damit man die abonnierten
   Artikel in der Liste auf einen Blick erkennt. */
.wmg-wl-cell--bell { text-align: center; }

.wishlist-page .wmg-wl-bell {
    background: none;
    border: 0;
    padding: 4px;
    color: #b6b1a9;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.wishlist-page .wmg-wl-bell:hover { color: #6b665f; transform: translateY(-1px); }

.wishlist-page .wmg-wl-bell.is-active { color: #e8a413; }
.wishlist-page .wmg-wl-bell.is-active svg { fill: #ffd97a; }

.wmg-wl-cell--remove { text-align: center; }

.wishlist-page .wmg-wl-cell--remove .product-wishlist-remove {
    position: static;
    top: auto;
    right: auto;
}

.wishlist-page .wmg-wl-cell--remove .product-wishlist-btn {
    background: none;
    border: 0;
    padding: 4px;
    color: #999;
}

.wishlist-page .wmg-wl-cell--remove .product-wishlist-btn:hover { color: #c0392b; }

/* Ueberfluessiges aus der Kachel-Darstellung */
.wishlist-page .card-body-wishlist .product-badges,
.wishlist-page .card-body-wishlist .product-wishlist-info-manufacturer { display: none; }

/* --- Schmale Geraete: Zeile umbrechen statt quetschen ------------------ */
@media (max-width: 767.98px) {
    .wmg-wl-head { display: none; }

    .wmg-wl-row {
        grid-template-columns: 64px minmax(0, 1fr) 44px 40px;
        grid-template-areas:
            "img info bell remove"
            "img price price price"
            "buy buy buy buy";
        row-gap: 8px;
    }

    .wmg-wl-cell--img { grid-area: img; }
    .wmg-wl-cell--info { grid-area: info; }
    .wmg-wl-cell--price { grid-area: price; text-align: left; }
    .wmg-wl-cell--buy { grid-area: buy; }
    .wmg-wl-cell--bell { grid-area: bell; }
    .wmg-wl-cell--remove { grid-area: remove; }
}

/* ------------------------------------------------------------------------
   E-Mail-Erinnerungen (vom Plugin WmgRestockNotify gefuellt)
   ------------------------------------------------------------------------ */
.wmg-wl-reminders { margin: 40px 0 24px; }

.wmg-wl-reminders-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.wmg-wl-reminders-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.wmg-wl-reminders-hint { font-size: .875rem; color: #666; margin: 0; }
.wmg-wl-reminders-empty { font-size: .9375rem; color: #666; }

.wmg-wl-rem-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid #e6e4e0;
}

.wmg-wl-rem-row:first-of-type { border-top: 1px solid #e6e4e0; }
.wmg-wl-rem-row img { max-width: 56px; max-height: 56px; object-fit: contain; }
.wmg-wl-rem-name { color: inherit; text-decoration: none; font-size: .9375rem; }
.wmg-wl-rem-name:hover { text-decoration: underline; }

.wmg-wl-rem-nr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    color: #666;
}

.wmg-wl-rem-del {
    background: none;
    border: 0;
    padding: 4px;
    color: #999;
    line-height: 1;
    font-size: 1.125rem;
    cursor: pointer;
}

.wmg-wl-rem-del:hover { color: #c0392b; }