/*
 * Product-info hover — zelfstandige styling.
 *
 * De thema-CSS voor dit blok is volledig gescoped op `.product` / `.featured-products`
 * (dist/styles/main.css). In een Elementor loop item bestaat die voorouder niet, dus
 * daar doet de thema-CSS niets. Deze regels staan los en werken overal.
 *
 * Uitgangspunt: de wrapper legt zich als laag over de kaart en klipt zichzelf, zodat
 * het dichtgeschoven blokje niet buiten de kaart uitsteekt. De ouder hoeft daardoor
 * geen overflow:hidden te krijgen.
 */

/*
 * Bewust met alle vier de offsets ÉN width/height, in plaats van de korte `inset: 0`.
 * De wrapper heeft zelf geen inhoud die ruimte inneemt — icoon en overlay zijn allebei
 * absoluut gepositioneerd — dus zodra één van deze eigenschappen wegvalt, klapt hij
 * dicht tot nul hoogte en verdwijnt alles achter `overflow: hidden`. Deze opzet blijft
 * overeind ook als een minifier of optimalisatielaag `inset` niet doorlaat.
 */
.awcf-product-info {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    /* Vaste hoogte: `height:100%` kwam hier niet aan. Aan te passen met
       [awcf_product_info height="240px"] of via de module-instelling. */
    height: var(--awcf-pi-height, 200px);
    overflow: hidden;
    /* Ruim boven de Elementor-widgets. De uitgelichte afbeelding kwam er anders
       overheen; die zit in de DOM ná de shortcode en had een hogere z-index. */
    z-index: 60;
    pointer-events: none;   /* de kaart eronder blijft klikbaar */
    border-radius: inherit;
}

/*
 * De kaart waarop het blokje ligt. Bewust alleen de container die het blokje
 * direct bevat — niet elke voorouder — zodat we niet ongemerkt de positionering
 * van de hele kaartopbouw veranderen.
 */
.e-con:has(> .awcf-product-info),
.e-con:has(> .elementor-widget-shortcode .awcf-product-info),
li.product:has(.awcf-product-info) {
    position: relative;
}

/*
 * De lege omhulsels van de shortcode-widget mogen NOOIT de referentie worden —
 * dan krimpt het blokje mee tot een doosje van niks. Ze staan standaard al op
 * static; dit legt dat vast, ook als Elementor er iets anders van maakt.
 */
.elementor-widget-shortcode:has(.awcf-product-info),
.elementor-widget-shortcode:has(.awcf-product-info) > .elementor-widget-container,
.elementor-shortcode:has(> .awcf-product-info) {
    position: static !important;
}

/*
 * `fixed` op verzoek — met `absolute` bleef het icoon onzichtbaar.
 *
 * Dat het met `fixed` wél op zijn plek staat, betekent dat een voorouder van de
 * kaart een `transform` heeft: een `position:fixed`-element neemt dan die
 * voorouder als referentie in plaats van de viewport. Dat werkt, maar het is
 * afhankelijk van die transform — verdwijnt hij, dan springen alle iconen naar
 * de linkerbovenhoek van het scherm. Wil je het robuuster: zet de container om
 * de shortcode op Positie: Relatief en zet dit terug op `absolute`.
 */
/*
 * Standaard `absolute`: het JS hangt de wrapper aan de productkaart en maakt die
 * de positioneringscontext, dus absolute landt precies goed. Wil je toch fixed:
 * [awcf_product_info icon_position="fixed"]. Let op dat fixed zonder voorouder
 * mét transform tegen de viewport plakt — dan stapelen alle iconen linksboven
 * in beeld, achter de header.
 */
/*
 * Het icoon blijft visueel 16px, maar krijgt een ruimere hitbox via padding.
 * De offsets zijn met dezelfde padding meegeschoven, zodat het beeld niet
 * verspringt: 14 - 8 = 6 en 0 - 8 = -8.
 */
.awcf-product-info .product-info_icon {
    position: var(--awcf-pi-icon-pos, absolute) !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 62 !important;
    box-sizing: content-box;
    width: 16px;
    height: auto;
    padding: 8px;
    pointer-events: auto;   /* alleen het icoon vangt de hover */
    cursor: help;
}

/* Zichtbaar in de inspector welk element als kaart is gekozen. */
.awcf-product-info-anchor {
    position: relative;
}

.awcf-product-info .product-info_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    background-color: var(--awcf-product-info-bg, #a08b52);
    color: #fff;
    border-radius: 0 0 10px 10px;
    /* Iets compacter dan het thema: minder lucht boven en onder. */
    padding: 38px 0 14px;
    font-family: Cantarell, sans-serif;
    font-size: var(--awcf-pi-font, 13px);
    line-height: 1.45;
    z-index: 61;
    transform: translateY(-100%);
    transition: transform .2s ease-in-out;
    pointer-events: none;
}

.awcf-product-info .product-info_icon:hover ~ .product-info_overlay,
.awcf-product-info .product-info_icon:focus-visible ~ .product-info_overlay {
    transform: translateY(0);
}

.awcf-product-info .product-info_overlay .attribute-wrapper {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    text-transform: capitalize;
}

@media (prefers-reduced-motion: reduce) {
    .awcf-product-info .product-info_overlay {
        transition: none;
    }
}