/* =======================================================
   AC BADGES - "V showroome" a "Odporúčané nami" na kartách produktov
======================================================= */

/* Kontajnerom je len karta, ktorá naozaj obsahuje badge (inak by sa zbytočne menilo rozloženie ostatných odkazov), podľa jej šírky sa badge zmenšujú (mobil, úzke mriežky) */
a.product-thumbnail:has(> .ac-badge-showroom, > .ac-badge-featured) {
    container-type: inline-size;
}

/* --- Badge "V showroome" (vľavo dole, rovnaký štýl ako "Na sklade" vpravo) --- */
.ac-badge-showroom {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 2px;
    background: #0d69ba;
    color: #fff;
    font-family: 'Gilroy', sans-serif;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

/* --- Badge "Odporúčané nami" (kruh vpravo hore) --- */
.ac-badge-featured {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0d69ba;
    color: #fff;
    font-family: 'Gilroy', sans-serif;
    text-align: center;
    pointer-events: none;
}

.ac-badge-featured svg {
    flex-shrink: 0;
}

.ac-badge-featured-line {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
}

/* --- Úzka karta (napr. mobil): menší kruh a showroom nad "Na sklade" (výška "Na sklade" 25,6px + odstup 8px od spodku + medzera ~4px) --- */
@container (max-width: 200px) {
    /* Zdvihnutie len ak je pred badge štítok "Na sklade" (hook je vložený hneď za ním), inak ostáva dole */
    .stock-status ~ .ac-badge-showroom {
        bottom: 38px;
    }

    .ac-badge-featured {
        width: 54px;
        height: 54px;
    }

    .ac-badge-featured svg {
        width: 16px;
        height: 16px;
    }

    .ac-badge-featured-line {
        font-size: 8px;
    }
}