/* Комплекты «Výhodné sady» (Views/Shared/_Bundles.cshtml): главная и eShop.
   Карточка — как карточка товара eShop (shop.css), только с двумя товарами. Цвета — из палитры сайта (site.css) */
/* Блок огорожен от обычных товаров: пунктирная рамка и мягкий голубой фон */
.bundles {
    --bundle-sale: #dc3545;
    --bundle-save: #1f8a5b;
    --bundle-ink: #2b3a4a;
    --bundle-muted: #8a97a4;
    margin: 0 0 2rem;
    padding: 1.25rem 1.25rem 1.4rem;
    border: 2px dashed var(--hc-sky);
    border-radius: calc(var(--hc-radius) + 6px);
    background: linear-gradient(180deg, var(--hc-sky-soft) 0%, rgba(234, 243, 254, .35) 100%);
}

@media (max-width: 575.98px) {
    .bundles {
        padding: 1rem .75rem 1.1rem;
    }
}

.bundles-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

    .bundles-head h2 {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
        font-weight: 700;
        color: var(--hc-primary);
    }

    .bundles-head p {
        margin: .15rem 0 0;
        color: #6b7785;
    }

.bundles-all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--hc-sky-soft);
    color: var(--hc-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .bundles-all:hover {
        background: var(--hc-primary);
        color: #fff;
    }

.bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}

/* ===== Карточка ===== */
.bundle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--hc-radius);
    background: #fff;
    box-shadow: var(--hc-shadow-soft);
    text-align: center;
}

/* Лента: «Výhodná sada» (синяя), при акции на набор — «Akce» (красная, как у товаров) */
.bundle-ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--hc-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(27, 110, 194, .3);
}

.bundle-card.is-sale .bundle-ribbon {
    background: var(--bundle-sale);
    box-shadow: 0 4px 10px rgba(220, 53, 69, .3);
}

.bundle-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    height: 200px;
    padding: 2.2rem .75rem .5rem;
    background: linear-gradient(180deg, var(--hc-sky-soft) 0%, #fff 100%);
}

    .bundle-imgs a {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-width: 0;
    }

    .bundle-imgs img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.bundle-plus {
    flex: 0 0 auto;
    color: var(--hc-primary);
    font-size: 1.3rem;
}

.bundle-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
}

.bundle-names {
    margin: 0;
    font-size: .95rem;
    line-height: 1.3;
}

    .bundle-names a {
        color: var(--bundle-ink);
        font-weight: 600;
        text-decoration: none;
    }

        .bundle-names a:hover {
            color: var(--hc-primary);
        }

    .bundle-names span {
        margin: 0 .2rem;
        color: var(--hc-primary);
        font-weight: 700;
    }

.bundle-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
    margin-top: auto;
}

    .bundle-price s {
        color: var(--bundle-muted);
        font-size: .9rem;
    }

    .bundle-price strong {
        color: var(--hc-primary);
        font-size: 1.25rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.bundle-card.is-sale .bundle-price strong {
    color: var(--bundle-sale);
}

.bundle-pct {
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--bundle-sale);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.bundle-separately {
    color: var(--bundle-muted);
    font-size: .8rem;
}

.bundle-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--hc-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

    .bundle-add:hover,
    .bundle-add:focus-visible {
        background: var(--hc-primary-dark);
        color: #fff;
    }

    .bundle-add.is-added,
    .bundle-add.is-added:disabled {
        background: var(--bundle-save);
        color: #fff;
        opacity: 1;
    }

    .bundle-add:disabled {
        color: #fff;
    }


/* ===== Баннер сезонной акции «подарок от N €» (_GiftPromoBanner) — в палитре сайта, как баннер главной ===== */
.gift-promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(27, 110, 194, .14);
    border-radius: var(--hc-radius);
    background: linear-gradient(120deg, var(--hc-sky-soft) 0%, #fff 60%, var(--hc-sky-soft) 100%);
    color: #1f2d3d;
    text-decoration: none;
    box-shadow: var(--hc-shadow-soft);
    transition: transform .15s, box-shadow .15s;
}

    /* мягкий блик, как у баннера главной */
    .gift-promo-banner::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -90px;
        top: -170px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(25, 190, 255, .22) 0%, rgba(25, 190, 255, 0) 70%);
        pointer-events: none;
    }

    .gift-promo-banner:hover {
        color: #1f2d3d;
        transform: translateY(-2px);
        box-shadow: var(--hc-shadow);
    }

    .gift-promo-banner > * {
        position: relative;
        z-index: 1;
    }

.gift-promo-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--hc-primary) 0%, var(--hc-accent) 100%);
    color: #fff;
    font-size: 1.9rem;
    box-shadow: 0 8px 20px rgba(27, 110, 194, .3);
}

.gift-promo-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
}

.gift-promo-badge {
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--hc-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gift-promo-text strong {
    color: var(--hc-primary-dark);
    font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
}

.gift-promo-desc {
    color: #5a6b7d;
    line-height: 1.45;
}

/* кнопка — как кнопки баннера главной */
.gift-promo-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.4rem;
    border-radius: 999px;
    background: var(--hc-primary);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(27, 110, 194, .25);
    transition: background-color .15s;
}

.gift-promo-banner:hover .gift-promo-cta {
    background: var(--hc-primary-dark);
}

/* новогодний период (body.hc-holiday) — золотые акценты */
.hc-holiday .gift-promo-icon {
    background: linear-gradient(135deg, var(--hc-xmas-red, #e0393e) 0%, var(--hc-xmas-gold, #f6c453) 100%);
    box-shadow: 0 8px 20px rgba(224, 57, 62, .25);
}

.hc-holiday .gift-promo-badge {
    background: var(--hc-xmas-red, #e0393e);
}

@media (max-width: 575.98px) {
    .gift-promo-banner {
        flex-wrap: wrap;
        gap: .9rem;
        padding: 1rem 1.1rem;
    }

    .gift-promo-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .gift-promo-text {
        flex-basis: calc(100% - 52px - .9rem);
    }

    .gift-promo-cta {
        width: 100%;
        justify-content: center;
    }
}