/**
 * Kunst in Kaart — Wishlist-hartje linksboven op mobiel
 *
 * Op tablet/mobiel (<= 1080px, hetzelfde breekpunt dat Savoy zelf voor de
 * mobiele productlayout gebruikt) staat het hartje linksboven op de foto:
 *
 *  - Categorie-/shoppagina's: hartje verhuist van rechtsboven naar linksboven.
 *    De labels (Sale / Nieuw / Uitverkocht) staan in de "centered" layout ook
 *    linksboven en wijken daarom uit naar rechtsboven, zodat ze elkaar niet
 *    overlappen.
 *  - Productpagina's: het hartje stond onderaan de samenvatting (onder de
 *    betaalicoontjes) en wordt door kik-wishlist-mobile.php over de
 *    hoofdafbeelding gelegd, linksboven.
 *
 * Desktop (> 1080px) blijft ongewijzigd.
 */


/* ---------------------------------------------------------------
   1. Categorie-/shoppagina's
   --------------------------------------------------------------- */

@media all and (max-width: 1080px) {

    /* Hartje: rechtsboven -> linksboven */
    .products.layout-centered .nm-wishlist-button {
        right: auto;
        left: 15px;
    }

    /* Labels (Sale / Nieuw): linksboven -> rechtsboven */
    .products.layout-centered .onsale {
        right: 12px;
        left: auto;
    }

    /* Label "Uitverkocht" (pseudo-element op de thumbnail-link) */
    .products.layout-centered li.outofstock .nm-shop-loop-thumbnail > .woocommerce-LoopProduct-link:after {
        right: 12px;
        left: auto;
    }
}

@media all and (max-width: 400px) {

    .products.layout-centered .nm-wishlist-button {
        left: 12px;
    }

    .products.layout-centered .onsale {
        right: 7px;
    }

    .products.layout-centered li.outofstock .nm-shop-loop-thumbnail > .woocommerce-LoopProduct-link:after {
        right: 7px;
    }
}


/* ---------------------------------------------------------------
   2. Productpagina
   --------------------------------------------------------------- */

@media all and (max-width: 1080px) {

    /* Oude plek onderaan de samenvatting verbergen — alleen als het script
       het hartje daadwerkelijk verplaatst heeft (html.kik-wl-moved), zodat
       het hartje niet verdwijnt wanneer de JS niet laadt. De deelknoppen
       staan uit; met deelknoppen blijft dit blok gewoon staan. */
    .kik-wl-moved .nm-product-share-wrap:not(.has-share-buttons) {
        display: none;
    }

    /* Hartje over de hoofdafbeelding, linksboven.
       De galerij loopt op mobiel door tot buiten de contentkolom (margin
       0 -30px), terwijl de foto zelf gecentreerd is binnen
       --nm--single-product-mobile-gallery-width. Daarom rekenen we de linker
       foto-rand uit i.p.v. de rand van de galerij te gebruiken.
       Het hartje krijgt 8px padding als ruimere tikzone; met 4px offset staat
       het icoon zelf 12px van de fotorand, net als in de productlijst. */
    .woocommerce-product-gallery > .nm-product-wishlist-button-wrap.kik-wl-on-image {
        position: absolute;
        top: 4px;
        left: calc(max(0px, (100% - var(--nm--single-product-mobile-gallery-width)) / 2) + 4px);
        z-index: 20;
        float: none;
        margin: 0;
    }

    .woocommerce-product-gallery > .nm-product-wishlist-button-wrap.kik-wl-on-image a {
        display: block;
        font-size: 0;
        line-height: 0;
        padding: 8px;
    }

    .woocommerce-product-gallery > .nm-product-wishlist-button-wrap.kik-wl-on-image a i {
        font-size: 18px;
        line-height: 1;
    }

    /* Open hartje (zoals in de productlijst); gevuld zodra het bewaard is.
       Savoy toont op de productpagina standaard altijd een gevuld hartje. */
    .woocommerce-product-gallery > .nm-product-wishlist-button-wrap.kik-wl-on-image a i:before {
        content: "\f08a";
    }

    .woocommerce-product-gallery > .nm-product-wishlist-button-wrap.kik-wl-on-image a.added i:before {
        content: "\f004";
    }
}