/*
 * onderdelen/productkaart.css — de productkaart en het raster eromheen.
 *
 * Eén kaart, twee plekken (baserules regel 8): het productoverzicht
 * (archive-product) legt er een raster of een lijst van, en de winkelwagen
 * (cart) zet er de rij "vaak samen gekocht" mee neer. Zou deze opmaak in
 * archive-product.css blijven staan, dan stond dezelfde kaart twee keer in het
 * thema en zou de ene versie na de eerste wijziging van de andere afwijken.
 *
 * De HTML komt uit template-parts/winkel/kaart.php en is op beide plekken
 * dezelfde. Wat een template zelf bepaalt:
 *
 *   --rasterKolommen   hoeveel kolommen het raster heeft (standaard 3)
 *   --kaartBeeld       de hoogte van het fotokader (standaard 200px)
 *   --kaartRand        de rand om de kaart
 *
 * De lijstweergave (.winkelRaster--lijst) staat hier níet: die omschakelaar
 * bestaat alleen op het productoverzicht, en een pagina hoort geen CSS op te
 * halen voor een weergave die er niet is. Zie sectie 9 van
 * archive-product.css.
 *
 * Klassenamen zijn camelCase (baserules regel 2).
 */

.winkelRaster {
    display: grid;
    gap: var(--ruimteMd);
    grid-template-columns: repeat(var(--rasterKolommen, 3), minmax(0, 1fr));
}

/*
 * De twee maten van de kaart staan op de kaart zelf en niet op de pagina
 * eromheen. Dat is wat dit onderdeel zelfstandig maakt: een raster met deze
 * kaarten werkt overal, ook op een template die van `--kaartRand` nooit gehoord
 * heeft.
 */
.winkelKaart {
    --kaartRand: 1px solid var(--kleurLijn);
    --kaartBeeld: 200px;

    display: flex;
}

.winkelKaartInner {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border: var(--kaartRand);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurMd) ease,
        box-shadow var(--duurMd) ease,
        transform var(--duurMd) var(--versnelling);
}

.winkelKaartInner:hover,
.winkelKaartInner:focus-within {
    border-color: color-mix(in srgb, var(--kleurBlauw) 55%, white);
    box-shadow: var(--schaduwMd);
    transform: translateY(-3px);
}

/* --- Het beeld ----------------------------------------------------- */

/*
 * Bijna wit en niet het vlakblauw van de rest van de site. Dat is geen
 * smaakkwestie: de foto's uit de migratie hebben zelf een witte achtergrond, en
 * op een blauw vlak staat daar een wit blok in beeld met de rand van de foto
 * eromheen. Een haarlijn onderaan doet wat de kleur moest doen — beeld en tekst
 * scheiden — zonder die rand te laten zien.
 */
.winkelKaartBeeld {
    position: relative;
    display: grid;
    height: var(--kaartBeeld);
    place-items: center;
    border-bottom: 1px solid var(--kleurLijnZacht);
    background: linear-gradient(180deg, #fff 0%, #f7fbfd 100%);
}

/*
 * contain en niet cover: een liggende monitor en een staande telefoon staan
 * naast elkaar in hetzelfde raster, en cover snijdt de een of de ander af.
 *
 * En absoluut gepositioneerd, met de ruimte eromheen als padding. Dat lijkt
 * omslachtig maar het is de enige stand die klopt:
 *
 *   - `height: 100%` op een rasteritem lost Chrome niet op als de rij `auto`
 *     is en alleen door de vaste hoogte van de houder uitgerekt wordt. De
 *     hoogte valt dan terug op `auto`, de afbeelding neemt haar eigen
 *     verhouding aan — 400 bij 400 uit samitProductKaart — en loopt zestig
 *     pixels over de titel heen.
 *   - `inset: 1rem` met `height: auto` doet het ook niet: een afbeelding is een
 *     vervangen element, en die rekt niet mee met zijn randen maar houdt zijn
 *     eigen hoogte.
 *
 * Absoluut gepositioneerd ís de houder wél een vaste maat, dus daar lost
 * `height: 100%` op — en de padding houdt de lucht eromheen.
 */
.winkelKaartFoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    object-fit: contain;
    transition: transform 420ms var(--versnelling);
}

.winkelKaartInner:hover .winkelKaartFoto {
    transform: scale(1.045);
}

.winkelKaartGeenFoto {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: var(--randLg);
    background-color: rgb(255 255 255 / 70%);
    color: var(--kleurTekstZacht);
}

.winkelKaartGeenFotoIcoon {
    width: 26px;
    height: 26px;
}

/* --- Vlaggen ------------------------------------------------------- */

.winkelKaartVlaggen {
    position: absolute;
    z-index: 2;
    top: 0.625rem;
    left: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.winkelVlag {
    padding: 0.1875rem 0.5rem;
    border-radius: var(--randSm);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.winkelVlagStaat {
    background-color: var(--kleurBlauwDonker);
    color: var(--kleurWit);
}

.winkelVlagKorting {
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

/* --- De tekst ------------------------------------------------------ */

.winkelKaartTekst {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0.875rem 1rem 1rem;
}

.winkelKaartMerk {
    margin-bottom: 0.25rem;
    color: var(--kleurTekstZacht);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.winkelKaartTitel {
    font-size: var(--tekstSm);
    font-weight: 600;
    line-height: 1.35;
}

/*
 * Twee regels, en daarna afgekapt. Zonder deze grens verschilt de hoogte van de
 * kaarten in een rij met de lengte van de titel, en de titels uit de feed lopen
 * van "iPad 9" tot vier regels vol.
 */
.winkelKaartLink {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kleurTekst);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.winkelKaartLink:hover,
.winkelKaartLink:focus-visible {
    color: var(--kleurBlauw);
}

/* De hele kaart aanklikbaar, met één link in de tabvolgorde. */
.winkelKaartLink::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.winkelKaartKenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.625rem;
}

.winkelKaartKenmerk {
    padding: 0.125rem 0.4375rem;
    border-radius: var(--randSm);
    background-color: var(--kleurVlakKoel);
    color: var(--kleurBlauwDonker);
    font-size: 0.6875rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* --- De voet ------------------------------------------------------- */

.winkelKaartVoet {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ruimteSm);
    margin-top: auto;
    padding-top: 0.875rem;
}

.winkelKaartPrijs {
    color: var(--kleurBlauwDonker);
    font-size: var(--tekstLg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/*
 * WooCommerce zet een doorgestreepte prijs in een <del> en de nieuwe in een
 * <ins>. Die twee komen uit get_price_html() en hebben dus geen eigen klasse
 * van dit thema.
 */
.winkelKaartPrijs del {
    margin-right: 0.3125rem;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    font-weight: 400;
}

.winkelKaartPrijs ins {
    text-decoration: none;
}

.winkelKaartBtw {
    margin-top: 0.0625rem;
    color: var(--kleurTekstZacht);
    font-size: 0.6875rem;
}

.winkelKaartVoorraad {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    color: var(--kleurTekstZacht);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.winkelKaartBolletje {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--randRond);
    background-color: currentcolor;
}

.winkelKaartVoorraad.opVoorraad {
    color: var(--kleurGroen);
}

.winkelKaartVoorraad.geenVoorraad {
    color: var(--kleurTekstZacht);
}

/*
 * "Bekijken →" schuift open bij hover. Op een aanraakscherm is er geen hover,
 * dus staat de regel daar altijd — zie de mediaquery onderaan.
 */
.winkelKaartActie {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    max-height: 0;
    overflow: hidden;
    color: var(--kleurBlauw);
    font-size: var(--tekstXs);
    font-weight: 500;
    opacity: 0;
    transition:
        max-height var(--duurMd) var(--versnelling),
        opacity var(--duurMd) ease,
        margin-top var(--duurMd) var(--versnelling);
}

.winkelKaartInner:hover .winkelKaartActie,
.winkelKaartInner:focus-within .winkelKaartActie {
    max-height: 1.5rem;
    margin-top: 0.625rem;
    opacity: 1;
}

.winkelKaartActiePijl {
    width: 15px;
    height: 10px;
    transition: transform var(--duurMd) var(--versnelling);
}

.winkelKaartInner:hover .winkelKaartActiePijl {
    transform: translateX(3px);
}

/* ==================================================================
 * Responsief
 *
 * De breekpunten zijn die van samitApparaat: 1024 (BREEKPUNT) en 767
 * (BREEKPUNT_SMAL). De derde, 480, is er een van deze kaart alleen: op een
 * raster van twee kolommen is een kaart daaronder 165 pixels breed, en dan
 * vallen vier labeltjes over vier regels uit elkaar en wordt de kaart hoger dan
 * hij breed is.
 * ================================================================== */

@media (width <= 1024px) {
    .winkelRaster {
        --rasterKolommen: 2;
    }
}

@media (width <= 767px) {
    .winkelRaster {
        gap: 0.625rem;
    }

    .winkelKaart {
        --kaartBeeld: 150px;
    }

    .winkelKaartTekst {
        padding: 0.75rem;
    }

    .winkelKaartVoet {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /*
     * Op een aanraakscherm is er geen hover, dus zou "Bekijken →" er nooit
     * staan. De regel valt daar weg in plaats van dat er een lege ruimte
     * openstaat waar niets in komt.
     */
    .winkelKaartActie {
        display: none;
    }
}

@media (width <= 479px) {
    .winkelRaster {
        --rasterKolommen: 1;
    }

    .winkelKaart {
        --kaartBeeld: 160px;
    }

    .winkelKaartVoet {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/*
 * Geen hover-apparaat: de foto beweegt niet mee. Staat na de mediaqueries
 * hierboven zodat hij die kan overschrijven op een aanraakscherm dat breder is
 * dan 767 pixels.
 */
@media (hover: none) {
    .winkelKaartInner:hover .winkelKaartFoto {
        transform: none;
    }
}

/*
 * Op papier is er geen hover en geen scrollpositie. Twee kolommen passen op een
 * A4; drie maken de kaarten onleesbaar smal.
 */
@media print {
    .winkelRaster {
        --rasterKolommen: 2;
    }

    .winkelKaartActie {
        display: none;
    }
}