/* Start:/local/templates/2019/css/badges.css?17792231398208*/
/* -------------------- */
/* слой шильдиков */
/* -------------------- */
.badges-wrapper {
    position: relative;
    display: inline-block;
}

.badges-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.badges,
.badge,
.badge-favorite {
    pointer-events: auto;
}

.badges {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badges[data-corner="tl"] { top: 0; left: 0; right: 56px; }
.badges[data-corner="tr"] { top: 0; right: 0; }
.badges[data-corner="bl"] { bottom: 0; left: 0; }
.badges[data-corner="br"] { bottom: 0; right: 0; }

/* угловые радиусы */
.badges[data-corner="tl"] .badge {
    border-radius: 0 8px 8px 0;
    height: 20px;
    width: fit-content;
    max-width: 100%;
}

.badges[data-corner="tr"] .badge {
    border-radius: 8px 0 0 8px;
}

/* BL — левый нижний угол */
.badges[data-corner="bl"] .badge {
    background: #FFFFFFCC;
    height: 24px;
    color: #000;
}

.badges[data-corner="bl"] .badge:only-child {
    border-radius: 0 8px 8px 0;
}

.badges[data-corner="bl"] .badge:first-child {
    border-radius: 0 8px 8px 0;
}

.badges[data-corner="bl"] .badge:last-child {
    border-radius: 0 8px 0 0;
}

.badges[data-corner="br"] .badge {
    border-radius: 8px 0 0 0;
}

.badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
    width: fit-content;
    white-space: nowrap;
    line-height: 130%;
    letter-spacing: 0;
    color:#fff;
}

.badge-favorite {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.9);
    border-bottom-left-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.badge-favorite img {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.badge-favorite:hover img {
    transform: scale(1.1);
}

.badge-favorite.active img {
    transform: scale(1.05);
}

.badge__text {
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
}

.badge__text-main {
    font-family: "SF Pro Display", "Cera Round", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000CC;
}

.badge__text-secondary {
    font-family: "Cera Round", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #7A7A7A;
}

.badge__icon {
    object-fit: contain;
}

.badge__icon-bl {
    width: 18px;
    height: 18px;
}

.badge-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 12px 16px;
    color: #262626;
    border-radius: 8px;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 16px 0 #8B8B8B33;
    border: 1px solid #EFEFEF;
    z-index: 99999;
}
.badge-tooltip.tooltip-above {
    bottom: 100%;
    margin-bottom: 8px;
}

.badge-tooltip.tooltip-above::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* tooltip снизу */
.badge-tooltip.tooltip-below {
    top: 100%;
    margin-top: 8px;
}

.badge-tooltip.tooltip-below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.badges[data-corner="br"] .badge {
    background: #FFFFFFCC;
    height: 24px;
    border-radius: 8px 0 0 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.badge__text-br {
    font-family: "Cera Round", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000CC;
    line-height: 1;
}

/* -- badges in product card -- */
.gallery-ui-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: visible;
    pointer-events: none;
}

.gallery-ui-layer button,
.gallery-ui-layer a,
.gallery-ui-layer__actions,
.gallery-ui-layer__favorite,
.gallery-ui-layer__badges,
.gallery-ui-layer__controls {
    pointer-events: auto;
}

.gallery-ui-layer__badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 68px;
    bottom: auto;
    display: flex;
    gap: 8px;
}

.gallery-ui-layer__favorite {
    position: absolute;
    top: 12px;
    right: 12px;
}

.gallery-ui-layer__favorite .favorite {
    width: 48px;
    height: 48px;
    min-width: auto;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px 0 #8B8B8B33;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.2s ease;
}

.gallery-ui-layer__favorite .favorite:hover {
    box-shadow: 0 8px 16px 0 #8B8B8B66;
}

.gallery-ui-layer__actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-ui-layer__controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
}

.badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    padding: 2px 8px;
    height: 20px;
    border-radius: 0 6px 6px 0;
    width: fit-content;

    max-width: 100%;
    overflow: visible;
    pointer-events: auto;
    z-index: 2;
}

.badge__text {
    font-family: "Cera Round", Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-tooltip {
    position: absolute;
    left: 50%;
    display: none;
    transform: translateX(-50%);
    top: 100%;
    background: #fff;
    padding: 12px 16px;
    margin-top: 12px;
    color: #262626;
    border-radius: 8px;
    font-size: 14px;
    line-height: 140%;
    white-space: nowrap;
    pointer-events: auto;
    box-shadow: 0 4px 16px 0 #8B8B8B33;
    border: 1px solid #EFEFEF;
    z-index: 99999;
    --arrow-offset: 0px;
}

.badge-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: calc(50% + var(--arrow-offset, 0px));
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.gallery-ui-layer__badges {
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    max-width: calc(100% - 68px);
    flex-wrap: wrap;
}

.badges-wrapper.wrap-cart {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.badges-wrapper.wrap-cart .badges-layer {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badges-wrapper.wrap-cart .badges[data-corner="tl"] {
    position: static;
    max-width: 100%;
    right: auto;
    display: flex;
    width: fit-content;
}
.badges-wrapper.wrap-cart .badges[data-corner="tr"],
.badges-wrapper.wrap-cart .badges[data-corner="bl"],
.badges-wrapper.wrap-cart .badges[data-corner="br"] {
    display: none;
}

.badge img {
    max-height: 18px;
}

.badges-wrapper.wrap-cart .badge {
    z-index: auto;
}

.badges-wrapper.wrap-cart .badge {
    max-width: 100%;
    white-space: nowrap;
}

.badges-wrapper.wrap-cart .badge .badge__text {
    overflow: hidden;
    white-space: nowrap;
}

.gallery-ui-layer__badges .stickers {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}
.catalog-element__hints {
    pointer-events: none;
}

@media (max-width: 1023px) {
    .catalog-element__gallery-wrap,
    .catalog-element__picture
    {
        margin-top: -48px !important;
    }
}

@media (max-width: 767px) {
    .gallery-ui-layer__favorite {
        top: 8px;
        right: 8px;
    }

    .gallery-ui-layer__actions {
        top: auto;
        bottom: 12px;
        transform: none;
        right: 8px;
    }

    .gallery-ui-layer__badges {
        right: 56px;
    }

    .gallery-ui-layer__controls {
        bottom: -16px;
    }
    .badges-wrapper.wrap-cart .badges[data-corner="tl"] {
        max-width: 100%;
    }
}


/* End */
/* /local/templates/2019/css/badges.css?17792231398208 */